DOM 变异是指对文档对象模型 (DOM) 的结构或内容所做的更改，该模型表示网页的层次结构。当通过用户交互、JavaScript 或其他编程方法添加、移除或修改元素时，这些变异会动态发生。DOM 变异对于创建交互式动态 Web 应用程序至关重要，但可能会影响性能、安全性和用户体验。

什么是 DOM 变异？

DOM 是一种树状结构，表示网页中的所有元素，包括 HTML 标签、属性和文本。当此树的结构发生变化时，就会发生DOM 突变。这些突变可能由于以下操作而发生：

导致 DOM 变异的常见操作

• 添加新元素：动态创建按钮、表格或其他 HTML 元素。
• 修改属性：更改元素的属性，如颜色、样式或 ID。
• 删除元素：响应用户输入或数据更改而删除页面的某个部分。

DOM 突变使现代 Web 应用程序能够动态更新其用户界面，而无需重新加载页面。JavaScript 中的 、 或 等方法appendChild()可removeChild()触发setAttribute()这些突变。

DOM 变异的工作原理

DOM 变异的实际操作

当 JavaScript 使用内置方法与 DOM 交互时，会发生 DOM 变异。例如：

// 向正文添加新段落
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是一个新段落。';
document.body.appendChild(newParagraph);

上面的代码中，p创建了一个新元素并将其添加到网页的 DOM 中，动态地修改 DOM 结构。

触发 DOM 变更的常见方法

1. appendChild()：将节点添加到指定父节点的子节点列表的末尾。
2. removeChild()：从 DOM 中删除子节点。
3. replaceChild()：用另一个子节点替换一个子节点。
4. setAttribute()：修改或添加元素的属性。
5. innerHTML：直接修改元素内的HTML内容，导致结构变化。

监控 DOM 变化

为了观察和响应 DOM 中的变化，开发人员可以使用MutationObserver，这是一个 JavaScript API，旨在检测网页结构的实时变化。这对于调试、优化性能和确保安全非常有用。

使用 MutationObserver 的示例

const targetNode = document.getElementById('myDiv');
const config = { childList: true, 属性: true, 子树: true };

// 当观察到突变时执行的回调函数
const callback = function(mutationsList, observer) {
for(letmutations ofmutationsList) {
if (mutation.type === 'childList') {
console.log('已添加或删除子节点。');
} else if (mutation.type === 'attributes') {
console.log('' +mutations.attributeName +' 属性已被修改。');
}
}
};

// 创建一个链接到回调函数的观察者实例
const observer = new MutationObserver(callback);

// 开始观察配置突变的目标节点
observer.observe(targetNode, config);

为什么要监控 DOM 变异？

性能优化

过多的 DOM 变化会导致性能瓶颈，尤其是在大型 Web 应用程序中。监控这些变化有助于识别导致不必要变化的低效代码，并允许开发人员提高性能。

安全

DOM 中的变异有时可能表示恶意行为，例如脚本注入攻击，其中页面结构被改变以包含未经授权的代码。

用户体验

监控 DOM 变化如何影响用户体验对于识别错误和确保动态内容更新顺利进行且无故障至关重要。

DOM 变异和性能

虽然 DOM 变更对于动态网站而言必不可少，但管理不善的变更会严重影响性能。每次变更都会迫使浏览器重新计算样式、重新排列元素并重新绘制屏幕的某些部分，如果变更发生得太频繁或涉及 DOM 树的大部分内容，则会导致网站运行缓慢。

优化 DOM 变更的最佳实践

批量更改

将多个变更批量合并为一个变更可减少浏览器必须执行的重排和重绘次数。您无需重复执行单个变更，而是一次性应用多个变更。

使用documentFragment

向 DOM 添加多个元素时，documentFragment先进行屏幕外更改，然后再一次性应用所有更改。这可以最大限度地减少直接在 DOM 上执行的操作数量。

让 fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
让 newDiv = document.createElement('div');
newDiv.textContent = 'Item ' + i;
fragment.appendChild(newDiv);
}
document.body.appendChild(fragment);

避免重复访问

重复查询 DOM 的代价可能很大。为了优化性能，请存储对经常访问的元素的引用，而不是每次都查询 DOM。

安全注意事项：基于 DOM 的 XSS

与 DOM 突变相关的最重大安全风险之一是基于 DOM 的跨站点脚本 (XSS)。在基于 DOM 的 XSS 中，攻击者将恶意脚本注入网页的 DOM，导致脚本在用户的浏览器中执行。当开发人员未能正确清理用户输入时，就会发生这些攻击。

基于 DOM 的 XSS 攻击示例

让 searchQuery = window.location.hash.substring(1);
document.getElementById('search').innerHTML = searchQuery;

如果攻击者修改 URL 哈希以包含恶意 JavaScript，则代码将在更新 innerHTML 时执行。为了防止这种情况，开发人员必须清理用户输入并避免使用不安全的方法（例如innerHTML动态内容）。