HTML | DOM 标题对象

在 HTML 页面中，可以为不同部分定义标题。标题按级别分为六级，从 <h1> 到 <h6>，代表不同的重要程度。在DOM（Document Object Model）中，通过标题对象可以轻松地访问和操作 HTML 中的标题元素。

操作标题对象

要操作标题元素，需要先获取标题对象，然后调用相应的方法和属性。可以使用以下方法来获取标题对象：

// 根据 HTML 中标签名称来获取标题对象
var h1Elements = document.getElementsByTagName("h1");

// 根据 CSS 类名来获取标题对象
var titleElements = document.getElementsByClassName("title");

// 根据选择器来获取标题对象
var subTitleElements = document.querySelectorAll(".sub-title");

以上三种方法都可以返回一个或多个标题对象的集合。一旦获取了标题对象，就可以使用以下属性和方法来操作它们：

属性

• element.innerText: 获取或设置元素的文本内容。
• element.innerHTML: 获取或设置元素的 HTML 内容。

方法

• element.getAttribute(name): 获取元素的指定属性值。
• element.setAttribute(name, value): 设置元素的指定属性值。
• element.hasAttribute(name): 判断元素是否包含指定属性。
• element.removeAttribute(name): 删除元素的指定属性。

示例代码

获取标题对象

// 根据 HTML 中标签名称来获取标题对象
var h1Elements = document.getElementsByTagName("h1");

// 根据 CSS 类名来获取标题对象
var titleElements = document.getElementsByClassName("title");

// 根据选择器来获取标题对象
var subTitleElements = document.querySelectorAll(".sub-title");

操作标题元素

// 获取第一个 h1 元素
var h1Element = h1Elements[0];

// 获取 h1 元素的文本内容
var h1Text = h1Element.innerText;

// 设置 h1 元素的文本内容
h1Element.innerText = "新标题";

// 获取 h1 元素的 class 属性
var h1Class = h1Element.getAttribute("class");

// 添加 class 属性
h1Element.setAttribute("class", "title red");

// 判断 h1 元素是否包含 id 属性
var hasId = h1Element.hasAttribute("id");

// 删除 id 属性
h1Element.removeAttribute("id");

以上示例代码演示了如何获取标题对象并对其进行操作。通过标题对象，可以轻松地访问和操作 HTML 页面中的标题元素，实现各种需求。