1. 通过childNodes.length获取子节点个数，在IE6-8没有问题，而较高级浏览器会出错，因为把空文本节点计算在内了。
解决方案
|
1 2 3 4 5 6 7 8 |
获取ul里li的个数，即li为元素节点 for(var i=0;i<oul.childnodes.length;i++){ If(oUl.childNodes[i].nodeType==1){ //进行操作 } } 通过children，只算第一层 alert(oUl.children.length) |
2.nodeType属性课返回的节点类型：
|
1 2 3 4 5 |
元素---- 1 属性----2 文本 ----3 注释 ----8 文档 ----9 |
3. parentNode获取父节点；offsetParent获取一个元素用来定位的父级
4. 通过firstChild、lastChild获取首尾子节点。兼容性问题：以上方法只在IE6-8有效，较高级浏览器会出错。
解决方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if(oUl.firstElementChild){ //高级浏览器 oUl.firstElementChild.style….. } else{ //IE6-8 oUl.firstChild.style…. } 同样类似的兼容性问题有 firstChild firstElementChild lastChild lastElementChild nextSibling nextElementSibling previousSibling previousElementSibling |
5. 元素属性操作
|
1 2 3 4 5 6 7 8 |
oDiv.style.display=” block”; oDiv.style[“display”]=”block”; DOM方式，如oDiv.setAttribute(“value”,”test”); DOM方式操作元素属性 获取：getAttribute(名称) 设置：setAttribute(名称，值) 删除：removeAttribute(名称) |
6. 通过class获取元素(封装成函数，简单版本)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function getByClass(oParent,sClass){ var aResult=[]; var aEle=oParent.getElementsByTagName(“*”); for(var i=0;i<aele.length;i++){ if(aEle[i].className==sClass){ aResult.push(aEle[i]); } } return aResult; } demo(设置li的class为box元素的样式) var aBox=getByClass(oUl,’box’)； for(var i=0;i<abox.length;i++){ aBox[i].style…. } |
7. 创建、插入和删除元素
|
1 2 3 4 5 6 7 |
创建DOM元素 createElement(标签名) 创建一个结点 appendChild(结点) 追加一个结点 插入元素 insertBefore(结点,原有结点) 在已有元素钱插入 删除DOM元素 removeChild(结点) 删除一个结点 |
8. 文档碎片
|
1 2 3 |
文档碎片可以提高DOM操作性能（理论上） document.createDocumentFragment() 文档碎片原理:例如插入元素，如果插入的元素过多，例如一万个，则浏览器要插入1一万次同时渲染浏览器一万次。所以可以在创建元素完成时再插入DOM。这个只是在叫低级浏览器上才能看到浏览器性能的提高。 |
9.获取值
|
1 2 |
a链接文本内容：document.innerText textarea文本内容：document.value |
10.document中的3个方法
|
1 2 3 |
var obj=document.getElementById("one"); var obj=document.getElementsByTagName("two"); var obj=documeng.getElementsByName("password"); |
11.节点树
|
1 2 3 4 |
父节点：parentNode 子节点：childNodes firstNode lastNode 同胞节点:nextSibling previousSibling 节点：节点类型nodeType、节点值nodeValue、节点名nodeName |
暂无评论