JavaScript DOM操作：元素、属性和文本节点详解

"JavaScript DOM 节点是用于操作网页中的HTML或XML文档的重要工具，主要包括元素节点、属性节点和文本节点。元素节点是HTML标签的代表，它们提供了访问标签名称、子节点以及属性的途径。在JavaScript中，每个DOM节点都有特定的属性来描述其类型、名称和值。" 在DOM（文档对象模型）中，元素节点是构成HTML文档结构的基本单元，它们对应于HTML中的各种标签，如`<ul>`、`<li>`等。元素节点的`nodeType`属性通常为1，表示这是一个元素节点。`nodeName`或`tagName`属性返回元素的标签名，且通常是大写的，例如`UL`。而`nodeValue`属性对于元素节点来说通常为`null`，因为元素节点本身并不存储文本内容。 元素节点的`parentNode`属性允许我们访问包含该元素的父节点，这可以是另一个元素节点或整个文档的`Document`节点。通过`childNodes`属性，我们可以获取到元素的所有子节点，这些子节点可以是其他元素、文本节点、注释或处理指令。例如，在`<ul class="list" id="list">`这个例子中，`childNodes`将包含所有的`<li>`子元素。 为了统计元素的子元素数量，我们可以遍历`childNodes`数组，并利用`nodeType`属性来检查每个节点是否是元素节点。`nodeType`为1表示它是元素节点。在提供的代码示例中，`num`变量用于记录元素子节点的数量。 属性节点则代表了HTML元素的属性，例如`class`、`id`等。JavaScript提供了几个方法来操作属性：`hasAttribute()`检查元素是否具有某个属性，`getAttribute()`获取属性值，`setAttribute()`设置属性值，以及`removeAttribute()`移除属性。需要注意的是，`hasAttribute()`在早期的IE浏览器中可能不被支持，而在某些情况下，如检查`class`或`for`属性时，直接使用属性名（不加`Attribute`后缀）即可。 属性操作在实际开发中非常常见，例如，我们可以通过`document.getElementById('test')`获取ID为`test`的元素，然后使用`getAttribute('style')`读取其样式，或者使用`setAttribute('style', 'new-style')`改变其样式。 JavaScript DOM节点和属性的操作是网页动态化和交互的基础，理解并熟练运用这些概念和方法是成为合格前端开发者的关键。通过控制元素节点和属性，我们可以实现诸如添加、删除、修改页面元素，以及响应用户交互等多种功能。