HTML | DOM 摘要对象

HTML | DOM（文档对象模型）摘要对象是在JavaScript中操作、控制HTML页面的重要工具。它提供了一种方式来访问和操作HTML文档中的元素，使得程序员可以根据需要动态地更改页面的内容、结构和样式。

创建摘要对象

要从JavaScript中创建一个摘要对象，可以使用 document.createElement(tagName) 方法。其中，tagName 是要创建的HTML元素标签的名称，比如 <div>、<p>、<ul> 等。以下是一个创建 <div> 元素的示例代码：

let divElement = document.createElement("div");

操作摘要对象

摘要对象提供了丰富的方法和属性，使得程序员可以对元素进行各种操作和设置。以下是一些常用的操作摘要对象的方法示例：

属性操作

获取和设置元素的属性值

• element.getAttribute(name)：获取元素的指定属性值。
• element.setAttribute(name, value)：设置元素的指定属性值。

let imageUrl = element.getAttribute("src");
element.setAttribute("class", "highlight");

获取和设置元素的样式属性

• element.style.property：访问或设置元素的指定样式属性，如 element.style.color。
• element.classList：提供了一组方法来操作元素的类名，如 element.classList.add("highlight")。

element.style.backgroundColor = "red";
element.classList.add("active");

节点操作

添加和删除子节点

• element.appendChild(node)：将一个子节点添加到元素的末尾。
• element.removeChild(node)：从元素中删除一个子节点。

let spanElement = document.createElement("span");
element.appendChild(spanElement);
element.removeChild(spanElement);

替换和插入节点

• element.replaceChild(newNode, oldNode)：用一个新节点替换元素的子节点。
• element.insertBefore(newNode, referenceNode)：在元素的子节点列表中的指定位置插入一个新节点。

let newElement = document.createElement("div");
element.replaceChild(newElement, oldElement);
element.insertBefore(newElement, referenceElement);

遍历摘要对象

摘要对象的层次结构可以通过遍历来访问和操作。以下是一些常用的遍历摘要对象的方法示例：

遍历子节点

• element.childNodes：获取元素的所有子节点（包括文本节点和注释节点）。
• element.children：获取元素的所有子元素节点。

let childNodes = element.childNodes;
let children = element.children;

遍历父节点和兄弟节点

• element.parentNode：获取元素的父节点。
• element.previousSibling：获取元素的前一个同级节点。
• element.nextSibling：获取元素的后一个同级节点。

let parentNode = element.parentNode;
let previousSibling = element.previousSibling;
let nextSibling = element.nextSibling;

遍历后代节点

• element.querySelector(selector)：返回匹配指定选择器的元素的第一个后代元素。
• element.querySelectorAll(selector)：返回匹配指定选择器的所有后代元素。

let descendantElement = element.querySelector(".highlight");
let descendantElements = element.querySelectorAll("p");

总结

HTML | DOM 摘要对象提供了一种强大的方式来操作和控制HTML页面中的元素。它的方法和属性可以让程序员轻松地访问和修改页面的内容、结构和样式。熟练掌握摘要对象的使用可以使得开发者更加灵活和高效地处理HTML页面，并为用户提供更好的交互体验。