JavaScript DOM教程：入门到实践

"JavaScript之DOM教程，适用于初学者的简明指南，通过学习可掌握DOM基本操作，包括添加、删除和修改网页元素。" 在JavaScript中，DOM（Document Object Model）是一种标准，它允许我们通过编程方式与HTML或XML文档交互。DOM将网页内容组织成一个层级结构，就像一棵树，每个部分都是一个节点。了解DOM对于动态网页开发至关重要，因为它是改变、操纵和更新页面内容的主要方式。 ### 基本概念 1. **树形结构**：DOM将HTML文档表示为一个树形结构，其中`document`对象是树的根，包含了整个文档的结构。每个节点代表文档的不同部分，如元素、文本或注释。 2. **节点的类型和组成**：DOM定义了几种类型的节点，如`Element`（元素节点，nodeType值为1）、`Attr`（属性节点，2）、`Text`（文本节点，3）、`Comment`（注释节点，8）以及`Document`（文档节点，9）。此外，还有`DocumentFragment`（文档片段，11）用于存储和操作小块文档。 ### 节点之间的关系 - **父子关系**：一个节点可以有多个子节点，一个子节点只有一个父节点。 - **兄弟关系**：具有相同父节点的节点互为兄弟。 - **祖孙关系**：节点的子节点的子节点被称为该节点的孙子节点。 ### 节点的引用 - **根据id属性引用节点**：`document.getElementById()`方法用于获取具有特定ID的元素。例如，`document.getElementById("ById")`将返回ID为"ById"的元素。需要注意，JavaScript代码应当在引用的元素之后，确保元素已被解析。 - **根据name属性引用节点**：`document.getElementsByName()`方法返回一组具有相同name属性的元素。这些元素通常用于表单中的复选框或单选按钮。例如，`document.getElementsByName("ByName")`返回所有name为"ByName"的元素，并形成一个NodeList集合，可以通过索引访问，如`MyElement[0]`。 ### 节点操作 - **创建新节点**：使用`document.createElement()`创建新的元素节点。 - **添加/删除子节点**：`appendChild()`和`removeChild()`方法用于在现有元素后添加新节点或删除指定节点。 - **替换节点**：`replaceChild()`方法可以替换现有节点。 - **修改节点属性**：通过直接访问和设置节点的属性，如`element.setAttribute("attrName", "value")`。 ### 控制节点样式 - **CSS属性修改**：通过`element.style.property`可以改变元素的内联样式，例如`element.style.color = "red"`将更改元素的颜色。 通过熟练掌握这些基本概念和操作，你将能够使用JavaScript动态地创建、修改和控制网页内容，实现丰富的交互效果。继续深入学习DOM，了解更多的API方法和技巧，你将成为一个出色的前端开发者。