parentElement:返回当前元素的父元素节点（IE不兼容）、children:只返回当前元素的元素子节点、childElementCount、firstElementChild、......-蒲公英云

parentElement:返回当前元素的父元素节点（IE不兼容）、children:只返回当前元素的元素子节点、childElementCount、firstElementChild、......

墨蓝 2024-04-19 13:15 119阅读 0赞

parentElement:返回当前元素的父元素节点（IE不兼容，IE9以下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <strong></strong>
    <span></span>
    <p></p>
</div>
</body>
<script>
    /*
    基于元素节点树的遍历：
        parentElement:返回当前元素的父元素节点（IE不兼容）
     */
    const strong = document.getElementsByTagName('strong')[0];
    console.log(strong.parentElement)
</script>
</html>

children:只返回当前元素的元素子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <strong></strong>
    <span></span>
    <p></p>
</div>
</body>
<script>
    /*
    基于元素节点树的遍历：
        children:只返回当前元素的元素子节点
     */
    const div = document.getElementsByTagName('div')[0];
    console.log(div.children)//HTMLCollection(3) [strong, span, p]
</script>
</html>

childElementCount:当前元素节点子元素的个数，（请直接用children.length,同样可以得到个数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <strong></strong>
    <span></span>
    <p></p>
</div>
</body>
<script>
    /*
    基于元素节点树的遍历：
        childElementCount:当前元素节点子元素的个数
        （请直接用children.length,同样可以得到个数）
     */
    const div = document.getElementsByTagName('div')[0];
    console.log(div.childElementCount);//3
    console.log(div.children.length)//3
</script>
</html>

firstElementChild:返回的是第一个元素节点（IE不兼容，IE9以下） lastElementChild:返回的是最后一个元素节点（IE不兼容，IE9以下） nextElementSibling:返回后一个兄弟元素节点 previousElementSibling:返回前一个兄弟元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <strong></strong>
    <span></span>
    <p></p>
    <em></em>
    <a></a>
    <i></i>
    <q></q>
</div>
</body>
<script>
    /*
    基于元素节点树的遍历：
        firstElementChild:返回的是第一个元素节点（IE不兼容，IE9以下）
        lastElementChild:返回的是最后一个元素节点（IE不兼容，IE9以下）
        nextElementSibling:返回后一个兄弟元素节点
        previousElementSibling:返回前一个兄弟元素节点
     */
    const div = document.getElementsByTagName('div')[0];
    console.log(div.firstElementChild);//<strong></strong>
    console.log(div.lastElementChild);//<q></q>
    const a = document.getElementsByTagName('a')[0];
    console.log(a.nextElementSibling);//<i></i>
    console.log(a.previousElementSibling);//<em></em>
</script>
</html>