JavaScript DOM教程：理解文档对象模型与事件处理

"JavaScript DOM教程，涵盖事件相关练习，包括悬浮广告实现，深入讲解DOM文档对象模型，涉及基本概念、节点引用、节点操作和控制节点样式。教程适合初学者，旨在提升JavaScript动态添加元素和操作网页的能力。" 在JavaScript中，DOM（Document Object Model）是一种用于表示HTML或XML文档的标准模型，它将文档解析为一棵由节点构成的树形结构，便于程序对文档内容进行访问和修改。本教程主要关注DOM的基本概念、节点引用以及相关操作。 **基本概念** 1. **树形结构**：DOM将HTML文档视为一棵树，其中document对象作为根节点，其他子节点代表文档的不同部分，如元素、文本、注释等。 2. **节点类型和组成**：DOM定义了多种节点类型，如Element（元素，nodeType值为1）、Attr（属性，2）、Text（文本，3）、Comment（注释，8）和Document（文档，9）。此外，还有DocumentFragment（文档片段，11）等。 **节点间的三种关系** - **父子关系**：父节点包含子节点，如元素内的文本节点。 - **兄弟关系**：拥有相同父节点的节点之间为兄弟关系，如两个同名的input元素。 - **祖孙关系**：节点与其直接子节点的子节点之间的关系，如元素内的子元素。 **节点的引用** 1. **根据id属性引用节点**：使用`getElementById`方法，如`document.getElementById("ById")`，可以获取到具有特定id的元素，并进行操作，如获取或修改其内容。 2. **根据name属性引用节点**：利用`getElementsByName`方法，例如`document.getElementsByName("ByName")`，返回一个包含所有name属性相同元素的NodeList，可以通过索引访问特定元素，如`MyElement[0]`。 **注意事项** - JavaScript代码通常放在HTML元素之后，确保在执行时元素已解析，否则无法正确获取元素。 - `getElementById`和`getElementsByName`方法对大小写敏感，需确保与HTML属性一致。 - `getElementsByName`返回的是一个动态集合，如果元素的name属性相同，集合中将包含所有这些元素。 通过学习本教程，你将掌握如何利用DOM进行事件处理、动态添加和修改页面元素，从而实现诸如悬浮广告等交互效果，进一步提升网页开发技能。