当前位置：首页 > article >正文

深入理解 DOM 元素

article 2026/3/18 9:31:40

深入理解 DOM 元素：构建动态网页的基石

在网页开发的世界里，DOM（Document Object Model，文档对象模型）元素宛如一座桥梁，连接着静态的 HTML 结构与动态的 JavaScript 交互逻辑。它让原本呆板的网页变得鲜活生动，能够实时响应用户的每一个操作。今天，就让我们一同深入探索 DOM 元素的奥秘。

一、DOM 元素究竟是什么？

想象一下，当浏览器加载一个 HTML 文件时，它会按照 HTML 标记构建出一个树形结构，这个树状图中的每一个节点，对应的就是一个 DOM 元素。从根节点 <html> 开始，层层分支，包含了 <head>、<body>，再细化到各种文本标签如 <p>、<div>、<img> 等等。这些元素不仅承载着网页的视觉呈现内容，如文字、图片、布局样式，更重要的是，它们为 JavaScript 提供了操作的 “把柄”，使得我们可以在代码层面随心所欲地改变网页的状态。

例如，一个简单的 HTML 页面：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>DOM 示例</title>
</head><body><h1>欢迎来到我的网页</h1><p id="intro">这是一段介绍性的文字。</p><img src="image.jpg" alt="示例图片" id="myImage">
</body></html>

在这个页面里，<h1>、<p>、<img> 都是独立的 DOM 元素，它们各自有属性（如 id、src、alt）和包含的文本内容（对于可包含文本的元素而言），共同编织成了网页的基础架构。

二、获取 DOM 元素：开启交互之门

JavaScript 要操作 DOM 元素，首先得找到它们。常见的获取方式有多种：

document.getElementById()：这是最基本也是最常用的方法之一，通过元素的 id 属性来精准定位。就像我们上面例子中的 <p> 元素设置了 id="intro"，在 JavaScript 中就可以这样获取：

const introParagraph = document.getElementById('intro');
console.log(introParagraph.textContent); // 输出：这是一段介绍性的文字。

document.getElementsByTagName()：按照标签名称来获取一组元素。如果想获取页面上所有的 <p> 元素，可以：

const allParagraphs = document.getElementsByTagName('p');
for (let i = 0; i < allParagraphs.length; i++) {console.log(allParagraphs[i].textContent);
}

document.getElementsByClassName()：依据类名检索元素，适用于给多个需要统一操作的元素赋予相同类名的场景。例如，若有多个元素都带有 highlight 类：

const highlightedElements = document.getElementsByClassName('highlight');
for (let i = 0; i < highlightedElements.length; i++) {highlightedElements[i].style.backgroundColor = 'yellow';
}

更现代的 document.querySelector() 和 document.querySelectorAll()：前者返回匹配指定 CSS 选择器的第一个元素，后者返回所有匹配的元素集合，它们支持复杂的选择器语法，如 #id、.class、element > child 等，提供了极大的灵活性。

const specificDiv = document.querySelector('div#main-content'); // 获取 id 为 main-content 的 div
const allButtons = document.querySelectorAll('button'); // 获取所有按钮元素

三、操作 DOM 元素：动态改变网页

一旦拿到了 DOM 元素，就能对它们施展各种 “魔法”。

更改元素内容：可以修改元素内部的文本或 HTML 代码。对于文本，使用 textContent 属性：

const updateText = document.getElementById('intro');
updateText.textContent = '这段文字已经被更新，是不是很神奇？';

要是想替换元素内的 HTML 片段，就得用 innerHTML，但要小心 XSS（跨站脚本攻击）风险，避免使用用户输入的不可信内容直接赋值：

const divElement = document.createElement('div');
divElement.innerHTML = '<strong>新的加粗内容</strong>';
document.body.appendChild(divElement);

操作元素样式：通过修改 style 属性来即时改变元素外观。比如改变颜色、字体大小、位置等

const myImage = document.getElementById('myImage');
myImage.style.border = '2px solid red';
myImage.style.width = '50%'; // 调整图片宽度为容器的 50%

还可以利用 classList 属性来添加、移除或切换 CSS 类，实现样式的动态切换，这比直接操作 style 更符合 CSS 的模块化管理理念

const button = document.createElement('button');
button.textContent = '点击变色';
button.addEventListener('click', function() {button.classList.toggle('active'); // 每次点击切换 active 类，用于切换样式
});
document.body.appendChild(button);

创建与删除元素：使用 document.createElement() 生成新元素，再用 appendChild() 将其添加到指定父元素中；要移除元素，则调用 removeChild()。假设要动态添加一个列表项：

const ul = document.createElement('ul');
const li = document.createElement('li');
li.textContent = '新的列表项';
ul.appendChild(li);
document.body.appendChild(ul);// 若要删除刚添加的列表项
const parentUl = li.parentNode;
parentUl.removeChild(li);

深入理解 DOM 元素