详谈DOM简介及节点、属性、查找节点的方法

DOM（Document Object Model）是一种用于表示和操作HTML、XML文档的API，它将HTML、XML文档表示为一个树形结构，并且提供操作该树形结构的方法。在DOM模型中，文档被表示为节点和对象的组合，节点包括元素节点、文本节点、属性节点等，对象包括document对象、element对象等。

节点

在DOM模型中，所有的HTML元素都是节点，节点可以有父节点、子节点、兄弟节点，节点还可以包含属性和文本内容。下面是常见的节点类型：

• 元素节点：表示HTML文档中的标签，例如<div>、<p>等。
• 文本节点：表示HTML文档中的文本内容。
• 属性节点：表示元素节点的属性，例如<div class="container">中的class属性。

在JavaScript中，通过使用document对象可以获取或创建节点。

查找节点

可以使用各种方法查找DOM树中的节点，例如：

• getElementById：根据id获取指定的元素节点。
• getElementsByName：根据name获取一组元素节点。
• getElementsByClassName：根据class名称获取一组元素节点。
• getElementsByTagName：根据标签名称获取一组元素节点。
• querySelector：根据CSS选择器选择一个元素。
• querySelectorAll：根据CSS选择器选择一组元素。

下面是几个根据id查找元素节点的例子：

// 根据id查找元素节点
var element = document.getElementById("container");
console.log(element);

属性

在DOM模型中，每个节点都可以包含属性，如元素节点的class属性、id属性等。

获取属性

可以使用getAttribute方法获取元素节点的属性值，例如：

// 获取元素节点的class属性值
var element = document.getElementById("container");
var className = element.getAttribute("class");
console.log(className);

设置属性

可以使用setAttribute方法设置元素节点的属性值，例如：

// 设置元素节点的class属性值
var element = document.getElementById("container");
element.setAttribute("class", "new-class");

示例

下面是一个添加新的元素节点的例子：

// 创建新的元素节点
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "new-class");
newDiv.innerHTML = "This is a new div.";

// 获取父元素节点，并在该节点中添加新的子节点
var parent = document.getElementById("container");
parent.appendChild(newDiv);

上面的示例中，我们首先使用createElement方法创建一个新的div元素节点，并使用setAttribute方法设置其class属性值，然后设置该节点的innerHTML属性值，最后获取父元素节点，使用appendChild方法将新的div元素添加到该节点中。