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

最新推荐文章于 2023-05-05 15:00:24 发布

&XYZ&

最新推荐文章于 2023-05-05 15:00:24 发布

阅读量1.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/100991368

版权

JavaScript 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

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>

&XYZ&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
parentElement:返回当前元素的父元素节点（IE不兼容）、children:只返回当前元素的元素子节点、childElementCount、firstElementChild、......

parentElement:返回当前元素的父元素节点（IE不兼容，IE9以下）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>&l...
复制链接

扫一扫