js-节点关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div id="box">
        <p>我是段落A</p>
        <p id="para">我是段落B</p>
        <p>我是段落C</p>
    </div>


    <script>

         // 关系     考虑所有节点    只考虑元素节点    
    //  子节点       childNodes      children
    // 父节点        parentNode      children
    // 第一个子节点   firstChild      firstElementChild
   // 最后一个子节点 lastChild        lastElementChild
  // 前一个兄弟节点  previousSbibling  previousElementSbibling
   // 后一个兄弟节点  nextSibling       nextElementSibling

       
        var box = document.getElementById('box')
        var para = document.getElementById('para')

        // 所有子节点   NodeList(7) [text, p, text, p#para, text, p, text]
        // console.log(box.childNodes);
        // // 所有的元素子节点(ie9开始兼容)  HTMLCollection(3) [p, p#para, p, para: p#para]
        // console.log(box.children);
 
        // // 只能获取 id 元素
        // console.log(box.children.para);  // <p id="para">我是段落B</p>
       
        // // 第一个子节点
        // console.log(box.firstChild);  // #text
        // console.log(box.firstChild.nodeType);  // 3
        // // 第一个元素子节点 (ie9开始兼容)
        // console.log(box.firstElementChild);   //<p>我是段落A</p>


        // // 最后一个子节点
        // console.log(box.lastChild);  // #text
        // console.log(box.lastChild.nodeType);  // 3

        //  // 最后一个元素子节点 (ie9开始兼容)
        //  console.log(box.lastElementChild);  // <p>我是段落C</p>


         // 父节点
        //  console.log(para.parentNode);   // <div id="box">
        //  console.log(para.parentElement);  // <div id="box">

        // 前一个兄弟节点
        // console.log(para.previousSibling);  // #text
       // 前一个元素兄弟节点 (ie9开始兼容)
        // console.log(para.previousElementSibling); //   <p>我是段落A</p>
   
   
         // 后一个兄弟节点
         console.log(para.nextSibling);  // #text
        // 后一个元素兄弟节点 (ie9开始兼容)
         console.log(para.nextElementSibling); //  <p>我是段落C</p>
   

    </script>
</body>
</html>
posted @ 2021-12-05 12:15  13522679763-任国强  阅读(43)  评论(0)    收藏  举报