DOM: Document object model 文档对象模型
DOM把一个网页看成一个树的结构(层次)
document
|
html
|
head body
| |
title ul
|
li li li li ...
js如何做特效: 布局------->特效 找元素,对其控制样式或结构
DOM的操作: 查找元素 样式设置 结构控制
DOM相关概念
1 节点(元素) : 一切皆节点 有标签节点(标签 标记) 文本节点 属性节点
<div id="box">我是内容</div>
2 节点的结构层次 属性
父节点 parentNode 见京东广告案例
兄弟节点
下一个节点
nextSibling
nextElementSibling ie9+ chrome 等
上一个节点
previousSibling ie 678识别
previousElementSibling ie9+ ff chrome
兼容问题要出就出在ie 678,如何处理兼容问题(先处理正常的 后处理不正常)
ietester 专门测试ie
子节点 firstChild/firstElementChild
lastChild/lastElementChild
孩子节点
childNodes: 选出全部的孩子
它是一个标准属性(w3c推荐,不建议使用),
得到的是父亲中所有的孩子 包括标签节点 文本节点...
FF、谷歌等高级版本浏览器把换行也看成孩子,
我们关心的是元素节点孩子,可以借助于nodeType进行
筛选 nodeType==1 表示该节点是标签元素节点
children 我们更喜欢 选出所有的孩子,只选出
是标签节点的孩子 ,注意在ie6 78 中会把注释看成孩子,
避免开注释即可
3 DOM节点的操作 一般都是方法
创建节点(元素) 删除节点 插入节点 复制节点
3.1 创建节点
document.createElement("p")
含义 在文档中创建了一个p元素
3.2 插入节点
父节点.appendChild(子元素) ;//在父亲末尾添加孩子
父节点.insertBefore(参数1,参数2);
参数1表示具体添加的子元素 参数2表示参考的元素
参数2的值为null,也是添加到末尾
<div>
<div></div>
</div>
<p></p>
3.3 删除节点 removeChild()
3.4 复制节点 cloneNode() 浅层复制 只复制父亲 孩子不复制
cloneNode(true) 深层复制 父亲孩子一起复制
DOM把一个网页看成一个树的结构(层次)
document
|
html
|
head body
| |
title ul
|
li li li li ...
js如何做特效: 布局------->特效 找元素,对其控制样式或结构
DOM的操作: 查找元素 样式设置 结构控制
DOM相关概念
1 节点(元素) : 一切皆节点 有标签节点(标签 标记) 文本节点 属性节点
<div id="box">我是内容</div>
2 节点的结构层次 属性
父节点 parentNode 见京东广告案例
兄弟节点
下一个节点
nextSibling
nextElementSibling ie9+ chrome 等
上一个节点
previousSibling ie 678识别
previousElementSibling ie9+ ff chrome
兼容问题要出就出在ie 678,如何处理兼容问题(先处理正常的 后处理不正常)
ietester 专门测试ie
子节点 firstChild/firstElementChild
lastChild/lastElementChild
孩子节点
childNodes: 选出全部的孩子
它是一个标准属性(w3c推荐,不建议使用),
得到的是父亲中所有的孩子 包括标签节点 文本节点...
FF、谷歌等高级版本浏览器把换行也看成孩子,
我们关心的是元素节点孩子,可以借助于nodeType进行
筛选 nodeType==1 表示该节点是标签元素节点
children 我们更喜欢 选出所有的孩子,只选出
是标签节点的孩子 ,注意在ie6 78 中会把注释看成孩子,
避免开注释即可
3 DOM节点的操作 一般都是方法
创建节点(元素) 删除节点 插入节点 复制节点
3.1 创建节点
document.createElement("p")
含义 在文档中创建了一个p元素
3.2 插入节点
父节点.appendChild(子元素) ;//在父亲末尾添加孩子
父节点.insertBefore(参数1,参数2);
参数1表示具体添加的子元素 参数2表示参考的元素
参数2的值为null,也是添加到末尾
<div>
<div></div>
</div>
<p></p>
3.3 删除节点 removeChild()
3.4 复制节点 cloneNode() 浅层复制 只复制父亲 孩子不复制
cloneNode(true) 深层复制 父亲孩子一起复制