精通JavaScript开发课时11（DOM基础）笔记

一、DOM基础

1、什么是DOM

Document Object Model定义了访问和处理 HTML 文档的标准方法



2、浏览器支持情况

IE 10%

Chrome/Safari 60%

FireFox 99%

二、DOM节点

1、childNodes & nodeType

childNodes在IE6-8下正常，只算元素节点，不算文本节点

文本节点（nodeType==3）

元素节点（nodeType==1）

var oUl=document.getElementById('ul1');

for(var i=0;i<oUl.childNodes.length;i++)
{
//nodeType==3   ->  文本节点
//nodeType==1   ->  元素节点

if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}

另外：

children只包括元素节点，可以用来代替childNodes，更方便

子节点只算第一层，不算子节点的子节点

2、parentNode

例：点击链接，隐藏整个li

var aA=document.getElementsByTagName('a');

for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
this.parentNode.style.display='none';
};
}

3、offsetParent

只读 属性 离当前元素最近的一个有定位属性的父节点：

如果没有定位父级，默认是body

ie7以下，如果当前元素没有定位默认是body，如果有定位则是html

ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上（如zoom:1;)

4、首尾子节点

有上面提到的兼容性问题

firstChild、firstElementChild

lastChild、lastElementChild

例如：

var oUl=document.getElementById('ul1');

//IE6-8
//oUl.firstChild.style.background='red';

//高级浏览器
//oUl.firstElementChild.style.background='red';

if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
}
else
{
oUl.firstChild.style.background='red';
}

5、兄弟节点

有上面提到的兼容性问题

nextSibling、nextElementSibling

previousSibling、previousElementSibling

三、元素属性操作

第一种：oDiv.style.display=“block”;

第二种：oDiv.style[“display”]=“block”;

第三种：DOM方式

var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{
//oTxt.value='asdfasd';
//oTxt['value']='xczcvb';

oTxt.setAttribute('value', 'erwertwert');
};

获取：getAttribute(名称)

设置：setAttribute(名称, 值)

删除：removeAttribute(名称)

四、DOM元素灵活查找

1、用className选择元素

var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}

将以上封装成一个函数：

function getByClass(oParent, sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName('*');

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';
}
};