JS DOM 知识梳理

 

一 DOM术语
<a>
标签 CSS/HTML
元素 js
节点 DOM

二 DOM document也是一套规范

三 各浏览的支持
IE6-8 10-20% IE9 80%
chrome 70-80%
FireFox 99%

四 参考网站
1、基础教程类： w3c 菜鸟教程
2、前端框架： mdn bootcdn
3、兼容性问题： caniuse -> Can I use
4、素材网： codepen 17素材网
5、echarts

五 dom编程
1、子节点
1） childNodes
asdfasfas -> 文本节点

<ul id="ul1">
空文本节点 <li></li>
空文本节点 <li></li>空文本节点
</ul>

//获得ul
var oul = document.getElementById("ul1");
//当前节点的所有的子节点
alert(oul.childNodes.length);

兼容性问题：
低版本的浏览器：能正常显示子标签的个数
高版本的浏览器：将文字节点也统计在其中

困扰：将 li的背景色换成红色

2）nodeType
3 --> 文本节点
1 --> 元素节点

3) children
只包括元素节点，不包括文本节点


2、父节点
1）parentNode
隐藏 li 节点

2) offsetParent
absolute 定位 ：绝对定位
它是相对于它最近的已定位的父元素，如果元素没有已经定位的父元素，它会一级一级向上找，直到找html
找到html后会相对于html进行绝对定位

offsetParent:找决定它直接定位的父元素

3、其它类型节点
1）首尾子节点 （兼容性问题）
firstChild / firstElementChild
lastChild / lastElementChild
2) 兄弟节点 （兼容性问题）
nextSibling / nextElementSbiling
previousSibling / previousElementSbiling

六 dom 操作属性
1、JS操作属性方法
第一种： obj.style.display="none";
第二种：obj.style["display"]="none";
第三种：dom :obj.style.setAttribute(名称，值)

2、属性操作
getAttribute(名称)
setAttribute(名称，值)
removeAttribute(名称)

七、节点操作
1、创建Dom元素
1) createElement(标签名) 创建一个节点
节点创建后是不是在页面中能够显示，不是
2) appendChild(节点) 追加一个节点

2、插入一个元素
insertBefore(新节点，原有节点) 在原有节点前插入新节点

3、删除一个元素
removeChild(节点) 删除一个节点

八、文件碎片
document.createDocumentFragment()
容器：低版本浏览器

ul
li*10000

ul.appendChild(li);

li -> createDocumentFragment -> 一次性渲染到UL中


九、表格
1、表格的html标签
table tr td thead tbody