DOM 简介

DOM 简介

DOM 的概念

• 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地 访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

DOM 树

• DOM 又称为文档树模型
• -文档：一个网页可以称为文档
• -节点：网页中的所有内容都是节点 （标签、属性、文本、注释等）
• -元素：网页中的标签
• -属性：标签的属性

DOM 经常进行的操作

• 获取元素
• 对元素进行操作(设置其属性或调用其方法)
• 动态创建元素
• 事件(什么时机做相应的操作)

获取页面元素

• 为什么要获取页面元素？
• 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。

根据 id 获取元素

• 方法：调用 document 对象的 getElementById 方法。
• 参数：字符串类型的 id 的属性值。
• 返回值：对应 id 名的元素对象。
• 注意1：由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准方式，不推荐使用。
• 注意2：代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应id的元素。
• id命名规则：使用字母数字下划线和横线，数字不能位于开头，英文区分大小写。id属性名是唯一的。

根据标签名获取元素

• 方法：调用 document 对象的 getElementsByTagName 方法。

• 参数：字符串类型的标签名。

• 返回值：同名的元素对象组成的数组

• 不管在哪层的标签都能被选中，先出现的靠前。

• 是伪数组，不是真正意义上的数组，原型是HTML集合。

• 注意1：操作数据时需要按照操作数组的方法进行。

• 可以进行遍历，遍历返回的数组的每一项和用id获取的元素是同样类型的。

• 注意2：getElementsByTagName 方法内部获取的元素是动态增加的。(js 在 html 结构之前，也会加载出后面的html,s数组显示为空，但是里面有内容)。

HTMLCollecti