节点访问关系 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #father{
            width:300px;
            height:300px;
            margin:100px auto;
            background-color: gray;
        }
        #father div{
            width:300px;
            height:50px;
            background-color: blue;
            margin:10px 0;
        }
    </style>
    <script>
        window.onload=function()
        {
            var kid=document.getElementById("kid");

            //父节点
            var father=kid.parentNode;
            father.style.backgroundColor="pink";

            //下一个兄弟节点
            var brother=kid.nextElementSibling||kid.nextSibling; //下一个兄弟节点，兼容性写法，正常浏览器要写在前面
            brother.style.backgroundColor="pink";

            //上一个兄弟节点
            var kid2=document.getElementById("kid2");
            var brothershang=kid2.previousElementSibling||kid2.previousSibling;
            brothershang.style.backgroundColor="pink";

            //子节点,第一个孩子
            var father=document.getElementById("father");
            var kid1=father.firstElementChild||father.firstChild;
            kid1.style.backgroundColor="green";

            //子节点，最后一个孩子
            var kidlast=father.lastElementChild||father.lastChild;
            kidlast.style.backgroundColor="green";
            
            //孩子节点,所有的孩子
            var kidall=father.children;  //children常用，childNodes不常用
            for(var i=0;i<kidall.length;i++)
            {
                if(kidall[i].nodeType==1)       //因为换行也是节点，所有需要利用nodeType==1,获取元素节点，改变所有孩子的背景颜色，否则换行节点没有背景颜色会报错
                {
                    kidall[i].style.backgroundColor="orange";
                }
            }


        }
    </script>
</head>
<body>
<div id="father">
    <div id="kid"></div>
    <div id="kid2"></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

　　

posted @ 2019-07-17 21:00  shanlu  阅读(154)  评论(0)    收藏  举报