JavaScript中节点操作实践：元素、属性与文本节点详解

在JavaScript中，节点是DOM（Document Object Model）的核心概念，它代表了HTML文档中的各种元素、属性和文本。本文将详细介绍三种类型的节点：元素节点、属性节点和文本节点，并通过代码示例来演示如何操作它们。 **一、元素节点** 元素节点表示HTML文档中的标签或元素，如`<li>`、`<p>`等。在提供的代码片段中，`getElementsByTagName()`函数用于获取所有匹配指定标签名（在这个例子中是`<li>`）的元素。`getElementsByTagName`返回一个NodeList对象，可以遍历这个列表并访问每个元素的属性。`nodeName`属性返回节点的标签名，`nodeType`属性表示节点类型，这里是1（ELEMENT_NODE），而`nodeValue`通常用于文本节点，对于元素节点则为空，因为它们不包含文本内容。然而，你可以通过循环访问`childNodes`属性来检查子节点，如设置`childNodes[0].nodeValue`来改变节点内的文本。 **二、属性节点** 属性节点存储HTML元素的属性值。在代码中，`getAttributeNode()`方法用于获取特定属性的节点。例如，`getAttributeNode("value")`返回`value`属性的属性节点。`nodeName`现在表示属性名，`nodeType`为2（ATTRIBUTE_NODE）。`nodeValue`属性包含了该属性的实际值，`getAttribute("value")`用于获取该属性的值。这展示了如何分别处理属性节点的名称、类型和值。 **三、文本节点** 文本节点存储HTML元素内部的文本内容。在提供的代码中，`childNodes`用于访问元素的所有子节点，包括文本节点。通过索引`[0]`获取第一个子节点，然后查看其`nodeName`（通常是空字符串，因为它是文本节点）、`nodeType`（3，TEXT_NODE）以及`nodeValue`（文本内容）。此外，还可以通过修改`nodeValue`来替换或增加文本节点的内容。`firstChild`和`lastChild`属性也可用于直接访问第一个或最后一个子节点。 总结起来，JavaScript中的节点操作对于理解文档结构和动态更新页面内容至关重要。通过掌握元素节点、属性节点和文本节点，开发者可以灵活地操控DOM，实现丰富的交互效果和数据绑定。理解这些基础概念是进一步学习和实践JavaScript前端开发的基础。