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) 深层复制 父亲、孩子一起复制