js笔记-DOM基础
DoM浏览器支持：IE： 10%FF： 99%Chrome： 60%
childNotes不兼容在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNotes只算元素节点，而不算文本节点。
<ul> <li></li>
<li></li> <li></li> <li></li></ul>在IE9和Chrome中ul的childNotes个数为9个，而在IE6-8中为4个。
noteType显示节点的类型信息（浏览器兼容）：文本节点：noteType值为3元素节点：noteType值为1如果要对ul中的li的样式进行操作，并且还要对不同版本的浏览器具有一定的兼容性，可以使用noteType实现。for(var i=0; i<oUl.childNodes.length; i++){ if(1 == oUl.childNodes[i].nodeType)//说明是元素节点
{ oUl.childNodes[i].style.background='red';
}}
children只包含元素节点，不包多文本节点（也是兼容的）。for(var i=0; i<oUl.children.length; i++){ oUl.children [i].style.background='red';}
parentNote某个元素的父节点。<ul> <li>12<a href="javascript:;">隐藏</a></li>
<li>23<a href="javascript:;">隐藏</a></li> <li>34<a href="javascript:;">隐藏</a></li> <li>45<a href="javascript:;">隐藏</a></li></ul>
var aA = document.getElementsByTag("a");for(var i=0; i<aA.length; i++){ aA[i].onclick=function(){ this.parentNode.style.display = "none";
//this指向的应该是节点aA[i]，而他的parentNode应该是li，然后实现隐藏
}
}
offsetParentcss:绝对定位和相对定位？绝对定位的元素，根据谁定位？css中绝对定位的元素是根据已定位的父级元素来进行定位的，如果他的第一父级元素没有绝对定位，那么就会寻找他父级的父级元素，直到找到一个已定位的元素为止（最外层就根据body来进行定位。）绝对定位和相对定位的区别：绝对定位的参照物是已被定为的父级元素；而相对定位的参照物是自身原来的位置，准确的说是未设置left和top值的位置。<div id="div1"> <div id="div2"></div>
</div>设置样式1：父级元素div1没有被定位，所以改变div1的位置，div2不会跟着移动，因为div2绝对定位的参照物是div1的父级body。<style>#div1 {width: 200px; height:200px; background: red; margin:20px;}#div2 {width: 100px; height:100px; background: yellow; position: absolute; left:40px; top: 23px;}</style>设置样式2：父级元素div1已被定位，div2的参照物就是div1的位置，所以该变div1的位置，div2也会跟着移动。<style>#div1 {width: 200px; height:200px; background: red; margin:20px; position:relative; left: 0px; top: 20px;}#div2 {width: 100px; height:100px; background: yellow; position: absolute; left:40px; top: 23px;}</style>offsetParent可以用来获取一个元素用来定位的父级，它指向的是一个对象。<script> var oDiv = document.getElementById("div2");
alert( oDiv.offsetParent);
</script>
firstChild和firstElementChild获取子元素中第一个元素。<body> <ul id="ul1">
<li>1</li> <li>2</li> <li>3</li> </ul></body>
<script> var oUl = document.getElementById("ul1"); if( oUl.firstElementChild){//低版本的IE6-8不能识别标记firstElementChild，但可以识别firstChild oUi.firstElementChild.style.background="red";
}else{//高版本的浏览器能识别的标记firstElementChild，而不能识别firstChild oUi.firstChild.style.background="red"; }</script>获取尾节点：lastChild、lastElementChild获取兄弟节点：nextSibling、nextElementSibling以及previousSibling、previousElementSibling与此类似，但均有兼容性问题。
DOM对元素的操作元素属性操作第一种：oDiv.style.display=“block”;第二种：oDiv.style[“display”]=“block”;第三种：Dom方式
DOM方式操作元素属性获取：getAttribute(名称)设置：setAttribute(名称, 值)删除：removeAttribute(名称)
DOM元素的灵活查找通过元素的className，选出自己想要的元素。<body> <ul id="ul1">
<li class="box"></li>
<li></li> <li></li> <li></li> <li></li> <li class="box"></li> <li class="box"></li> </ul>
</body>
<script> function getByClass(oParent, ClassName){ var oElem = oParent.getElementsByTag("*");
var aResult=[]; for(var i=0; i<oElem.length; i++){ if(oElem[i].className == "box"){ aResult.push( oElem[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>
