QD1-P59~74（5）DOM 操作

title: QD1-P：59~74（5）DOM 操作

description: 学习 DOM 操作

video: [https://www.bilibili.com/video/BV1n64y1U7oj?p=63](https://www.bilibili.com/video/BV1n64y1U7oj?p=63)

subject：前端学习笔记 1

‍

理解DOM（文档对象模型）是前端开发的核心，它使得程序能够以结构化的方式访问和操作HTML文档。

‍

理解DOM

1. 什么是DOM？

DOM是一个编程接口，表示网页的结构。它将HTML文档表示为一棵树，每个节点代表文档的一部分。开发者可以通过编程语言（如JavaScript）来访问和修改这些节点。

2. DOM的结构

文档节点: 整个文档的根，通常通过 document 对象访问。
元素节点: 表示HTML或XML标签（例如 <div>, <p>）。
文本节点: 存储在元素节点内部的文本内容。
属性节点: 关联于元素的属性（例如，<a href="example.com"> 中的 href）。

3. 节点树

DOM以树形结构组织，每个节点可以有多个子节点。树的结构有助于理解文档的层级关系。例如：

Document
│
├── html
│   ├── head
│   │   ├── title
│   │   └── meta
│   └── body
│       ├── header
│       │   └── h1
│       ├── nav
│       │   ├── ul
│       │   │   ├── li
│       │   │   └── li
│       │   └── a
│       ├── main
│       │   ├── section
│       │   │   ├── h2
│       │   │   └── p
│       │   └── article
│       │       ├── h2
│       │       └── p
│       └── footer
│           └── p

理解：

Document: 整个文档的根节点。
html: 根元素，包含文档的所有内容。
head: 文档头部，通常包含元数据、标题和样式。
body: 文档的主体，包含可视内容。
- header: 页眉部分，包含标题（h1）。
- nav: 导航部分，包含列表（ul）和链接（a）。
- main: 主要内容区，包含多个部分（section 和 article）。
- footer: 页脚部分，包含版权信息等。

‍

4. 节点操作

通过JavaScript，开发者可以：

获取节点: 使用 document.getElementById(), document.querySelector() 等方法。
创建节点: 使用 document.createElement()。
修改节点: 使用 innerHTML, textContent 等属性。
添加和删除节点: 使用 appendChild(), removeChild() 等方法。

5. 事件处理

DOM支持事件处理，使得网页能响应用户的操作。例如，使用 addEventListener() 方法可以为节点添加事件监听器，以响应点击、输入等操作。

6. 性能优化

频繁的DOM操作会导致性能下降，因此可以使用 DocumentFragment 批量处理DOM节点，减少重绘和回流的次数。

7. 动态更新

DOM使得网页可以在不重新加载页面的情况下动态更新内容，常用于单页应用（SPA）和交互式网页。

‍

操作DOM节点

1. 获取节点:  // 用于选择DOM节点
   - document.getElementById()  // 通过ID获取单个元素
   - document.getElementsByClassName()  // 通过类名获取元素集合
   - document.getElementsByTagName()  // 通过标签名获取元素集合
   - document.querySelector()  // 选择符合CSS选择器的第一个元素
   - document.querySelectorAll()  // 选择符合CSS选择器的所有元素

//获取节点后，就可以修改节点属性，删除子节点，或者添加子节点

2. 创建节点:  // 用于动态创建新元素
   - document.createElement()  // 创建一个新的元素节点
   - document.createTextNode()  // 创建一个文本节点

// 不可见

3. 添加节点:  // 将新节点插入到DOM中
   - parentNode.appendChild()  // 将节点添加到父节点的末尾
   - parentNode.insertBefore()  // 在指定节点之前插入新节点
   - parentNode.replaceChild()  // 用新节点替换旧节点

// 可见

4. 删除节点:  // 从DOM中移除节点
   - parentNode.removeChild()  // 从父节点中删除指定子节点
   - element.remove()  // 删除当前元素节点

5. 节点属性操作:  // 获取和设置元素属性
   - element.getAttribute()  // 获取指定属性的值
   - element.setAttribute()  // 设置指定属性的值
   - element.removeAttribute()  // 移除指定属性

6. 节点样式操作:  // 处理元素的样式
   - element.style  // 直接设置内联样式
   - element.classList  // 处理类名（添加、删除、切换）

7. 节点内容操作:  // 修改节点的文本或HTML内容
   - element.innerHTML  // 设置或获取元素的HTML内容
   - element.textContent  // 设置或获取元素的文本内容

8. 事件处理:  // 添加和移除事件监听器
   - element.addEventListener()  // 添加事件监听器
   - element.removeEventListener()  // 移除事件监听器

9. 节点遍历:  // 遍历节点的兄弟和子节点
   - parentNode.firstChild  // 获取父节点的第一个子节点
   - parentNode.lastChild  // 获取父节点的最后一个子节点
   - parentNode.childNodes  // 获取父节点的所有子节点
   - element.nextSibling  // 获取当前节点的下一个兄弟节点
   - element.previousSibling  // 获取当前节点的上一个兄弟节点

10. 克隆节点:  // 创建节点的副本
    - element.cloneNode()  // 克隆当前节点，参数决定是否深克隆

11. 文档碎片:  // 提高DOM操作性能
    - 使用 DocumentFragment 提高性能，批量操作DOM节点。

‍

DOM操作示例

准备HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作实例</title>
	</head>
	<body>
		<h1 id="page-title">旧标题</h1>
		<p id="description">这是描述</p>
		<ul id="item-list">
			<li class="list-item">项目 1</li>
			<li class="list-item">项目 2</li>
			<li class="list-item">项目 3</li>
		</ul>
		<button>点击我</button>
	</body>
	<script type="text/javascript">
		//在此编写js代码
	</script>

</html>

Clip_2024-10-26_15-00-36

以下是一些常用的DOM节点操作示例，涵盖获取、修改、添加和删除节点的基本操作。

1. 获取节点

// 获取节点
// 通过ID获取
const titleElement = document.getElementById('page-title');
console.log(titleElement);

// 通过类名获取元素集合
const items = document.getElementsByClassName('list-item');
console.log(items);

// 通过CSS选择器获取第一个元素
const firstItem = document.querySelector('.list-item');
console.log(firstItem);

Clip_2024-10-26_15-29-29

2. 修改节点内容

// 修改文本内容
titleElement.textContent = '新标题'; // 修改文本
firstItem.textContent = '更新的项目1'; // 修改第一个项目的文本

Clip_2024-10-26_15-39-55

// 修改HTML内容
const descriptionElement = document.querySelector('#description');
// 修改HTML内容
descriptionElement.innerHTML = '<strong>这是新描述</strong>';

Clip_2024-10-26_15-47-59

3. 修改节点样式

// 修改节点样式
titleElement.style.color = 'blue'; // 修改文本颜色
firstItem.style.fontSize = '20px'; // 修改字体大小

Clip_2024-10-26_15-50-35

‍

4. 添加节点

// 创建新节点并添加到DOM中
const newItem = document.createElement('li'); // 创建新<li>元素
newItem.textContent = '新项目'; // 设置新<li>元素的文本内容
const itemList = document.querySelector('#item-list'); // 获取<ul>元素
itemList.appendChild(newItem); // 将新节点添加到<ul>中

Clip_2024-10-26_15-57-21

5. 删除节点

// 删除节点
const itemToRemove = document.querySelector('.list-item'); // 获取要删除的第一个项目
itemToRemove.remove(); // 删除该元素

Clip_2024-10-26_16-02-26

6. 添加和删除类

const button = document.querySelector('button');

// 添加类
button.classList.add('active'); // 添加类名 'active'

// 删除类
button.classList.remove('inactive'); // 删除类名 'inactive'

Clip_2024-10-26_16-17-27

7. 事件处理

// 添加点击事件
button.addEventListener('click', () => {
    
    
    alert('按钮被点击了！');
});

recording

示例HTML结构

为了让上述代码工作，假设有以下HTML结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DOM操作示例</title>
</head>
<body>
    <h1 id="page-title">旧标题</h1>
    <p id="description">这是描述</p>
    <ul id="item-list">
        <li class="list-item">项目 1</li>
        <li class="list-item">项目 2</li>
        <li class="list-item">项目 3</li>
    </ul>
    <button>点击我</button>
    <script src="script.js"></script> <!-- 假设上面的JavaScript代码在script.js中 -->
</body>
</html>

这些示例展示了常用的DOM操作，帮助你实现动态和交互式的网页。

‍