JavaScript：DOM（重点），封装类

DOM

Js是由三部分组成的： ECMAscript 、DOM 、BOM

• ECMAscript（核心欧洲计算机制造商协会）：描述了JS的语法和基本对象
• DOM（文档对象模型）：处理网页内容的方法和接口
• BOM（浏览器对象模型）：与浏览器交互的方法和接口

DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构，目的就是为了能让JS操作 html 元素而制定的一个规范。

DOM树：将网页划分为这样的结构

封装class类

（笔试题，解决兼容性问题）

我们要取得所有的盒子，利用遍历的方法，通过每一个盒子的className来判断，如果想等就留下：（重点）

判断真假

假：+0，-0，null，“ ” ，undefined（5个）

访问关系

• 父节点

parentNode 一层，亲的

• 兄弟节点

nextSibling 下一个兄弟，亲的

nextElementSibling 其他浏览器认识的

previousSibling 上一个兄弟，亲的

previousElementSibling 其他浏览器认识的

我们想要兼容，可以合写 || ：

（必须先写 正常浏览器 后写 IE678）

• 子节点

firstChild 第一个孩子，ie678

firstElementChild   第一个孩子，正常浏览器

合写：var one.firstElementChild || one.firstChild;   

• 孩子节点

childNodes：选出全部的孩子，他是标准属性，他返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点

// 火狐，谷歌等高版本会把换行也看做是子节点

利用  nodeType == 1   时才是元素节点     来获取元素节点，标签 ，元素  

children：选取所有的孩子，只有元素节点。（这个更好，用这个）

ie 678  包含 注释节点     这个要避免开。尽量少注释就行

DOM的节点操作

1）创建节点

2）插入节点

• appendChild( ) ; 添加孩子 放到盒子的最后面
• insertBefore(插入的节点 ，参照节点 ) ; 添加孩子

// 放到第一个孩子的前面，如果第二个参数为null，则默认放到最前面

3）删除节点

removeChild( ) ;

4）克隆节点

cloneNode( ) ; 复制节点

括号里面可以跟参数：

如果里面是 true 则为深层复制，除了复制本盒子还要复制子节点

如果为false则为浅层复制，只复制本节点，不复制子节点