JavaScript DOM 操作详解：节点理解与核心 API 使用指南

理解 DOM 节点结构

DOM 将 HTML 或 XML 文档映射为树状结构，由不同类型的节点组成。理解这一结构是进行 DOM 操作的前提。

第1步：构建 DOM 树概念

当浏览器加载 HTML 页面时，会生成一个包含所有标签的层次化节点树。

• 根节点：通常为 <html> 标签，它是整个文档的起点，没有父节点和兄弟节点。
• 子节点与兄弟节点：例如 <head> 是 <html> 的子节点；<meta> 和 <title> 位于同一层级，互为兄弟节点。

第2步：识别三类核心节点

在 DOM 中，标签通常被视为“元素”，但在底层它们被细分为以下三种主要节点类型：

1. 元素节点（Element Node）：即 HTML 标签本身，如 <div>、<p>。
2. 文本节点（Text Node）：标签内部包含的纯文本内容。
3. 属性节点（Attribute Node）：标签上的键值对，如 title="..."。

定位元素的四种核心方法

W3C 标准提供了一系列方法来快速获取页面上的节点，以便后续进行数据读写或样式修改。这些方法返回的对象可以直接访问其属性和方法。

第1步：通过 ID 精准获取

getElementById() 是最常用的查找方法，返回单个 Element 对象或 null。

var box = document.getElementById('box');
alert(box); // 若存在则返回 HTMLElement 对象，否则为 null

执行时机与兼容性处理

直接在使用该方法的脚本处可能会因 HTML 未完全加载而返回 null。解决方案包括：

1. 调整脚本位置：将 <script> 标签移至 <body> 底部。
2. 使用 onload 事件：等待窗口资源全部加载后再执行代码。

window.onload = function() {
    if (document.getElementById) {
        var box = document.getElementById('box');
        alert(box);
    } else {
        alert('浏览器不支持 getElementById');
    }
};

获取元素的基础属性

一旦获取到元素对象，可通过以下属性读取信息：

• tagName：元素标签名（大写，如