当前位置:Gxlcms > JavaScript > DOM中的parentNode总结

DOM中的parentNode总结

时间:2021-07-01 10:21:17 帮助过:9人阅读

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>parentNode</title>
    <script type="text/javascript">
        "use strict"
        window.onload=function(){
            var oUl=document.getElementById("ul1");
            var nodeList=oUl.childNodes;
            // console.log(nodeList);
            var arr=convertToArray(nodeList,0);
            console.log(arr);
            for(var i=0,len=arr.length;i<len;i++){
                console.log(arr[0].parentNode);
            }
console.log(arr[0].nextSibling);
//第一个子节点是没有previousSibling的
console.log(arr[0].previousSibling);
        }
        function convertToArray(nodes){
            var array=null;
            try{
                array=Array.prototype.slice.call(nodes,0);
            }catch(ex){
                array=new Array();
                for(var i=0,len=nodes.length;i<len;i++){
                    array.push(nodes[i]);
                }
            }
            return array;
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>
</html>

某个父节点的子节点所有的parentNode都是指向同一个节点,以上代码循环打出的,如下:

另外每个子节点都会有nextSibling和preciousSibling,当然,如果是第一个子节点则无previousSibling,而最后一个子节点是没有nextSibling的,返回的结果都是为null

每个子节点的集合中都会有firstChild和lastChild,只有当没有子节点的情况下,这两个值都为null,才相等。

以上就是DOM中的parentNode总结的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行