JS核心知识点：DOM\BOM\EVENT-白红宇

JS核心知识点：DOM\BOM\EVENT

阅读量：4993 次

发布时间：2019-06-12

本文共 5277 字，大约阅读时间需要 17 分钟。

1.DOM(Document Object Model) :文档对象模型

2. DOM节点：页面中最基本的组成部分

3. childNodes：获取某个节点下所有的子节点

在标准及ie9以上：会获取空文本节点。

在ie6/7/8 : 没有空文本节点。

文本文字123455

4. nodeType：查看某个节点的类型

1 代表元素节点

2 代表属性节点

3 代表文本节点

8 代表注释节点

9 代表文档节点

5. nodeName：查看某个节点的标签名

6. children：获取某个节点下所有的子节点

a. 和childNodes的区别是，children只会获取到元素节点

b. children非标准属性，childNodes是标准属性

7. parentNode：获取元素的父级

8. offsetParent获取定位元素的父节点

--- 实例：树形菜单收缩与展开

View Code

1. 获取第一个或最后一个节点，也可以获取元素上个或下个兄弟节点的属性

firstChild : 第一个子节点在标准和ie9下会获取到空白文本节点。

firstElementChild : 标准下获取第一个子元素节点，ie6/7/8不支持。

lastChild : 最后一个子节点在标准和ie9下会获取到空白文本节点。

lastElementChild : 标准下获取最后一个子元素节点，ie6/7/8不支持。

nextSibling：下一个兄弟节点在标准和ie9下会获取到空白文本节点。

nextElementSibling：标准下获取下一个兄弟节点，ie6/7/8不支持。

previousSibling：上一个兄弟节点，在标准和ie9下会获取到空白文本节点。

previousElementSibling：标准下获取上一个兄弟节点，ie6/7/8不支持

--- 实例：封装四个方法 first()、last()、next()、prev();

2. offsetParent：距离当前节点最近的具有定位属性的祖先节点

3. 元素定位后相对offsetParent的距离

a. offsetLeft : 当前节点的左外边框到offsetParent的左内边框之间的距离。

b. offsetTop : 当前节点的上外边框到offsetParent的上内边框之间的距离。

--- 实例：实用的文字提示层

4. 文档宽高：元素在页面所占的空间宽高

a. offsetWidth / offsetHeight：获取元素在页面所占的空间宽高，包含边框

b. clientWidth / clientHeight ：获取元素在页面所占的空间宽高，不包含边框

注意：如果元素没有占页面空间，那么这四属性的值都为0

(比如给元素设置了 display: none; 属性)

5. 内容宽高：被内容所撑出来的高度

a. scrollWiddth / scrollHeigt : 获取被内容所撑出来的高度

注意：当获取body的内容宽高时，在chrome下内容宽高没有可视区宽高，

内容宽高就是可视区的宽高。

其他浏览器，内容的实际宽高

--- 实例：全盘锁定页面，元素不可操作

知识点：DOM中动态创建元素

当使用innerHTML的时候，赋值之前的事件，赋值后会被注销。

1、createElement（’要创建的标签名‘）：创建一个DOM节点

语法：document.createElement（’要创建的节点‘）只能从document中去创建新节点；

--- 实例：创建留言板内容

2、父级.appendChild（要添加的元素）；从父级的尾部添加一个节点。

--- 实例：留言板插入内容

3、父级.insertBefore（要添加的元素）；从父级的首部添加一个节点。第一个参数：准备插入的节点（内容）；第二个参数：插入到哪个节点的前面（目标）；

如果父级没有内容，那么会新添加一个元素节点；

在IE下如果第2个参数不存在会报错；在其他标准浏览器下如果第二个参数的节点不存在则会以appendChild的形式进行添加；

    
         留言板加强，限制条数

4、父级.removeChild( 删除谁) ；从一个节点里面删除某个指定的子节点。

--- 实例：删除留言内容

    
         留言板加强，批量删除

5、父级.replaceChild( ) ；用一个节点替换掉另一个节点里面指定的子节点。

有两个参数：第一个参数是newNode（新的节点）；第二个参数是oldNode（想要替换的节点）；且当替换元素之后，之前绑定的所有事件都将会被清空；

--- 实例：始终显示一条留言

解决方案：循环一遍后再添加，或者通过createElement创建出来的元素上添加事件。

6、要克隆的元素. cloneNode( )：克隆节点；如果没有参数那么只会克隆这个元素，但不会克隆里面的子元素；

如果参数是 true 那么会克隆所有的元素包含子元素；

如果参数是 false 那么只会克隆当前要克隆的元素（不包含子元素）；

被克隆的元素如果包含事件，则事件是无法被克隆的；（克隆->复制）

--- 综合实例：元素上移下移，加上运动形式