"JavaScript DOM 教程 - 基本概念与操作"
JavaScript的DOM（Document Object Model）是一种标准，用于表示HTML或XML文档的结构化表示，并提供了与这些文档交互的方法。DOM将整个文档视为一棵树，其中每个部分都是一个节点，通过节点之间的关系来描述文档的层次结构。
**树形结构**
在DOM中，HTML文档被表示为一个树状结构，根节点是`document`对象，代表整个文档。从根节点开始，每个子节点可以是元素（Element）、属性（Attr）、文本（Text）、注释（Comment）或其他类型的节点。例如，HTML元素如`<div>`或`<p>`是元素节点，它们的属性是属性节点，元素内的文本是文本节点，而注释则对应于注释节点。
**节点的类型和组成**
- **Element**: nodeType值为1，代表HTML元素，如`<div>`、`<span>`等。
- **Attr**: nodeType值为2，表示元素的属性，如`id`、`class`等。
- **Text**: nodeType值为3，代表元素内的纯文本。
- **Comment**: nodeType值为8，表示HTML注释。
- **Document**: nodeType值为9，表示整个文档本身。
- **DocumentFragment**: nodeType值为11，用于创建文档片段，可以用于临时存储多个节点。
**节点之间的关系**
在DOM树中，节点之间存在三种主要的关系：
1. **父子关系**：父节点包含子节点，如`<div>`可以包含`<p>`元素。
2. **兄弟关系**：具有相同父节点的节点之间是兄弟关系，如两个`<li>`元素在同一`<ul>`下。
3. **祖孙关系**：节点可以通过父节点链向上或向下查找其祖先或后代节点。
**节点操作**
在JavaScript中，我们可以使用以下方法操作DOM节点：
- **根据ID引用节点**：`document.getElementById(id)`返回具有指定ID的元素，如`getElementById("ById")`。
- **根据name属性引用节点**：`document.getElementsByName(name)`返回具有相同name属性的所有元素，返回的是一个NodeList集合，可以通过索引访问，如`getElementsByName("ByName")[0]`。
在处理DOM时，需要注意JavaScript代码的位置，确保在引用元素之前，浏览器已经解析到了相应的HTML元素。否则，可能会出现无法找到元素的错误。此外，还要注意大小写敏感性，例如在调用`getElementById`和`getElementsByName`时，传递的参数应与HTML中的ID和name属性一致。
我的内容管理
展开
