JavaScript DOM—节点操作

Hi i,m JinXiang

---

⭐ 前言 ⭐

本篇文章主要介绍在在JavaScript DOM 节点操作以及部分理论知识

---

🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

---

目录

 什么是DOM？

DOM概述

 什么是节点操作？

一、节点操作概述

二、使用节点操作

1、创建节点 createElement()

2、添加节点 appendChild()

3、删除节点 removeChild()

4、替换节点 replaceChild()

5、修改节点 innerHTML

6、查询节点 getElementById()

三、总结节点操作使用

---

 什么是DOM？

文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。

DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。

DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。文档节点的子节点可以是元素节点、属性节点、文本节点、注释节点等。元素节点代表HTML或XML中的一个元素，属性节点代表元素的属性，文本节点代表元素之间的文本内容，注释节点代表文档中的注释。

通过DOM，可以使用节点对象的属性和方法来访问和操作节点的属性和内容。例如，可以使用getElementById方法通过元素ID获取元素节点对象，可以使用getAttribute方法获取元素的属性值，可以使用innerHTML属性来获取或设置元素的HTML内容，等等。

DOM具有广泛的应用，它是构建动态网页、创建交互式web应用和实现文档操作的重要基础。开发者可以使用DOM来处理表单验证、动态生成内容、响应用户交互、动态修改样式等。DOM的标准化使得不同浏览器都支持相同的API，因此可以在不同的浏览器中保持一致的开发体验。

DOM概述

在JavaScript中，DOM（文档对象模型）是一种以树状结构的形式表示HTML或XML文档的编程接口。它允许开发人员通过JavaScript代码访问和操作文档中的元素、属性和内容。

DOM分为三个层次：

1. 文档层次结构：表示整个HTML或XML文档的树状结构，包括文档节点、元素节点、文本节点等。

2. 元素层次结构：表示HTML或XML文档中的元素关系。每个元素节点都有一个父节点和零个或多个子节点。

3. 节点层次结构：表示文档中的每个节点，包括元素节点、文本节点、注释节点等。每个节点都有相关的属性和方法，用于操作和访问节点的内容和属性。

通过JavaScript的DOM API，开发人员可以使用各种方法和属性来遍历、查找、添加、删除和修改文档中的元素和内容。例如，可以使用getElementById方法通过元素的ID获取元素对象，使用innerHTML属性来获取或设置元素的HTML内容，使用appendChild方法将一个节点添加为另一个节点的子节点等。

DOM为开发人员提供了一种方便的方式来与HTML或XML文档进行交互，使得可以通过JavaScript来动态地更改网页的内容、样式和结构。它是Web开发中重要的一部分，广泛用于创建交互性和动态效果的网页应用程序。

 什么是节点操作？

一、节点操作概述

节点操作指的是对HTML文档中的DOM节点进行创建、修改、删除、查询等操作的过程。DOM（Document Object Model）是一种以树形结构表示HTML文档的方式，每个HTML元素都被表示为一个节点，节点之间存在父子关系、兄弟关系等。通过节点操作，我们可以动态地修改HTML文档的内容、结构和样式。

节点操作的概述如下：

1. 创建节点：可以使用 DOM 提供的方法来创建新的节点，例如使用 createElement 方法创建元素节点，使用 createTextNode 方法创建文本节点等。

2. 添加节点：可以使用 appendChild 方法将一个节点添加到另一个节点的末尾，或者使用 insertBefore 方法将一个节点插入到指定位置。

3. 删除节点：可以使用 removeChild 方法从父节点中移除一个节点。

4. 替换节点：可以使用 replaceChild 方法将一个节点替换为另一个节点。

5. 修改节点：可以使用节点的属性和方法来修改节点的内容、样式等。例如，使用 nodeValue 属性来修改文本节点的值，使用 setAttribute 和 removeAttribute 方法来修改或删除元素节点的属性。

6. 查询节点：可以使用查询节点的方法来获取文档中的节点。例如，使用 getElementById 方法根据 id 获取指定的元素节点，使用 getElementsByTagName 方法获取指定标签名的元素集合等。

通过节点操作，开发者可以对文档的结构和内容进行灵活的控制和修改。节点操作是 DOM 编程重要的一部分，它使得开发者能够动态地修改和更新文档，实现网页的交互性和动态性。

二、使用节点操作

使用节点操作可以通过以下代码实现：

1、创建节点 createElement()

要创建一个新的元素节点，可以使用document.createElement()方法。该方法接受一个参数，即要创建的元素的标签名。

以下是一个创建新节点的示例代码：

// 创建新节点
var newElement = document.createElement("div");

// 添加节点属性
newElement.setAttribute("id", "myDiv");
newElement.setAttribute("class", "myClass");

// 添加文本内容
var newText = document.createTextNode("Hello World");
newElement.appendChild(newText);

// 添加到父节点
var parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);

在这个例子中，我们首先使用createElement()方法创建了一个新的div元素节点。然后，我们使用setAttribute()方法为新节点添加了id和class属性。

接下来，我们创建了一个文本节点，并使用appendChild()方法将其添加到新节点中。

最后，我们通过getElementById()方法获取了一个父节点，并使用appendChild()方法将新节点添加到父节点中。通过这些步骤，我们成功地创建了一个新节点，并将其添加到了HTML文档中。

2、添加节点 appendChild()

要向现有的父节点中添加子节点，可以使用appendChild()方法。该方法接受一个参数，即要添加的子节点。

以下是一个向父节点添加子节点的示例代码：

// 获取父节点
var parentElement = document.getElementById("parent");

// 创建新节点
var newElement = document.createElement("div");

// 添加子节点到父节点中
parentElement.appendChild(newElement);

在这个例子中，我们首先使用getElementById()方法获取了一个父节点。然后，我们使用createElement()方法创建了一个新的div元素节点。最后，我们使用appendChild()方法将新节点添加到父节点中。通过这些步骤，我们成功地向父节点中添加了一个子节点。

3、删除节点 removeChild()

要删除一个节点，可以使用removeChild()方法。该方法接受一个参数，即要删除的节点。

以下是一个删除节点的示例代码：

// 获取要删除的节点
var elementToRemove = document.getElementById("element-to-remove");

// 获取要删除节点的父节点
var parentElement = elementToRemove.parentNode;

// 从父节点中删除要删除的节点
parentElement.removeChild(elementToRemove);

在这个例子中，我们首先使用getElementById()方法获取要删除的节点。然后，我们使用parentNode属性获取该节点的父节点。最后，我们使用removeChild()方法从父节点中删除要删除的节点。这样，我们成功地删除了指定的节点。

4、替换节点 replaceChild()

要替换一个节点，可以使用replaceChild()方法。该方法接受两个参数，第一个参数是要替换的新节点，第二个参数是要被替换的旧节点。

以下是一个替换节点的示例代码：

// 创建新节点
var newElement = document.createElement("div");
newElement.textContent = "这是新节点";

// 获取要替换的旧节点
var oldElement = document.getElementById("element-to-replace");

// 获取要被替换节点的父节点
var parentElement = oldElement.parentNode;

// 替换旧节点为新节点
parentElement.replaceChild(newElement, oldElement);

在这个例子中，我们首先使用createElement()方法创建了一个新节点，并设置了其文本内容。

然后，我们使用getElementById()方法获取要被替换的旧节点。

接下来，我们使用parentNode属性获取要被替换节点的父节点。最后，我们使用replaceChild()方法将新节点替换旧节点。这样，我们成功地替换了节点。

5、修改节点 innerHTML

要修改一个节点的内容，可以使用textContent属性或innerHTML属性来设置节点的新内容。

以下是一个修改节点内容的示例代码：

// 获取要修改的节点
var element = document.getElementById("element-to-modify");

// 使用textContent属性修改节点内容
element.textContent = "新的内容";

// 使用innerHTML属性修改节点内容
element.innerHTML = "<strong>新的内容</strong>";

在这个例子中，我们首先使用getElementById()方法获取要修改的节点。

然后，我们可以使用textContent属性将节点的文本内容设置为新的内容。或者，我们可以使用innerHTML属性将节点的HTML内容设置为新的内容。这样，我们就成功地修改了节点的内容。

6、查询节点 getElementById()

要查询节点，可以使用querySelector()方法或getElementById()方法来选择节点。

以下是一个查询节点的示例代码：

// 使用querySelector()方法查询节点
var element1 = document.querySelector("#element-to-query");

// 使用getElementById()方法查询节点
var element2 = document.getElementById("element-to-query");

// 打印查询到的节点
console.log(element1);
console.log(element2);

在这个例子中，我们首先使用querySelector()方法通过CSS选择器来查询节点。在querySelector()方法中，我们可以使用类名、标签名、ID等选择器来指定要查询的节点。

然后，我们使用getElementById()方法使用节点的ID来查询节点。最后，我们使用console.log()方法将查询到的节点打印出来。

通过这些节点操作，我们可以动态地修改HTML文档的结构和内容，实现各种交互和功能。

三、总结节点操作使用

以下是总结节点操作的表格形式：

操作类型	操作使用描述
获取表格元素	使用 getElementById、getElementsByTagName 等方法来获取表格元素
创建表格元素	使用 createElement 方法创建表格元素，如 <table>、<tr>、<td> 等
添加表格行和单元格	使用 insertRow 方法向表格中添加行，使用 insertCell 方法向行中添加单元格
删除表格行和单元格	使用 deleteRow 方法删除表格中的行，使用 deleteCell 方法删除行中的单元格
修改表格内容	使用节点对象的属性或方法来修改表格的内容，如 innerHTML 属性来修改表格元素的 HTML 内容
获取和修改表格属性	使用节点对象的属性来获取和修改表格的属性，如 getAttribute、setAttribute 等

通过以上表格，可以清晰地了解节点操作的不同类型及其描述。这些操作可用于对表格进行增删改查等操作，以实现对表格数据的动态更新和操作。

总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！如有问题，欢迎评论区批评指正😁