JavaScript HTML DOM

学习目标

理解 DOM（文档对象模型）的树状结构及其在网页动态交互中的核心作用。
掌握多种获取 DOM 元素的方法（如 getElementById, querySelector 等）及其适用场景。
学会动态修改页面内容、属性及结构，实现无刷新更新。
熟练运用事件监听机制处理用户交互，并掌握 DOM 节点的遍历技巧。

DOM

JavaScript HTML DOM（文档对象模型）将 HTML 文档抽象为一个由对象组成的树状结构。通过 DOM，JavaScript 能够动态地访问、操作和修改网页的内容、结构及样式，而无需重新加载整个页面。这是现代 Web 应用实现高交互性的基础。

核心特性

树状结构 (Tree Structure)：DOM 将 HTML 元素组织成类似家谱的层级结构，元素之间存在父子（Parent-Child）关系。这种结构使得开发者可以基于位置关系轻松定位和修改元素。
灵活的元素访问：提供多种 API（如 getElementById, getElementsByClassName, querySelector 等），允许开发者通过 ID、类名、标签名或 CSS 选择器精准定位页面元素。
动态操控能力：支持实时修改文本内容、HTML 结构、元素属性以及 CSS 样式，极大地提升了用户体验。

基础示例

以下示例展示了如何通过点击按钮动态修改 heading 标签的内容：

<!DOCTYPE html>
<html>
<head>
    <title>DOM 示例</title>
</head>
<body>
    <h1 id="demo">这是一些原始文本。</h1>
    <button onclick="changeText()">修改文本</button>

    <script>
        function changeText() {
            // 1. 获取 ID 为 "demo" 的元素
            let element = document.getElementById("demo");
            
            // 2. 修改其文本内容
            element.textContent = "文本已被 JavaScript 动态修改！";
        }
    </script>
</body>
</html>

执行逻辑

页面包含一个 ID 为 demo 的标题和一个按钮。
当用户点击按钮时，触发 onclick 事件，调用 changeText() 函数。
函数内部使用 document.getElementById("demo") 定位到标题元素。
通过设置 textContent 属性，将标题文本更新为新内容，页面无需刷新即可看到变化。

获取 DOM

准确获取元素是操作 DOM 的第一步。JavaScript 提供了多种方法以适应不同的选择需求。

通过 ID 获取

getElementById() 返回具有指定 ID 的单个元素。ID 在页面中应是唯一的。

let heading = document.getElementById("title");
console.log(heading.textContent);

通过类名获取

getElementsByClassName() 返回一个动态集合（HTMLCollection），包含所有指定类名的元素。

let items = document.getElementsByClassName("list-item");
// 访问集合中的第一个元素
console.log(items[0].textContent);

通过标签名获取

getElementsByTagName() 返回指定标签名的所有元素集合。

let paragraphs = document.getElementsByTagName("p");
console.log(`页面中共有 ${paragraphs.length} 个段落`);

CSS 选择器 (推荐)

现代开发中更推荐使用 querySelector 系列方法，因为它们支持复杂的 CSS 选择器语法。

querySelector(): 返回匹配 CSS 选择器的第一个元素。

let firstParagraph = document.querySelector("p");
console.log(firstParagraph.textContent);

querySelectorAll(): 返回匹配 CSS 选择器的所有元素（静态 NodeList）。

let allParagraphs = document.querySelectorAll("p");
allParagraphs.forEach(p => console.log(p.textContent));

总结

方法	返回值类型	特点	适用场景
`getElementById`	Element	速度最快，唯一性	获取特定唯一元素
`getElementsByClassName`	HTMLCollection	动态集合，实时反映 DOM 变化	批量操作同类元素
`getElementsByTagName`	HTMLCollection	动态集合	批量操作同标签元素
`querySelector`	Element	支持复杂 CSS 选择器，返回首个	灵活选择单个元素
`querySelectorAll`	NodeList	静态集合，性能较好	灵活选择多个元素

修改 DOM

获取元素后，我们可以对其进行各种修改，包括内容更新、属性变更以及节点的增删。

修改内容

textContent: 设置或返回节点的文本内容（忽略 HTML 标签）。
innerHTML: 设置或返回节点的内部 HTML 代码（可解析 HTML 标签）。

// 修改纯文本
document.getElementById("title").textContent = "新标题";

// 修改 HTML 内容 (注意 XSS 风险)
document.getElementById("content").innerHTML = "<strong>已更新的内容</strong>";

修改属性

可以直接通过属性名访问和修改元素的属性，如 src, href, alt, value 等。

// 更换图片源
document.getElementById("myImage").src = "new-image.jpg";

// 修改链接地址
document.getElementById("myLink").href = "https://example.com";

添加与删除

创建元素: 使用 createElement()。
添加元素: 使用 appendChild() 或 insertBefore()。
删除元素: 使用 remove() 或 parentNode.removeChild()。

// 1. 创建新段落
let newPara = document.createElement("p");
newPara.textContent = "这是一个通过 JS 创建的新段落。";

// 2. 添加到 body 末尾
document.body.appendChild(newPara);

// 3. 删除指定元素
let oldPara = document.getElementById("removeMe");
if (oldPara) {
    oldPara.remove();
}

总结

操作 DOM 内容时，若只需修改文本，优先使用 textContent 以避免 XSS 攻击风险；若需插入 HTML 结构，则使用 innerHTML 但务必对内容进行安全过滤。

事件处理

事件是用户或浏览器自身执行的某种动作（如点击、按键、加载完成等）。JavaScript 通过事件监听器来响应这些动作。

添加事件监听器

推荐使用 addEventListener 方法，它允许为同一个元素绑定多个相同类型的事件处理函数，且易于移除。

document.getElementById("btn").addEventListener("click", function() { 
   alert("按钮被点击了！");
});

移除事件监听器

若要移除事件监听器，必须引用当初绑定的同一个函数（匿名函数无法直接移除）。

function sayHello() { 
   console.log("你好！");
}

let btn = document.getElementById("btn");

// 绑定事件
btn.addEventListener("click", sayHello);

// ... 在某个条件下移除事件
btn.removeEventListener("click", sayHello);

事件对象

事件处理函数会自动接收一个 event 对象，其中包含了事件的详细信息（如按键代码、鼠标坐标、触发目标等）。

document.getElementById("inputField").addEventListener("keyup", function(event) {
   console.log(`按下的键是：${event.key}`);
   // event.target 可以获取触发事件的元素
   console.log(`输入框当前值：${event.target.value}`);
});

总结

addEventListener 是现代事件处理的标准方式，相比直接在 HTML 中使用 onclick 属性，它实现了行为与结构的分离，代码更易维护。