ECMAScript DOM BOM
DOM:DocumentObjectModel 文档对象模型:一种用于HTML和XML文档的编程接口。
childNodes:子节点;子节点只包含父级下的第一层
alert(oParent.childNodes);ie6-8中只包括元素节点(值为1);高级浏览器中会包括文本节点(值为3);
<ul id='ul1'> <li></li> <li></li> <li></li> </ul>
window.οnlοad=function(){ var oUl=document.getElementById('ul1'); for(var i=0;i<oUl.childNodes.length;i++){ if(oUl.childNodes[i].NodeType == 1){ oUl.childNodes[i].style.background='red'; } } }
用children在ie和高级浏览器中都只包括元素节点;
parentNode:父节点;
ie6~8 ie9,chrom,firefox
firstChild firstElementChild第一个子节点
lastChild lastElementChild最后一个子节点
nextSibling nextElementSibling下一个子节点
previousSibling previousElementSibling前一个子节点
<script> 2 window.οnlοad=function() 3 { 4 var oUl=document.getElementById('ul'); 5 if(oUl.firstElementChild){ 6 oUl.firstElementChild.style.background='red'; //IE9-10 Chrome FireFox 7 } 8 else{ 9 oUl.firstChild.style.background='red'; //IE6-8 10 } 11 }; 12 </script>
DOM方式获取,设置元素属性: 获取元素属性其他方法:object.style.name
setAttribute(name,value,);设置 object.style[name]=value;
getAttribute(name);获取 通过className;
removeAttribute(name);移出
通过className获取元素,封装函数;
<ul id='ul1'> <li class='box'></li> <li></li> <li class='box'></li> <li></li> <li></li> </ul>
<script> window.onload=function(){ var oUl=document.getElementById('ul1'); getByClassName(oUl,'box'); } //通过className获取元素; function getByClassName(oParent,sClass){ var aLi=oParent.getElementsByTagName('li'); var aName=[]; for(var i=0;i<aLi.length;i++){ if(aLi[i].className == 'sClass'){ aName.push(ali[i]); } return aName; } } </script>