JavaScript：DOM总结

文档树

HTML DOM将HTML文档视作树结构。这种结构被称为节点树

1）HTML文档中的所有内容都是节点

• 整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

• 每个HTML属性是属性节点

• 注释是注释节点

2）节点树中的节点彼此拥有层级关系

• 父（parent）、子（child）、同胞（sibling）等用来描述这些关系。
• 在节点树中，顶端节点被称为根（root）
• 每个节点都有父节点，除了根
• 一个节点可拥有任意数量的子节点
• 同胞是拥有相同父节点的节点

DOM对象

（重点，面试）

文档对象模型（Document Object Model，简称 DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。HTML DOM定义了所有 HTML 元素的对象和属性，以及访问他们的方法，也就是说HTML DOM 是一套标准规则：关于如何获取、修改、添加或删除 HTML元素。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问， DOM独立于具体的编程语言，可以用于任何语言xml、js、vbs、c、java、php等等。DOM 对象是浏览器大战的产物，面试时不能直接就说它是JS的对象（虽然我们接下来学的，你可以认为他就是JS的对象：当浏览器支持 js的 dom接口(api)时）

如果实在忘记怎么描述这样说：DOM 操作就是增删改查换

element、text、attribute、comment（元素、文本、属性、注释）

在 js 中文档对象用关键字 document 表示

方法

（重点）

• getElementByid() 返回带有指定 ID 的元素（得到元素对象后就可以获取和更改对象的属性）
• getElementsByName() 返回带有指定 name 的对象集合
• getElemenstByTagName() 返回包含带有指定标签名称的多有元素的节点容器
• getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表容器
• cloneNode() 克隆节点，调用者是自己，参数默认是true为深度复制，false为浅度复制
• removeChild() 删除子节点，参数是节点，调用者是父亲
• createElement() 创建元素节点
• appendChild() 把新的子节点添加到指定节点。调用者是父亲，添加到末尾

• insertBefore() 在指定的子节点前面插入新的子节点。调用者是父亲，添加到前面

• createAttribute() 创建属性，参数是属性名
• setAttributeNode() 设置树形节点
• getAttributeNode() 获取属性节点，参数是属性名
• getAttribute() 返回指定的属性值
• setAttribute() 把指定属性设置或修改为指定的值，值存在就替换

• createTextNode() 创建文本节点，文本节点没有子元素（回车也算一个空白文本节点）
• comment() 注释节点，没有子节点（了解）
• replaceChild() 替换子节点，注意调用这个方法的对象一定是被替换者的父亲

offset家族

返回距离上级盒子（最近的带有定位）的位置

回流与重绘

（重点，面试）

1）页面呈现过程

不同的浏览器略微会有些不同，但基本上是类似的

1. 浏览器把 html、 代码解析成1个 DOM树，html 中的每个 tag 都是 DOM 树中的1个节点，根节点就是我们常用的 document 对象，dom 树就是html结构，里面包含了所有的 html tag，包括用 js 添加的元素
2. 浏览器把所有样式（主要包括 css 和浏览器自带的样式设置）解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式
3. dom tree 和样式结构体结合后构建呈现树（render tree），render tree有点类似于dom tree。区别在于：render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点（比如display:none的节点，还有head节点），因为这些节点不会用于呈现，而且不会影响呈现，所以就不会包含到render tree中。但是 visibility:hidden隐藏的元素还是会包含到render tree中，因为visibility:hidden会影响布局，会占有位置
4. 一旦 render tree构建完毕后，浏览器就根据 render tree来绘制页面

2）回流与重绘

回流：当 render tree中因为元素的数量，尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（重新布局）。每个页面至少需要一次回流，就是在页面第一次加载的时候

重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不影响布局的，比如 backgound-color，这就叫做重绘

（面试，选择题，问答题就答上面）从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流

常见的回流和重绘操作（任何对render tree中元素的操作都会引起回流或者重绘）：

• 添加、删除元素（回流+重绘）
• 隐藏元素，display:none（回流+重绘），visibility:hidden（重绘）
• 移动元素（回流+重绘）
• 对style的操作（对不同的属性操作，影响不一样）
• 用户操作，比如改变浏览器大小或者改变浏览器的字体大小（回流+重绘）

事件 DOM event

（重点）

事件，就是方法（函数）什么时候被调用

1）鼠标事件

// 事件
onclick  单击对象(按下松开)
ondblclick  双击对象
onmousedown 在对象上按下时
onmouseup  按下,在对象上松开时
onmousemove 鼠标在对象上移动时
onwheel 鼠标滚动时
onmouseover 鼠标指针穿过被选元素或其子元素区域
onmouseout 鼠标指针离开被选元素或者子元素区域
onmouseenter 鼠标指针穿过被选元素区域
onmouseleave 鼠标指针离开被选元素区域

// 参数
clientX，clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素
screenX，screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素

2）表单事件

onfocus 元素获取焦点时
onblur 失去焦点时
onfocusin 元素即将获取焦点时
onfocusout 元素即将失去焦点时
oninput 元素获取用户输入时(输入时及时调用事件函数)
onchange 表单元素的内容改变时(输入时不及时调用事件函数)
onreset 表单重置时
onsubmit 表单提交时

3）图片加载事件

onload 图像完成加载
onabort 图像的加载被中断
onerror 在加载图像时发生错误

4）冒泡

事件捕获：事件从最不精准的对象开始触发，最后到最精准的对象

事件冒泡：事件按照从最特定的事件目标到最不特定的事件对象的顺序触发

阻止事件冒泡：事件触发函数里调用

// 不是所有事件都冒泡，以下事件不冒泡：blur、focus、load、unload

例如：

案例：一个盒子，点击除了自己之外的任何一个地方就隐藏

原理：点击自己不算（怎样证明我是我，点击的这个对象id正好和自己一样）

点击空白处就是点击 document