DOM 节点信息学习笔记

概述

DOM（Document Object Model）是一种用于表示 HTML、XML 等文档的标准模型，它以树形结构表示文档，并允许程序通过 JavaScript 等语言来访问和操作文档的各种元素、属性及其内容。在 DOM 中，每个 HTML 元素都是一个节点，节点之间有父子关系、兄弟关系等，同时还可以存在非元素节点（比如文本节点）。对于 Web 开发者而言，熟练掌握 DOM 是非常重要的基础知识。

节点操作

通过 DOM，我们可以方便地获取、修改、删除、添加各种节点。下面举几个实例：

获取节点

我们可以通过多种方式获取节点对象，比如使用 getElementById 函数、querySelector 函数、getElementsByTagName 函数等。下面是一个例子：

javascriptCopy Code
// 获取 id 为 "myDiv" 的元素节点
var myDiv = document.getElementById("myDiv");

修改节点

我们可以使用 DOM 提供的方法修改元素节点的内容、属性等。下面是一个例子：

javascriptCopy Code
// 修改 id 为 "myDiv" 的元素节点的文本内容
myDiv.innerHTML = "<p>Hello, World!</p>";

// 修改 id 为 "myLink" 的元素节点的 href 属性
var myLink = document.getElementById("myLink");
myLink.href = "http://www.example.com";

添加节点

我们可以使用 DOM 提供的方法向文档中添加新的元素节点、文本节点等。下面是一个例子：

javascriptCopy Code
// 创建一个新的 p 元素节点
var newP = document.createElement("p");

// 给新节点添加一些文本内容
var newText = document.createTextNode("This is a new paragraph.");
newP.appendChild(newText);

// 将新的 p 元素节点插入到 id 为 "myDiv" 的元素节点之后
myDiv.parentNode.insertBefore(newP, myDiv.nextSibling);

删除节点

我们可以使用 DOM 提供的方法删除元素节点、文本节点等。下面是一个例子：

javascriptCopy Code
// 删除 id 为 "myDiv" 的元素节点
myDiv.parentNode.removeChild(myDiv);

节点属性

DOM 中的节点除了包含文本内容外，还有许多其他属性，比如 id、class、type 等。我们可以使用 DOM 提供的方法获取、修改这些属性。下面是一个例子：

javascriptCopy Code
// 获取 id 为 "myDiv" 的元素节点的 class 属性
var myClass = myDiv.getAttribute("class");

// 修改 id 为 "myDiv" 的元素节点的 class 属性
myDiv.setAttribute("class", "newClass");

总结

DOM 是 Web 开发中非常重要的一部分，掌握 DOM 的操作方法可以让我们更高效地开发 Web 应用。在实际开发中，我们通常需要使用一些 JavaScript 库来简化 DOM 操作，比如 jQuery、React 等。