很啰嗦，再次总结 DOM

DOM (文档对象模型) 详解

一、DOM 基础概念

1. 定义与作用

DOM（Document Object Model）即文档对象模型，是一种用于 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构，允许程序和脚本动态访问、修改文档的内容、结构和样式。

2. 核心特点

树形结构：DOM 将文档表示为节点树，每个节点可以有子节点。
平台和语言无关：DOM 可以被任何编程语言访问，如 JavaScript、Python 等。
动态交互：通过 DOM，程序可以实时改变文档的内容和结构。

3. 节点类型

DOM 树中的节点主要分为以下几种类型：

元素节点（Element Node）：表示 HTML 元素，如 <div>、<p> 等。
文本节点（Text Node）：表示元素内的文本内容。
属性节点（Attribute Node）：表示元素的属性，如 id、class 等。
文档节点（Document Node）：表示整个文档，是 DOM 树的根节点。
注释节点（Comment Node）：表示 HTML 中的注释。

二、DOM 树结构

1. 节点关系

父节点（Parent Node）：每个节点（除根节点外）都有一个父节点。
子节点（Child Node）：一个节点可以有零个或多个子节点。
兄弟节点（Sibling Node）：共享同一个父节点的节点互为兄弟节点。
祖先节点（Ancestor Node）：父节点的父节点，依此类推。
后代节点（Descendant Node）：子节点的子节点，依此类推。

2. 示例 HTML 与 DOM 树

<!DOCTYPE html>
<html>
<head><title>DOM 示例</title>
</head>
<body><div id="container"><h1>Hello, DOM!</h1><p class="content">这是一个 <a href="#">DOM 示例</a>。</p></div>
</body>
</html>

对应的简化 DOM 树结构：

Document
└── html (Element)├── head (Element)│   └── title (Element)│       └── "DOM 示例" (Text)└── body (Element)└── div (Element, id="container")├── h1 (Element)│   └── "Hello, DOM!" (Text)└── p (Element, class="content")├── "这是一个 " (Text)└── a (Element, href="#")└── "DOM 示例" (Text)└── "。" (Text)

三、JavaScript 中的 DOM 操作

1. 访问 DOM 元素

通过 ID 访问

const element = document.getElementById('container');

通过标签名访问

const paragraphs = document.getElementsByTagName('p');
// 返回 HTMLCollection 对象

通过类名访问

const elements = document.getElementsByClassName('content');
// 返回 HTMLCollection 对象

通过选择器访问

const element = document.querySelector('#container p');
// 返回匹配的第一个元素const elements = document.querySelectorAll('p.content');
// 返回 NodeList 对象

2. 操作元素内容

修改文本内容

const heading = document.querySelector('h1');
heading.textContent = '新标题';

修改 HTML 内容

const container = document.getElementById('container');
container.innerHTML = '<p>新内容</p>';

3. 操作元素属性

获取属性值

const link = document.querySelector('a');
const href = link.getAttribute('href');

设置属性值

link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');

直接访问属性

link.href = 'https://example.com';
link.target = '_blank';

4. 操作元素样式

内联样式

const element = document.getElementById('container');
element.style.backgroundColor = 'lightblue';
element.style.width = '500px';

类操作

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('highlight');

5. 创建和修改元素

创建新元素

const newDiv = document.createElement('div');
newDiv.textContent = '新创建的元素';

添加子元素

const parent = document.getElementById('container');
parent.appendChild(newDiv);

插入元素

const referenceElement = document.querySelector('p');
parent.insertBefore(newDiv, referenceElement);

删除元素

parent.removeChild(referenceElement);

替换元素

const newElement = document.createElement('span');
parent.replaceChild(newElement, referenceElement);

6. 事件处理

事件监听

const button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('按钮被点击了！');
});

事件对象

button.addEventListener('click', function(event) {console.log('事件类型:', event.type);console.log('触发元素:', event.target);
});

事件冒泡与捕获

冒泡（Bubbling）：事件从触发元素向上传播到父元素。
捕获（Capturing）：事件从文档根向下传播到触发元素。

// 使用捕获阶段
element.addEventListener('click', function() {// ...
}, true);

阻止事件传播

event.stopPropagation();

阻止默认行为

event.preventDefault();

四、DOM 性能优化

1. 减少 DOM 操作

批量修改

// 低效
const list = document.getElementById('myList');
for (let i = 0; i < 1000; i++) {const item = document.createElement('li');item.textContent = `Item ${i}`;list.appendChild(item);
}// 高效
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {const item = document.createElement('li');item.textContent = `Item ${i}`;fragment.appendChild(item);
}
list.appendChild(fragment);

2. 使用事件委托

// 为大量按钮添加事件
document.getElementById('buttonContainer').addEventListener('click', function(event) {if (event.target.tagName === 'BUTTON') {console.log('按钮被点击:', event.target.textContent);}
});

3. 缓存 DOM 引用

// 低效
for (let i = 0; i < 1000; i++) {document.getElementById('myElement').style.left = i + 'px';
}// 高效
const element = document.getElementById('myElement');
for (let i = 0; i < 1000; i++) {element.style.left = i + 'px';
}

4. 避免频繁重排和重绘

重排（Reflow）

当 DOM 的变化影响了元素的布局信息时，浏览器需要重新计算元素的布局，将其安放在界面中的正确位置。

重绘（Repaint）

当一个元素的外观发生改变，但没有影响到布局信息时，浏览器会将新样式应用到元素上。

优化建议

批量修改样式
使用 documentFragment
避免频繁读取布局信息
使用 transform 和 opacity 进行动画

五、DOM 与 XML

1. XML DOM

DOM 最初是为 XML 设计的，同样适用于 HTML。XML DOM 提供了与 HTML DOM 类似的 API 来操作 XML 文档。

2. XML 解析示例

const xmlText = '<book><title>JavaScript DOM</title><author>John Doe</author></book>';
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, 'text/xml');const title = xmlDoc.querySelector('title').textContent;
console.log('书名:', title);

六、DOM 标准

1. DOM 级别

DOM Level 1：1998 年发布，定义了基本的 DOM 结构和操作。
DOM Level 2：2000 年发布，增加了事件模型、样式、遍历和范围等模块。
DOM Level 3：2004 年发布，增加了文档验证、加载和保存等功能。
DOM Living Standard：W3C 持续更新的 DOM 标准。

2. DOM API 分类

核心 DOM：通用的 DOM 操作接口。
HTML DOM：专门针对 HTML 的扩展。
SVG DOM：针对 SVG 图形的扩展。
XML DOM：针对 XML 文档的扩展。

七、高级 DOM 技术

1. 节点遍历

const element = document.getElementById('container');
let node = element.firstChild;while (node) {console.log('节点类型:', node.nodeType);console.log('节点内容:', node.textContent);node = node.nextSibling;
}

2. 范围（Range）

const range = document.createRange();
range.selectNode(document.getElementById('myElement'));// 复制范围内容
const fragment = range.cloneContents();
document.body.appendChild(fragment);

3. Mutation Observer

监听 DOM 变化的现代 API。

const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {console.log('DOM 变化类型:', mutation.type);});
});const options = {childList: true,attributes: true,subtree: true
};observer.observe(document.body, options);

八、DOM 与性能监控

1. 使用 Performance API

// 测量 DOM 操作时间
console.time('dom操作');// DOM 操作
const element = document.createElement('div');
document.body.appendChild(element);console.timeEnd('dom操作');

2. Chrome DevTools 性能分析

使用 Performance 面板记录和分析页面性能。
关注 Layout（重排）和 Paint（重绘）事件。

九、DOM 安全问题

1. XSS 攻击

恶意代码通过未过滤的用户输入注入到 DOM 中。
防范措施：对用户输入进行过滤和转义。

2. 安全编码实践

// 不安全
const userInput = '<script>alert("XSS");</script>';
document.getElementById('output').innerHTML = userInput;// 安全
const textNode = document.createTextNode(userInput);
document.getElementById('output').appendChild(textNode);