JavaScript中DOM的那些事儿

DOM简介
1、什么是DOM

• DOM，全程Document Object Model文档对象模型
• JS中通过DOM来对HTML文档进行操作。了解了DOM就可以随心所欲的操作WEB页面

文档：

• 表示的是整个HTML网页文档

对象：

• 表示将网页中的每一个部分都转换为一个对象

模型：

• 表示对象之间的关系，这样可以方便获取对象

2、节点

• 节点Node，是构成我们网页的最基本的组成部分，网页中每一个部分都可以称为是一个节点。
• 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
• 虽然都是节点，但是实际上他们的具体类型是不同的
• 比如：标签我们称为元素节点、属性称为属性节点、文档称为文本节点、文档称为文档节点
• 节点的类型不同，属性和方法也都不尽相同

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

3、事件

• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
• JavaScript与HTML之间的交互是通过事件实现的
• 对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等

4、文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载额
读取到一行就运行一行，如果将script标签写道页面的上边
在代码执行时，页面还没有加载DOM对象也没有加载
会导致无法获取到DOM对象
解决方式：
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了