jacascript DOM节点——元素节点、属性节点、文本节点

JavaScript DOM节点是文档对象模型（DOM）中的基本要素之一，它们可以作为网页中的任意元素的表示。DOM节点可以分为三种主要类型：元素节点、属性节点、文本节点。本文将详细讲解这三种节点类型的定义、区别以及使用方法。

元素节点

元素节点是DOM树结构中的基本节点，它表示HTML文档中的元素。可以通过document.getElementByTagName('tagname')或document.getElementById('id')等方法获取元素节点。元素节点有以下几种常见的属性：

• nodeName: 元素节点的标签名
• nodeValue: 元素节点的值，因为元素节点没有值，所以nodeValue的值为null
• nodeType: 元素节点的类型是1

以下示例代码演示如何获取元素节点并修改其属性值：

// 获取元素节点
var element = document.getElementById("myElement");
// 修改元素节点属性
element.innerHTML = "Hello World";

属性节点

属性节点是DOM树结构中的一个子节点，它表示HTML文档中元素的属性。属性节点可以通过元素节点的getAttribute()方法和setAttribute()方法进行获取和设置。

以下是属性节点的常见属性：

• nodeName: 属性节点的名称
• nodeValue: 属性节点的值
• nodeType: 属性节点的类型是2

以下示例代码演示如何获取属性节点并修改其值：

// 获取元素节点
var element = document.getElementById("myElement");
// 获取属性节点
var attribute = element.getAttribute("src");
// 修改属性节点值
element.setAttribute("src", "newSrc.png");

文本节点

文本节点是DOM树结构中的一个子节点，它表示HTML文档中元素的文本内容。文本节点可以通过元素节点的childNodes属性获取到。

以下是文本节点的常见属性：

• nodeName: 文本节点的名称是#text
• nodeValue: 文本节点的值是文本内容
• nodeType: 文本节点的类型是3

以下示例代码演示如何获取文本节点并修改其值：

<div id="myDiv">Hello <span>World</span></div>

// 获取元素节点
var element = document.getElementById("myDiv");
// 获取文本节点
var textNode = element.childNodes[0];
// 修改文本节点值
textNode.nodeValue = "Hi";

通过以上的实例，我们可以清楚地了解每种节点类型的定义、区别以及它们如何被使用。这对于前端开发人员来说是非常重要的基础知识，尤其是在使用DOM进行动态网页开发时。