上一节，我们学会了如何查找某个DOM，而我们平时经常会用到，查找某个节点的子节点，或者查找某个节点的父节点

查找子节点 children

• 通过父节点的children属性访问所有子节点

• children是一个数组，需要遍历操作每个节点

<div id="demo">
    <p></p>
    <p></p>
</div>


<script>
    var demo=document.getElementById("demo").children;
    for(var i=0;i<demo.length;i++){
        demo[i].innerHTML="测试"
    }
</script>

通过查找children的children，可以访问孙子节点

var demo=document.getElementById("demo").children[0].children;

查找父节点 parentNode

• 通过parentNode查找某个节点的上一层父节点

<div id="parent">
    <p id="child"><span>child的child</span></p>
    <p>123</p>
</div>


<script>
    var demo=document.getElementById("child").parentNode;
    demo.innerHTML="ceshi"
</script>

• 通过parentNode的parentNode，查找“爷爷”节点

var demo=document.getElementById("child").parentNode.parentNode;

查找第一个子节点 firstElementChild

<div id="parent">
    <p>123</p>
    <p>123</p>
</div>


<script>
    var demo=document.getElementById("parent").firstElementChild; //查找到第一个P元素
    demo.innerHTML="ceshi"; //第一个P元素的内容被修改  
</script>

查找最后一个子节点 lastElementChild

var demo=document.getElementById("parent").lastElementChild;

查找下一个兄弟节点 nextElementSibling

var demo=document.getElementById("child").nextElementSibling;

查找上一个兄弟节点 previousElementSibling

var demo=document.getElementById("child").previousElementSibling;

查找所有兄弟节点

• 通过查找父节点的所有子节点，来实现查找兄弟节点

• 需要手动把当前节点去掉

<div id="parent">
    <p >123</p>
    <p id="child">123</p>
    <p>123</p>
</div>


<script>
    var demo=document.getElementById("child").parentNode.children;
    for(var i=0;i<demo.length;i++){
        if(demo[i].id!="child"){   //排除自己
            demo[i].innerHTML="测试"
        }
        
    }
</script>