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，然后实现隐藏
}
}
- offsetParent
css:绝对定位和相对定位？绝对定位的元素，根据谁定位？
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>