父子节点和父子元素

作者: 椋椋夜色 | 来源:发表于2019-05-10 22:58 被阅读0次

父子节点和父子元素
Element和Node相关方法总结
day10-DOM
5-5 DOM结构操作
DOM 节点操作
对节点的操作-06-03
节点操作--父子节点
树
DOM基础
《数据结构与算法之美》19——二叉树（一）树、二叉树

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 父子节点和父子元素 </title>

</head>

<body>

        子节点：
        childNodes,找到的内容会包括标签、文本、注释等
        子元素：
        children，找到的内容只有标签
        是一个伪数组，伪数组里就保存了所有的子元素 -->

        父节点
        parentNode：找到父节点，其实本质上找到的就是父元素或者说父标签
        因为只有标签才能成为别人的父节点

        父元素
        parentElement：（这个不常用），找到父元素 

<ul>
    <!-- 注释 -->
    <li>隔壁老王1</li>
    <li id="li2">隔壁老王2</li>
    <li>隔壁老王3</li>
    <li>隔壁老王4</li>
    <li>隔壁老王5</li>
</ul>


<script>
    // 子节点
    // 找到ul
    var ulList = document.getElementsByTagName('ul')[0];
    console.log(ulList.childNodes); // ul 里有 13 个子节点;

    console.log(ulList.children); // ul 里有 5 个子元素;

    console.log(ulList.children[2]); // 找到 ul 里下标为 2 的 子元素;

    // 遍历ul给ul里的子元素加背景色
    for (var i = 0; i < ulList.children.length; i++) {
        ulList.children[i].style.backgroundColor = "red";
    }

    // 父节点
    var li2 = document.getElementById('li2');

    console.log(li2.parentNode);  // ul...
    console.log(li2.parentElement); // ul...

    //BODY
    console.log(li2.parentNode.parentNode); // body...
    console.log(li2.parentElement.parentElement); //body...

    //HTML
    console.log(li2.parentNode.parentNode.parentNode);  // html...
    console.log(li2.parentElement.parentElement.parentElement);  // html...


    //document
    console.log(li2.parentNode.parentNode.parentNode.parentNode); // #document
    console.log(li2.parentElement.parentElement.parentElement.parentElement);  // null

</script>

</body>

</html>