深入理解 DOM 元素
深入理解 DOM 元素：构建动态网页的基石
在网页开发的世界里，DOM（Document Object Model，文档对象模型）元素宛如一座桥梁，连接着静态的 HTML 结构与动态的 JavaScript 交互逻辑。它让原本呆板的网页变得鲜活生动，能够实时响应用户的每一个操作。今天，就让我们一同深入探索 DOM 元素的奥秘。
一、DOM 元素究竟是什么？
想象一下，当浏览器加载一个 HTML 文件时，它会按照 HTML 标记构建出一个树形结构，这个树状图中的每一个节点，对应的就是一个 DOM 元素。从根节点 开始，层层分支，包含了
、，再细化到各种文本标签如、
例如，一个简单的 HTML 页面：
欢迎来到我的网页
这是一段介绍性的文字。
在这个页面里，
、
、 都是独立的 DOM 元素，它们各自有属性（如 id、src、alt）和包含的文本内容（对于可包含文本的元素而言），共同编织成了网页的基础架构。
二、获取 DOM 元素：开启交互之门
JavaScript 要操作 DOM 元素，首先得找到它们。常见的获取方式有多种：
document.getElementById()：这是最基本也是最常用的方法之一，通过元素的 id 属性来精准定位。就像我们上面例子中的
元素设置了 id="intro"，在 JavaScript 中就可以这样获取：
const introParagraph = document.getElementById('intro');
console.log(introParagraph.textContent); // 输出：这是一段介绍性的文字。
document.getElementsByTagName()：按照标签名称来获取一组元素。如果想获取页面上所有的
元素，可以：
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 = '新的加粗内容';
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);