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 方法将一个节点添加到另