【JavaScript】之文档对象模型（DOM）详解

艾伦耶格尔

发布于 2025-08-28 15:32:51

17200

代码可运行

文章被收录于专栏：Java基础Java基础

运行总次数：0

代码可运行

JavaScript 的强大之处在于它能够与 HTML 和 CSS 交互，动态地修改网页内容和样式。而实现这一功能的核心就是 DOM（文档对象模型）。

一、什么是 DOM？

DOM 是文档对象模型（Document Object Model）的缩写。它将 HTML 或 XML 文档转换成一个树形结构，JavaScript 可以访问和操作这棵树上的每一个节点，从而实现对网页的动态控制。

二、DOM 树的结构

DOM 树的结构是层级的，每个节点都有其父节点、子节点和兄弟节点。

父节点 (Parent Node): 包含当前节点的节点。
子节点 (Child Node): 被当前节点包含的节点。
兄弟节点 (Sibling Node): 与当前节点拥有相同父节点的节点。

三、如何使用 JavaScript 操作 DOM？

1. 获取元素:

getElementById(): 通过 ID 获取元素。

let element = document.getElementById("myElement");
console.log(element); // 输出 id 为 "myElement" 的元素

getElementsByTagName(): 通过标签名获取元素集合 (HTMLCollection)。

let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i]); // 输出所有 p 元素
}

getElementsByClassName(): 通过类名获取元素集合 (HTMLCollection)。

let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i]); // 输出所有 class 包含 "myClass" 的元素
}

querySelector(): 通过 CSS 选择器获取第一个匹配的元素。

let element = document.querySelector("#myElement > p");
console.log(element); // 输出 id 为 "myElement" 元素下的第一个 p 元素

querySelectorAll(): 通过 CSS 选择器获取所有匹配的元素集合 (NodeList)。

let elements = document.querySelectorAll(".myClass");
elements.forEach(element => console.log(element)); // 输出所有 class 包含 "myClass" 的元素

2. 修改元素内容:

textContent: 获取或设置元素的文本内容。

let element = document.getElementById("myElement");
element.textContent = "新的文本内容"; // 设置文本内容
console.log(element.textContent); // 输出 "新的文本内容"

innerHTML: 获取或设置元素的 HTML 内容 (慎用，可能存在安全风险)。

let element = document.getElementById("myElement");
element.innerHTML = "<p>新的 HTML 内容</p>"; // 设置 HTML 内容

3. 修改元素属性:

getAttribute(): 获取元素的属性值。

let element = document.getElementById("myElement");
let src = element.getAttribute("src");
console.log(src); // 输出 src 属性的值

setAttribute(): 设置元素的属性值。

let element = document.getElementById("myElement");
element.setAttribute("src", "new_image.jpg"); // 设置 src 属性的值

removeAttribute(): 移除元素的属性。

let element = document.getElementById("myElement");
element.removeAttribute("src"); // 移除 src 属性

4. 修改元素样式:

style 属性: 直接访问和修改元素的内联样式。

let element = document.getElementById("myElement");
element.style.color = "red"; // 设置颜色为红色
element.style.fontSize = "20px"; // 设置字体大小

5. 创建和添加元素:

createElement(): 创建新的 HTML 元素。

let newParagraph = document.createElement("p");

appendChild(): 将新元素添加到父元素的子节点列表末尾。

let element = document.getElementById("myElement");
element.appendChild(newParagraph); // 将 newParagraph 添加到 myElement 的末尾

insertBefore(): 将新元素添加到父元素的指定子节点之前。

let existingElement = document.getElementById("existingElement");
element.insertBefore(newParagraph, existingElement); // 将 newParagraph 添加到 existingElement 之前

6. 删除元素:

removeChild(): 从父元素中删除指定的子元素。

let element = document.getElementById("myElement");
let childToRemove = document.getElementById("childToRemove");
element.removeChild(childToRemove); // 从 myElement 中删除 childToRemove

7. 事件处理:

let element = document.getElementById("myElement");
element.addEventListener('click', function() {
  alert("元素被点击了！");
});

四、一些重要的 DOM 属性和方法 (附带示例):

document.documentElement: 获取 <html> 元素。 console.log(document.documentElement);
document.body: 获取 <body> 元素。 console.log(document.body);
parentNode: 获取元素的父节点。 console.log(element.parentNode);
childNodes: 获取元素的所有子节点 (NodeList)。 console.log(element.childNodes);
firstChild: 获取元素的第一个子节点。 console.log(element.firstChild);
lastChild: 获取元素的最后一个子节点。 console.log(element.lastChild);
nextSibling: 获取元素的下一个兄弟节点。 console.log(element.nextSibling);
previousSibling: 获取元素的上一个兄弟节点。 console.log(element.previousSibling);

五、避免常见错误:

操作未加载的 DOM: 确保 DOM 完全加载后再执行 JavaScript 代码，可以使用 DOMContentLoaded 事件。
innerHTML 的安全风险: 使用 innerHTML 容易受到 XSS 攻击，需要谨慎使用，并进行必要的安全过滤。
性能优化: 频繁操作 DOM 会影响性能，尽量减少不必要的 DOM 操作，可以使用文档片段 (DocumentFragment) 来批量更新 DOM。

六、DOM案例

HTML 页面：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作示例</title>
</head>
<body>

<h1 id="header">欢迎来到 DOM 操作示例</h1>
<button onclick="changeText()">点击改变标题文字</button>
<div id="content">
    <p>这是一个段落。</p>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
    </ul>
</div>

<script>
function changeText() {
    var header = document.getElementById("header");
    header.innerHTML = "DOM 文档对象模型示例";
}

window.onload = function() {
    var listItems = document.querySelectorAll('#content ul li');
    for (var i = 0; i < listItems.length; i++) {
        (function(index) {
            listItems[index].onclick = function() {
                alert('点击了第 ' + (index + 1) + ' 个列表项');
            };
        })(i);
    }
};
</script>

</body>
</html>

解释：

HTML 部分:
- <h1> 标签用于创建一个标题。
- <button> 标签用于创建一个按钮，当用户点击该按钮时，将调用 changeText 函数。
- <div> 包含了一个段落和一个无序列表。
JavaScript 部分:
- changeText 函数通过获取具有 id="header" 的元素，并修改其 innerHTML 属性来改变标题的文本内容。
- window.onload 事件处理器在页面加载完成后执行。它首先通过 querySelectorAll 获取所有的列表项，并为每个列表项添加点击事件处理程序。当列表项被点击时，会弹出一个警告框显示点击的是哪个列表项。