标签：
dom就是document
兼容情况
-IE6~8 10%
-chrome 60%
-FF 99%
DOM节点
子节点
-childNodes 包含文本节点和元素节点 //IE6-8
abcde文本节点 <span>abcd元素节点</span>
-nodeType 返回节点类型
nodeType == 3 文本节点
nodeType == 1 元素节点
<script> window.onload = function(){ var oUl=document.getElementById(‘ul1‘); for(var i=0;i<aLi.length;i++){ if(oUl.childNodes[i].nodesType == 1){ oUl.childNodes[i].style.background = ‘red‘; } } } </script> <body> <ul id="ul1"> <li></li> <li></li> </ul> </body>
-children 只包括元素，不包括文本
父节点
-parentNode
<script> window.onload = function(){ var aA=document.getElementsByTagNaame(‘a‘); for (var i=0;i<aA.length;i++){ aA[i].onclick = function(){ this.parentNode.style.display = ‘none‘; } } } </script> <body> <ul> <li>111<a href="javascript">隐藏</a></li> <li>222<a href="javascript">隐藏</a></li> <li>333<a href="javascript">隐藏</a></li> <li>444<a href="javascript">隐藏</a></li> <li>555<a href="javascript">隐藏</a></li> </ul> </body>
-offsetPerent 获取元素在页面上的实际位置
-firstChild 获取第一个子节点 //IE6-8
-firstElementChild //chrome、FF
兼容问题解决
<script> windows.onload = function(){ var oUl = document.getELementById(‘ul1‘); if(oUl.firstElementChild){ oUl.firstElementChild.style.background = ‘red‘; } else(oUL.firstChild){ oUl.firstChild.style.background = ‘red‘; } } </script> <body> <ul id = "ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <ul> </body>
元素属性操作
-getAttribute(名称) 获取
-setAttribute(名称,值) 设置
-removeAttribue(名称) 删除
用className获取元素
<script> function getByClass(oParent,sClass){ var aEle = oParent.getElementsByTagName(‘*‘); var aResult = []; for(var i=0;i<aEle.length;i++){ if(aEle[i].className == sClass){ aResult.push(aEle[i]); } } return aResult; } window.onload = function(){ var oUl = document.getElementById(‘ul1‘); var aBox = getByClass(oUl,‘box‘); for(var i=0;i<aBox.length;i++){ aBox[i].style.background = ‘red‘; } } </script> </head> <body> <ul id="ul1"> <li class="box">1</li> <li>2</li> <li>3</li> <li>4</li> <li class="box">1</li> <li class="box">1</li> <li class="box">1</li> </ul> </body>
标签：
原文地址：http://www.cnblogs.com/takochan/p/4993351.html
