js学习记录9

DOM:Document Object Model 文档对象模型

    DOM把一个网页看成一个树的结构（层次）

DOM操作：查找元素 样式设置 结构控制

DOM相关概念：

1、节点（元素）：一切皆节点 有标签节点（标签 标记） 文本节点 属性节点

2、节点的结构层次：

父节点 :  parentNode

兄弟节点:

下一个节点：

 nextSibling

 nextElementSibling

上一个节点：

previousSlibling   ie678识别

previousElementSlibling  ie9+ ff chrome

兼容问题要出就出在ie，如何处理兼容问题（先处理正常的 后处理不正常）

子节点:

第一个孩子：

  firstChild

  firstElementChild

最后一个孩子：

     lastChild

     lastElementChild

所有子节点：

 childNodes:选出全部的孩子

它是一个标准属性（为W3C推荐，不建议使用）

它得到的是父亲中所有的孩子 包括标签节点 文本节点...

FF、谷歌等高级浏览器把换行也看成孩子，我们关心的是元素节点孩子，可以借助nodeType进行筛选 nodeType==1 表示该节点

标签元素节点

 children（推荐使用）选出所有孩子，只选出是标签节点的孩子，注意在ie678中把注释看成孩子，

     避免开注释即可

3、DOM节点的操作

创建节点（元素）删除节点 插入节点 复制节点

 3.1创建节点

document.createElement("p")

含义：在文档中创建一个p元素

 3.2插入节点：

父节点.appendChild(子元素)  在父亲末尾添加孩子

父节点.insertBefore(参数1，参数2)；

参数1表示具体添加的子元素，参数2表示参考的元素

参数2的值为null，也添加到末尾

 3.3删除节点

removeChild()

 3.4复制节点

cloneNode() 浅层复制 只复制父亲 孩子不复制

cloneNode(true) 深层复制 父亲、孩子一起复制

!important 提高属性的权重