javascript核心技术(二十七)原生JS的标签节点操作(八) 取某元素的所有节点

[复制链接]
查看: 1102|回复: 31
发表于 2023-1-25 13:05:06 | 显示全部楼层 | 阅读模式
在上一节中,我们说过,元素内的换行符也算一个节点,本节我们告诉大家这是为什么,下面先看一下节点对象长什么样。
一、取出某元素的所有节点
<!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">
        <span id="span1">这是span1</span>
        <span id="span2">这是span2</span>
        <span id="span3">这是span3</span>
    </div>
    <div id="box1"></div>
    <div id="box2">

    </div>
</body>
<script>
    var box=document.getElementById('box');
    var nodeobj=box.childNodes;
    console.log(nodeobj);
    console.log(nodeobj[1]);
</script>
</html>

以上我们取出了id为box的div元素的所有节点。
执行结果如下:
javascript核心技术(二十七)原生JS的标签节点操作(八) 取某元素的所有节点

从执行结果中可以看到,其中不仅包含了div中的所有span标签,还有很多text节点,这些text节点在节点中的每一个子节点前后都有。
也就是说,如果我们想要取出div下的第一个span,应该是取其中的第二个子节点,因为第一个子节点是text。
在上面的代码中我们是通过数组的语法取出了div中的第一个子节点span。
其实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">
        <span id="span1">这是span1</span>
        <span id="span2">这是span2</span>
        <span id="span3">这是span3</span>
    </div>
    <div id="box1"></div>
    <div id="box2">

    </div>
</body>
<script>
    var box=document.getElementById('box');
    console.log(box.firstChild);//当前节点的第一个子节点 返回 #text
    console.log(box.lastChild);//当前节点的最后一个子节点 返回 #text
    console.log(box.firstElementChild);//当前节点的第一个元素子节点
    console.log(box.lastElementChild);//当前节点的最后一个元素子节点
</script>
</html>




上面的代码中我们分别使用box节点对象firstChild、lastChild、firstElementChild和lastElementChild属性取出了box节点中的子节点。
执行结果如下:
javascript核心技术(二十七)原生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">
        <span id="span1">这是span1</span>
        <span id="span2">这是span2</span>
        <span id="span3">这是span3</span>
    </div>
    <div id="box1"></div>
    <div id="box2">

    </div>
</body>
<script>
    var span2=document.getElementById('span2');
    console.log(span2.parentElement);//取元素的父节点
    console.log(span2.nextElementSibling);//取当前节点后面的元素节点
    console.log(span2.previousElementSibling);//取当前节点前面的元素节点
</script>
</html>


以上代码中我们先获取了id为span2的节点,然后使用该节点取出了它的父节点和兄弟节点。
执行结果如下:
javascript核心技术(二十七)原生JS的标签节点操作(八) 取某元素的所有节点

ok,以上就是关于取某元素的所有节点以及取子节点和父节点的操作,请大家务必动手练习一下再继续下面的学习。
易博软件介绍

0

主题

21

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-2-19 00:29:10 | 显示全部楼层
我是初学者,启发很大,谢谢这位朋友转载这么好的帖子!!!!

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-3 01:06:49 | 显示全部楼层
我很佩服你的才能啊!我不知道什么时候才能到你那种级别,佩服佩服

1

主题

183

帖子

95

积分

营销菜鸟

Rank: 3Rank: 3

积分
95
发表于 2023-3-12 22:32:30 | 显示全部楼层
这太使我我感动了,作为一个计算机专业的人,我觉的他说的太对了

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-23 00:10:34 | 显示全部楼层
感动啊!让我认清了方向,遗憾的是怎么怎么没在多年前就认识到这点

0

主题

16

帖子

9

积分

营销入门

Rank: 2

积分
9
发表于 2023-3-28 07:04:38 | 显示全部楼层
看过啦,很受感动!!!!!!!!!
发表于 2023-4-2 19:15:05 | 显示全部楼层
太谢谢了....!!  我刚刚进入大学,,,  对编程很迷茫  是你点醒了我!!  谢谢
发表于 2023-4-8 03:31:46 | 显示全部楼层
看你的文章,真的挺受益啊~~~  我以后一定要努力!

0

主题

47

帖子

25

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
25

终身会员

发表于 2023-4-13 01:24:38 | 显示全部楼层
我要学习!!!

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-4-17 16:29:54 | 显示全部楼层
经历过的是最有价值的  能让它与别人分享更好
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表