HTML DOM

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
DOM 是遵循 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

DOM的分类：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

DOM中节点的类型：

document文档节点：代表整个网页，document文档节点不对应标记。是访问文档中各元素的起点。
element元素节点：元素节点对应于网页中的各个标签。
attribute属性节点：每个元素都有若干个属性。
text文本节点：文本节点是最底层节点。

节点树：

HTML DOM将HTML视为文档视为树结构，这种结构称为节点树：
在HTML DOM中HTML文档中所有内容都被视为节点，DOM被视为节点树的HTML。

整个文档视为一个文档节点

每个HTML元素视为元素节点

HTML元素中的文本视为文本节点

每个HTML属性为属性节点

注释为注释节点

节点树中元素的关系可以总结为父、子和兄弟关系：

根节点： 在节点树中，顶端节点称为根节点

父节点： 除了根节点，每个节点都有父节点（parent）

子节点： 一个节点可以拥有任意多个子节点

兄弟节点： 拥有相同父节点的节点为兄弟节点

获取节点的方法：

1.通过ID获取
document.getElementById(‘id名’);
返回对拥有指定 ID 的第一个对象的引用。所以在代码的书写过程中，建议尽量保持ID的唯一性。

2.通过标签名获取
document.getElementsByTagName(‘标签名’);
返回带有指定标签名的对象的集合。返回元素的顺序是它们在文档中的顺序。

3.通过class获取
document.getElementsByClassName(‘class名’);
返回文档中所有指定类名的元素集合，作为 NodeList 对象。

4.通过name获取
document.getElementsByName(‘name名’);
返回带有指定名称的对象的集合。
注意：因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

节点树示例：

节点树：