javascript DOM节点(一)

1、childNodes  nodeType 获取子节点(有兼容问题,用nodeType来判断)

——children 获取子节点(无兼容问题)

<ul id="ul1">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>
<script>
var oUl = document.getElementById("ul1");
alert(oUl.childNodes.length); 
/*IE6,7,8下弹出3,其他弹出7
用nodeType检测(元素节点)
用oUl.childNodes[0].nodeType == 1 来判断是否是元素element
元素节点        节点类型取值(nodeType)
元素element        1
属性attr        2
文本text        3
注释comments    8
文档document    9
*/
alert(oUl.children.length); //弹出3

2、parentNode 父节点  offsetParent获取有定位属性的父级节点

<div id="div1" style="position:relative;">
    <div id="div2">
        <div id="div3"></div>
        <div id="div4" style="position:absolute;"></div>
    </div>
</div>
<script>
var oDiv3 = document.getElementById("div3");
var oDiv4 = document.getElementById("div4");
alert(oDiv3.parentNode.id);//div2
alert(oDiv3.offsetParent.id);//div1
alert(oDiv4.parentNode.id);//div2
alert(oDiv4.offsetParent.id);//div1
</script>
原文地址:https://www.cnblogs.com/qiangspecial/p/2984698.html