<think>好的，我现在需要回答用户关于DOM的基本概念和手动修改DOM的方法的问题。首先，我得先回忆一下DOM的定义，确保自己理解正确。DOM是文档对象模型，它将网页文档表示为树形结构，每个节点都是对象，这样程序可以动态访问和更新文档的结构、内容和样式。根据引用[2]，虚拟DOM是一个普通的
JS对象，用来描述真实DOM结构，但用户这里问的是实际的DOM，所以需要区分清楚。
接下来，用户想知道如何手动修改DOM。根据引用[5]，
原生JS提供了多种方法操
作DOM，比如get
ElementById、get
ElementsByTagName，还有创建元素、添加、删除节点等。需要把这些方法整理出来，并分类说明，比如查询节点、修改属性、增删节点、修改内容等。
然后，我需要考虑回答的结构是否清晰。可能需要先解释DOM的概念，再分点列出操
作方法，每个方法举例子，用代码片段说明。例如，创建元素可以用create
Element，添加节点用appendChild，删除用removeChild，修改内容用innerHTML或textContent。同时，注意
使用用户提供的引用内容来支持回答，比如引用[5]中的例子，关于get
ElementsByTagName的
使用和删除节点的示例。
另外，用户的问题可能涉及到DOM操
作的实际应用
场景，比如动态更新页面内容，响应用户交互。这时候可以结合引用[4]中提到的小程序开发中的组件化方式，虽然小程序可能不完全
使用传统DOM，但数据绑定和视图更新的机制有类似之处，可以适当提及，但要注意区分。
需要检查是否有遗漏的方法，比如替换节点、克隆节点，或者
使用新的API如insertAdjacentHTML。确保覆盖主要的操
作方法，同时保持回答简洁，不过于冗长。
还要注意用户可能对DOM操
作与虚拟DOM的关系有疑问，但根据用户的问题，他们更关注
原生DOM操
作，所以主要集中在这方面，但可以简要提及虚拟DOM的
作用，如引用[1]和[2]中提到的优化性能的方式，
作为对比，帮助用户理解为什么有些框架
使用虚拟DOM。
最后，生成相关问题时要围绕DOM的概念、操
作方法、应用
场景以及相关技术如虚拟DOM的
作用。确保问题能够引导用户进一步学习，比如如何高效操
作DOM、DOM与虚拟DOM的区别、常见操
作的最佳实践等。</think>### DOM的基本概念及手动修改方法
#### 一、DOM的基本概念
DOM（Document Object Model，文档对象模型）是将HTML或XML文档表示为树形结构的编程接口。每个HTML标签、属性、文本内容均被抽象为树中的节点（Node），开发者可通过JavaScript操
作这些节点来实现动态修改页面内容、结构和样式[^2][^5]。
DOM的核心特点：
1
. **树形结构**：文档从根节点`<html>`开始，逐层嵌套形成父子关系。
2
. **动态绑定**：DOM与页面实时同步，修改DOM会立即反映到页面上。
3
. **跨平台**：独立于编程语言，但浏览器中主要通过JavaScript操
作。
例如，以下HTML对应的DOM树结构：
```html
<div id="container">
<p class="text">Hello</p>
</div>
```
对应的DOM树包含`div`节点（属性`id="container"`）和其子节点`p`（属性`class="text"`）。
---
#### 二、手动修改DOM的方法
##### 1
. **查询DOM节点**
- **通过ID查询**：
```javascript
const
element = document
.get
ElementById("container");
```
- **通过类名查询**：
```javascript
const
elements = document
.get
ElementsByClassName("text");
```
- **通过标签名查询**：
```javascript
const paragraphs = document
.get
ElementsByTagName("p");
```
- **通过CSS选择器查询**：
```javascript
const node = document
.querySelector("#container
.text"); // 返回第一个匹配项
const nodes = document
.querySelectorAll("p"); // 返回所有匹配项
```
##### 2
. **修改节点属性与内容**
- **修改属性**：
```javascript
element.setAttribute("class", "new-class"); // 设置属性
const value =
element.getAttribute("id"); // 获取属性
```
- **修改文本内容**：
```javascript
element.textContent = "New Text"; // 纯文本
element.innerHTML = "<b>Bold Text</b>"; // 解析HTML标签
```
##### 3
. **增删节点**
- **创建新节点**：
```javascript
const newDiv = document
.create
Element("div");
```
- **插入节点**：
```javascript
parent
Element.appendChild(newDiv); // 末尾插入
parent
Element.insertBefore(newDiv, existingChild); // 指定位置插入
```
- **删除节点**：
```javascript
parent
Element.removeChild(child
Element); // 需通过父节点操
作[^5]
```
##### 4
. **修改样式**
```javascript
element.style
.color = "red"; // 直接修改内联样式
element.classList
.add("active"); // 添加CSS类
element.classList
.remove("inactive"); // 移除CSS类
```
---
#### 三、DOM操
作示例
**
场景**：动态添加列表项
```html
<ul id="list"></ul>
```
```javascript
const list = document
.get
ElementById("list");
// 创建新元素
const newItem = document
.create
Element("li");
newItem
.textContent = "Item 1";
// 添加到列表
list
.appendChild(newItem);
// 结果：<ul id="list"><li>Item 1</li></ul>
```
---
#### 四、DOM与虚拟DOM的关系
虚拟DOM（如React
使用）是内存中的轻量级DOM副本，通过对比新旧虚拟DOM树来**最小化实际DOM操
作**，从而提升性能[^1][^2]。例如：
```javascript
// 虚拟DOM伪代码
const vdom = { tag: 'div', attrs: { id: 'app' }, children: [
...] };
```
---
扫一扫
1938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
