[javascript]DOM基础
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>
创建元素
-createElement 创建一个元素 //创建完的元素存在内存里不显示出来 所以需要一个appendChild来显示内容
-appendChild
<script> window.onload = function(){ var oBtn = document.getElementById('btn1'); var oUl = document.getElementById('ul1'); oBtn.onclick = function(){ var oLi = document.createElement('li'); oUl.appendChild(oLi); } } </script> </head> <body> <input id="btn1" type="button" value="创建" /> <ul id="ul1" > </ul> </body>
插入元素
-insertBefore //父级.insertBefore(节点，原有节点)
由于IE兼容性问题 需要在这里做一个判断
if(aLi.length>0){ oUl.insertBefore(oLi,aLi[0]); } else{ oUl.appendChild(oLi); //如果没有元素 先创建一个元素 }
删除元素
-removeChild
