日期:2014-05-16  浏览次数:20520 次

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>