HTML DOM属性完全指南
编程小白也能理解的JavaScript DOM属性详解
一、什么是DOM？
DOM（Document Object Model） 是HTML和XML文档的编程接口，它将网页表示为一个由节点和对象组成的结构化树状模型。
想象一下，你的网页是一棵大树：
- 文档是树根（document对象）
- HTML元素是树枝（如div、p等）
- 属性是树叶（如id、class等）
- 文本内容是树上的果实
DOM不是编程语言，而是允许JavaScript与网页内容交互的标准接口。浏览器根据HTML创建DOM树，然后我们就可以用JavaScript操作这个树。
二、DOM属性基础
DOM属性就像是HTML元素的”特征”或”特性”，用来存储元素的状态和信息。
属性 vs 特性
- 特性（Attributes） – 写在HTML标签中的，如 <div id=”main” class=”container”>
- 属性（Properties） – DOM对象上的JavaScript属性，如 element.id 或 element.className
在JavaScript中，我们主要操作的是DOM属性（properties），而不是原始HTML特性（attributes）。
获取属性值
// 获取元素
const element = document.getElementById(“myElement”);
// 获取属性值
const idValue = element.id;
const className = element.className;
const element = document.getElementById(“myElement”);
// 获取属性值
const idValue = element.id;
const className = element.className;
设置属性值
// 设置属性值
element.id = “newId”;
element.className = “newClass”;
element.id = “newId”;
element.className = “newClass”;
三、常用DOM属性
1. 内容属性
- innerHTML – 获取/设置元素的HTML内容（包含标签）
- textContent – 获取/设置元素的文本内容（忽略标签）
- innerText – 类似textContent，但会考虑CSS样式（性能较差）
原始文本
2. 表单属性
- value – 获取/设置表单字段的值
- checked – 复选框/单选框的选中状态
- disabled – 禁用状态（true/false）
四、样式与类属性
1. className
className 属性获取或设置元素的class属性值（字符串形式）
element.className = “box active”; // 设置多个类名
2. classList（推荐）
更方便操作类名的现代方法：
element.classList.add(“new-class”); // 添加类
element.classList.remove(“old-class”); // 移除类
element.classList.toggle(“active”); // 切换类
element.classList.contains(“check”); // 检查类是否存在
element.classList.remove(“old-class”); // 移除类
element.classList.toggle(“active”); // 切换类
element.classList.contains(“check”); // 检查类是否存在
3. style属性
直接操作元素的CSS样式：
element.style.color = “blue”;
element.style.backgroundColor = “#f0f0f0”;
element.style.fontSize = “20px”;
element.style.backgroundColor = “#f0f0f0”;
element.style.fontSize = “20px”;
注意：CSS属性名使用驼峰命名法（如backgroundColor），而不是CSS中的短横线命名（background-color）
五、元素关系属性
用于在DOM树中导航的属性：
- parentNode – 父节点
- childNodes – 所有子节点（包括文本节点）
- children – 所有子元素（仅元素节点）
- firstChild / firstElementChild
- lastChild / lastElementChild
- nextSibling / nextElementSibling
- previousSibling / previousElementSibling
第一个段落
目标元素
第三个段落
带有”Element”的属性返回元素节点，不带的返回所有类型节点（包括文本节点）。
六、自定义属性（data-*）
HTML5允许我们自定义属性，以data-开头，用于存储元素相关的额外信息。
HTML中使用
<div id=”user” data-user-id=”123″ data-role=”admin”>用户信息</div>
JavaScript访问
- dataset属性 – 获取所有自定义属性
- dataset.keyName – 访问特定属性
const user = document.getElementById(“user”);
const userId = user.dataset.userId; // “123”
const role = user.dataset.role; // “admin”
// 设置新属性
user.dataset.status = “active”;
const userId = user.dataset.userId; // “123”
const role = user.dataset.role; // “admin”
// 设置新属性
user.dataset.status = “active”;
自定义数据元素
自定义属性名称在JavaScript中使用驼峰命名法（data-user-id → userId）