其他分享
首页 > 其他分享> > js-节点关系

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>

标签:关系,box,console,log,para,text,js,节点
来源: https://www.cnblogs.com/eric-share/p/15645125.html