一、引言
在当今数字化的时代，Web 应用程序已经成为人们生活和工作中不可或缺的一部分。而 JavaScript 作为 Web 开发的核心语言之一，其强大的功能和灵活性使得开发者能够创建出交互性丰富、动态性十足的网页。其中，DOM（Document Object Model，文档对象模型）操作是 JavaScript 在 Web 开发中最为重要的应用之一。
DOM 为 HTML 和 XML 文档提供了一种结构化的表示方式，它将文档中的每个元素、属性和文本都抽象为对象，形成一个树形结构。通过 JavaScript 对 DOM 进行操作，开发者可以动态地修改网页的内容、结构和样式，实现诸如用户交互、数据展示、动画效果等功能。本文将深入探讨 JavaScript 中的 DOM 操作，从基础概念到高级应用，全面介绍 DOM 操作的各个方面。
二、DOM 基础概念
2.1 DOM 树结构
DOM 将 HTML 文档表示为一个树形结构，其中每个节点都是一个对象。文档的根节点是 document 对象，它代表整个 HTML 文档。从根节点开始，依次向下展开，形成不同层次的子节点，包括元素节点、文本节点、属性节点等。
例如，对于以下简单的 HTML 文档：
<!DOCTYPE html>
<html>
<head><title>DOM Example</title>
</head>
<body><h1>Hello, DOM!</h1><p>This is a paragraph.</p>
</body>
</html>
其对应的 DOM 树结构可以表示为：
plaintext
document
└── html├── head│ └── title│ └── "DOM Example"└── body├── h1│ └── "Hello, DOM!"└── p└── "This is a paragraph."
在这个树结构中，每个元素（如 <html>、<head>、<body> 等）都是一个元素节点，而元素中的文本内容（如 "DOM Example"、"Hello, DOM!" 等）则是文本节点。
2.2 节点类型
在 DOM 中，主要有以下几种常见的节点类型：
- 元素节点（Node.ELEMENT_NODE，值为 1）：表示 HTML 或 XML 中的元素，如
<div>、<p>、<a>等。元素节点可以有子节点和属性。 - 文本节点（Node.TEXT_NODE，值为 3）：表示元素中的文本内容，如
<p>标签内的文本。 - 属性节点（Node.ATTRIBUTE_NODE，值为 2）：表示元素的属性，如
<img>标签的src属性。 - 文档节点（Node.DOCUMENT_NODE，值为 9）：代表整个 HTML 或 XML 文档，是 DOM 树的根节点。
可以使用 nodeType 属性来判断节点的类型，示例代码如下：
const element = document.getElementById('myElement');
if (element.nodeType === Node.ELEMENT_NODE) {console.log('This is an element node.');
}
2.3 节点关系
在 DOM 树中，节点之间存在着各种关系，常见的关系有：
- 父节点（parentNode）：每个节点都有一个父节点（除了文档节点），可以通过
parentNode属性访问。
const childElement = document.getElementById('child');
const parentElement = childElement.parentNode;
- 子节点（childNodes、children）：
childNodes属性返回一个包含所有子节点的NodeList对象，包括元素节点、文本节点等；children属性返回一个只包含元素节点的HTMLCollection对象。
const parent = document.getElementById('parent');
const allChildNodes = parent.childNodes;
const elementChildren = parent.children;
- 兄弟节点（previousSibling、nextSibling、previousElementSibling、nextElementSibling）：
previousSibling和nextSibling分别返回当前节点的前一个和后一个兄弟节点，包括文本节点等；previousElementSibling和nextElementSibling只返回元素节点的兄弟节点。
const currentElement = document.getElementById('current');
const prevSibling = currentElement.previousSibling;
const nextElementSibling = currentElement.nextElementSibling;
三、获取 DOM 元素
3.1 基于 ID 获取元素
document.getElementById() 方法是最常用的获取单个元素的方法，它通过元素的 id 属性来查找元素。id 属性在 HTML 文档中必须是唯一的，因此该方法总是返回一个元素对象，如果没有找到匹配的元素，则返回 null。
const myElement = document.getElementById('myId');
if (myElement) {// 对元素进行操作myElement.style.color ='red';
}
3.2 基于类名获取元素
document.getElementsByClassName() 方法通过元素的类名来获取一组元素，返回一个 HTMLCollection 对象。HTMLCollection 是一个动态的集合，当文档中的元素发生变化时，它会自动更新。
const elements = document.getElementsByClassName('myClass');
for (let i = 0; i < elements.length; i++) {elements[i].style.backgroundColor = 'yellow';
}
3.3 基于标签名获取元素
document.getElementsByTagName() 方法通过元素的标签名来获取一组元素，同样返回一个 HTMLCollection 对象。
const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {paragraphs[i].style.fontSize = '16px';
}
3.4 基于 CSS 选择器获取元素
document.querySelector() 和 document.querySelectorAll() 方法使用 CSS 选择器来获取元素。querySelector() 方法返回第一个匹配的元素，而 querySelectorAll() 方法返回所有匹配的元素，存储在一个 NodeList 对象中。NodeList 是一个静态的集合，不会随着文档的变化而自动更新。
// 获取第一个匹配的元素
const firstElement = document.querySelector('div.myClass');
// 获取所有匹配的元素
const allElements = document.querySelectorAll('div.myClass');
allElements.forEach((element) => {element.style.border = '1px solid black';
});
3.5 高级选择器和组合选择器
除了基本的 CSS 选择器，还可以使用高级选择器和组合选择器来更精确地定位元素。例如：
- 属性选择器：根据元素的属性来选择元素，如
[attr]、[attr=value]等。
const elementsWithDataAttr = document.querySelectorAll('[data-custom]');
- 伪类选择器：选择处于特定状态的元素，如
:hover、:active、:nth-child()等。
const oddRows = document.querySelectorAll('tr:nth-child(odd)');
- 组合选择器：将多个选择器组合起来使用，如
div p表示选择所有<div>元素内的<p>元素。
const innerParagraphs = document.querySelectorAll('div p');
四、操作 DOM 元素的属性
4.1 获取和修改属性值
可以使用元素的属性名直接访问和修改元素的属性，也可以使用 getAttribute() 和 setAttribute() 方法来操作属性。
const imgElement = document.getElementById('myImg');
// 使用属性名访问和修改
const srcValue = imgElement.src;
imgElement.src = 'newImage.jpg';
// 使用 getAttribute 和 setAttribute
const altValue = imgElement.getAttribute('alt');
imgElement.setAttribute('alt', 'New alt text');
4.2 布尔属性
一些属性是布尔属性，如 disabled、checked 等。在 JavaScript 中，设置布尔属性时，只需将其赋值为 true 或 false。
const inputElement = document.getElementById('myInput');
inputElement.disabled = true;
4.3 自定义属性
可以使用 data-* 自定义属性来存储额外的数据。在 JavaScript 中，可以通过 dataset 属性来访问和修改这些自定义属性。
<div id="myDiv" data-custom="some data"></div>
const divElement = document.getElementById('myDiv');
const customData = divElement.dataset.custom;
divElement.dataset.custom = 'new data';
4.4 属性的动态添加和删除
使用 setAttribute() 方法可以动态添加属性，使用 removeAttribute() 方法可以删除属性。
const element = document.getElementById('myElement');
element.setAttribute('new-attr', 'value');
element.removeAttribute('new-attr');
五、操作 DOM 元素的样式
5.1 内联样式
可以通过元素的 style 属性来直接修改元素的内联样式。style 属性是一个对象，其属性名对应 CSS 属性名，但采用驼峰命名法。
const element = document.getElementById('myElement');
element.style.color ='red';
element.style.fontSize = '20px';
5.2 类名操作
通过操作元素的 classList 属性，可以方便地添加、删除和切换类名。classList 属性提供了以下方法：
add()：添加一个或多个类名。remove()：删除一个或多个类名。toggle()：如果类名存在则删除，不存在则添加。contains()：检查元素是否包含某个类名。
const element = document.getElementById('myElement');
element.classList.add('highlight');
element.classList.remove('highlight');
element.classList.toggle('active');
if (element.classList.contains('highlight')) {console.log('Element has the highlight class.');
}
5.3 计算样式
使用 window.getComputedStyle() 方法可以获取元素的计算样式，即元素在浏览器中实际显示的样式。该方法返回一个 CSSStyleDeclaration 对象，包含了元素的所有计算样式属性。
const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);
const color = computedStyle.color;
const fontSize = computedStyle.fontSize;
5.4 动画和过渡效果
通过修改元素的样式属性，可以实现简单的动画和过渡效果。结合 CSS 的 transition 和 animation 属性，可以创建更加复杂和流畅的动画效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>#myBox {width: 100px;height: 100px;background-color: blue;transition: width 1s ease;}</style>
</head>
<body><div id="myBox"></div><button onclick="animateBox()">Animate</button><script>function animateBox() {const box = document.getElementById('myBox');box.style.width = '200px';}</script>
</body>
</html>
六、操作 DOM 元素的内容
6.1 文本内容操作
可以使用 textContent 和 innerText 属性来获取和修改元素的文本内容。textContent 属性会返回元素及其所有子元素的文本内容，包括隐藏元素的文本；而 innerText 属性只会返回可见元素的文本内容，并且会考虑元素的样式。
const element = document.getElementById('myElement');
// 获取文本内容
const text = element.textContent;
// 修改文本内容
element.textContent = 'New text content';
6.2 HTML 内容操作
使用 innerHTML 属性可以获取和修改元素的 HTML 内容。innerHTML 属性会将元素内的 HTML 代码作为字符串返回或设置。
const element = document.getElementById('myElement');
// 获取 HTML 内容
const html = element.innerHTML;
// 修改 HTML 内容
element.innerHTML = '<p>New HTML content</p>';
需要注意的是，使用 innerHTML 可能存在安全风险，因为它会执行其中的脚本代码。如果需要插入纯文本，建议使用 textContent 属性。
6.3 创建和插入文本节点
可以使用 document.createTextNode() 方法创建一个文本节点，然后使用 appendChild() 或 insertBefore() 方法将其插入到 DOM 中。
const textNode = document.createTextNode('This is a new text node.');
const parentElement = document.getElementById('parent');
parentElement.appendChild(textNode);
6.4 安全的内容插入
为了避免 XSS（跨站脚本攻击）风险，可以使用 document.createElement() 和 appendChild() 方法来安全地插入内容。
const newElement = document.createElement('p');
newElement.textContent = 'This is a safe way to insert content.';
const parent = document.getElementById('parent');
parent.appendChild(newElement);
七、添加和删除 DOM 元素
7.1 创建新元素
使用 document.createElement() 方法可以创建一个新的元素节点。
const newDiv = document.createElement('div');
7.2 添加元素到文档中
可以使用以下方法将新元素添加到文档中：
appendChild()：将新元素作为最后一个子元素添加到父元素中。
const parentElement = document.getElementById('parent');
parentElement.appendChild(newDiv);
insertBefore()：将新元素插入到指定的参考元素之前。
const referenceElement = document.getElementById('reference');
parentElement.insertBefore(newDiv, referenceElement);
after()和before()：在元素的后面或前面插入新元素。
const targetElement = document.getElementById('target');
targetElement.after(newDiv);
7.3 删除元素
可以使用 remove() 方法直接删除元素，也可以使用 parentNode.removeChild() 方法通过父元素来删除子元素。
const elementToRemove = document.getElementById('elementToDelete');
// 使用 remove 方法
elementToRemove.remove();
// 使用 parentNode.removeChild 方法
const parent = elementToRemove.parentNode;
parent.removeChild(elementToRemove);
7.4 克隆元素
使用 cloneNode() 方法可以克隆一个元素节点。cloneNode() 方法接受一个布尔参数，true 表示深克隆，会克隆元素及其所有子元素；false 表示浅克隆，只克隆元素本身。
const originalElement = document.getElementById('original');
const clonedElement = originalElement.cloneNode(true);
const parent = document.getElementById('parent');
parent.appendChild(clonedElement);
八、DOM 事件处理
8.1 事件概述
事件是在网页中发生的各种交互行为，如点击、鼠标移动、键盘输入等。JavaScript 可以通过监听这些事件并执行相应的代码来实现交互效果。
8.2 事件绑定方式
- 内联事件处理程序：在 HTML 标签中直接使用
on*属性来绑定事件处理函数。
<button onclick="handleClick()">Click me</button>
<script>function handleClick() {alert('Button clicked!');}
</script>
- DOM0 级事件处理程序：通过元素的属性来绑定事件处理函数。
const button = document.getElementById('myButton');
button.onclick = function() {alert('Button clicked!');
};
- DOM2 级事件处理程序：使用
addEventListener()方法来绑定事件处理函数。该方法可以为同一个元素的同一个事件绑定多个处理函数，并且可以控制事件的传播方式。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('Button clicked!');
});
8.3 事件对象
当事件发生时，会自动创建一个事件对象，该对象包含了与事件相关的信息，如事件类型、触发事件的元素、鼠标位置等。事件对象作为参数传递给事件处理函数。
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {console.log('Event type:', event.type);console.log('Target element:', event.target);
});
8.4 事件传播
事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。捕获阶段从文档根节点开始，逐级向下查找目标元素；目标阶段是事件到达目标元素；冒泡阶段则是从目标元素开始，逐级向上传播到文档根节点。可以通过 addEventListener() 方法的第三个参数来控制事件是在捕获阶段还是冒泡阶段触发，默认值为 false，表示在冒泡阶段触发。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><div id="outer"><div id="inner">Click me</div></div><script>const outer = document.getElementById('outer');const inner = document.getElementById('inner');outer.addEventListener('click', function() {console.log('Outer div clicked (bubble)');}, false);inner.addEventListener('click', function() {console.log('Inner div clicked (bubble)');}, false);outer.addEventListener('click', function() {console.log('Outer div clicked (capture)');}, true);inner.addEventListener('click', function() {console.log('Inner div clicked (capture)');}, true);</script>
</body>
</html>
8.5 事件委托
事件委托是一种利用事件冒泡原理的技术，将事件处理函数绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素上，从而触发父元素的事件处理函数。这样可以减少事件处理函数的绑定数量，提高性能。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><script>const list = document.getElementById('myList');list.addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('Clicked on:', event.target.textContent);}});</script>
</body>
</html>
8.6 常见事件类型
- 鼠标事件：如
click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout等。 - 键盘事件：如
keydown、keyup、keypress等。 - 表单事件：如
submit、change、input等。 - 窗口事件：如
load、resize、scroll等。
九、高级 DOM 操作技巧
9.1 批量操作和性能优化
在进行大量的 DOM 操作时，频繁的 DOM 访问和修改会导致性能问题。可以使用文档片段（DocumentFragment）来批量操作 DOM，减少对实际 DOM 树的修改次数。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const newElement = document.createElement('div');newElement.textContent = `Item ${i}`;fragment.appendChild(newElement);
}
const parent = document.getElementById('parent');
parent.appendChild(fragment);
9.2 动态加载脚本和样式
可以使用 JavaScript 动态地加载外部脚本和样式文件。
// 动态加载脚本
const script = document.createElement('script');
script.src = 'externalScript.js';
document.head.appendChild(script);
// 动态加载样式
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'externalStyle.css';
document.head.appendChild(link);
9.3 虚拟 DOM 概念
虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。虚拟 DOM 的主要作用是减少对真实 DOM 的直接操作，通过比较虚拟 DOM 的差异，只对需要更新的部分进行真实 DOM 的更新，从而提高性能。一些流行的 JavaScript 框架如 React、Vue.js 都使用了虚拟 DOM 技术。
9.4 Mutation Observer
MutationObserver 是一个用于监听 DOM 树变化的 API。可以使用它来监听元素的属性变化、子节点的添加或删除等。
const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {for (let mutation of mutationsList) {if (mutation.type === 'childList') {console.log('A child node has been added or removed.');} else if (mutation.type === 'attributes') {console.log('An attribute was modified.');}}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
十、总结
JavaScript 中的 DOM 操作是 Web 开发中不可或缺的一部分，它为开发者提供了强大的工具来创建动态、交互性强的网页。通过深入理解 DOM 的基础概念、掌握各种获取和操作 DOM 元素的方法、熟悉事件处理机制以及运用高级 DOM 操作技巧，开发者可以更加高效地开发出优秀的 Web 应用程序。同时，随着 Web 技术的不断发展，DOM 操作也在不断演进，开发者需要不断学习和探索新的知识和技术，以适应不断变化的需求。
