HTML | DOM 标题对象

介绍

在 HTML5 中，标题元素 h1 到 h6 表示文本的标题级别。标题级别从 h1 到 h6 逐个降低， h1 为最高级标题， h6 为最低级标题。在 DOM 中，每个标题元素都可以表示为一个标题对象，通过标题对象，我们可以通过 javascript 来添加或者修改标题元素的文本、样式或属性。

如何获取标题对象

我们可以通过以下方法来获取标题对象：

document.getElementsByTagName("h1")[0];
document.getElementById("标题 ID");
document.querySelector("h1");

其中，

• 通过 getElementsByTagName 方法获取的标题对象数组，可以通过下标来获取具体的标题对象， document.getElementsByTagName("h1")[0]; 表示获取第一个 h1 元素的标题对象。
• 通过 getElementById 方法获取标题对象时，需要传入标题元素的 ID，例如 document.getElementById("标题 ID"); 表示获取 ID 为 "标题 ID" 的 h1 元素的标题对象。
• 通过 querySelector 方法获取的文档中具符合选择器的第一个元素的标题对象。

标题对象的属性和方法

下面列举了标题对象的一些常用属性和方法：

属性

• textContent : 获取或设置标题对象的文本内容。
• id : 获取或设置标题对象的 ID。
• className : 获取或设置标题对象的类名。
• style : 获取或设置标题对象的样式。

方法

• setAttribute : 设置标题对象的属性。
• getAttribute : 获取标题对象的属性。
• appendChild : 向标题对象插入一个新的子节点。
• removeChild : 从标题对象中删除一个子节点。
• insertBefore : 在标题对象的子节点前插入一个新节点。

示例代码

下面示范如何获取一个标题对象，并修改标题对象的属性和文本：

let titleObj = document.getElementById("h1-title");
// 修改标题对象的类名
titleObj.className = "new-class";
// 修改标题对象的文本
titleObj.textContent = "My New Title";
// 设置标题对象的属性
titleObj.setAttribute("data-test", "123");

以上就是关于 HTML | DOM 标题对象的简介，希望可以对你的学习有所帮助。