0
0

【JavaScript】DOM查询（子节点、父节点、兄弟节点）源码详解

🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
🐳博客主页：苏凉.py的博客
🌐系列总专栏：web前端基础教程
👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂

文章目录

每日推荐

给大家推荐一款神器。无论你是学生党还是上班族都可以使用，这里涵盖了面试题库，在线刷题，各个大厂的面试/笔试真题等。如果你还是学生，最重要的一点就是模拟面试功能，智能AI1v1面试，帮助你早日拿到大厂offer！点击链接即可直达！=>牛客网-找工作神器
在这里插入图片描述

获取元素节点的子节点

  • 通过具体的元素节点调用
  1. getElementsByTagName()方法 返回当前节点的指定标签名的后代节点
document.getElementById('bt4').onclick=function(){//获取id为shouyou的元素节点var shouyou = document.getElementById('shouyou');//获取手游名var games = shouyou.getElementsByTagName('li');for(var i=0;i<games.length;i++){alert(games[i].innerHTML)}}
  1. childNodes属性 表示当前节点的所有子节点,包括空白文本。
document.getElementById('bt5').onclick=function(){//获取id为shouyou的元素节点var shouyou = document.getElementById('shouyou');//获取子节点，包括文本var childnodes = shouyou.childNodes;for(var i =0; i<childnodes.length; i++){alert(childnodes[i].innerHTML)}}
  1. children属性 表示当前节点的所有子元素,不包括空白文本。
document.getElementById('bt6').onclick=function(){//获取id为shouyou的元素节点var shouyou = document.getElementById('shouyou');//获取所有子元素var childNodes2 = shouyou.children;for(var y =0; y <childNodes2.length ; y++){alert(childNodes2[y].innerHTML);}}
  1. firstChild属性 表示当前节点的第一个子节点，包含空白文本。
document.getElementById('bt7').onclick=function(){//获取class为d1的元素节点var d2 = document.getElementsByClassName('d1')[0];//获取div下的第一个子节点var first_child = d2.firstChild;alert(first_child.innerHTML);}
  1. lastChild属性 表示当前节点的最后一个子节点
document.getElementById('bt8').onclick=function(){//获取class为d1的元素节点var d2 = document.getElementsByClassName('d1')[0];var last_child = d2.lastChild;alert(last_child.value);}

实现效果如下，源码放在文末。

实现效果：
在这里插入图片描述

获取父节点和兄弟节点

  • 通过具体的节点调用
  1. parentNode属性 表示当前节点的父节点
document.getElementById('bt9').onclick=function(){//获取id为li2的元素节点var li = document.getElementById('li2');//获取当前元素的父节点var parent = li.parentNode;alert(parent.innerText);}
  1. previousSibling属性 表示当前节点的前一个兄弟节点，包括文本空白。 使用 previousElementSibling属性（IE8及以下浏览器不支持） 表示当前节点的前一个兄弟节点，但不包括文本空白
document.getElementById('bt10').onclick=function(){//获取id为li2的元素节点var li = document.getElementById('li2');// var pre = li.previousSibling;// alert(pre);var pre1 = li.previousElementSibling;alert(pre1.innerHTML);}
  1. nextSibling属性 表示当前节点的后一个兄弟节点，包括文本空白。 使用 previousElementSibling属性（IE8及以下浏览器不支持） 表示当前节点的前一个兄弟节点，但不包括文本空白
document.getElementById('bt11').onclick=function(){//获取id为li2的元素节点var li = document.getElementById('li2');// var next = li.nextSibling;// alert(next.innerHTML);var next1 = li.nextElementSibling;alert(next1.innerHTML);}

实现效果：
在这里插入图片描述

扩展：获取和修改input文本标签中的值

获取value值：

document.getElementById('bt12').onclick=function(){//获取input标签var print = document.getElementById('print');alert(print.value);}

修改value值：

document.getElementById('bt13').onclick=function(){//获取input标签var print = document.getElementById('print');var change =prompt('修改为：');
    print.value = change;}

实现效果：
在这里插入图片描述

全部代码：

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>
        window.onload=function(){//为id=bt1的按钮绑定事件调用函数
            document.getElementById('bt1').onclick=function(){//获取id为li1的节点var li1 = document.getElementById('li1');alert(li1.innerHTML);}//为id=bt2的按钮绑定事件调用函数
            document.getElementById('bt2').onclick=function(){//获取所有livar lis = document.getElementsByTagName('li');for(var i =0;i<lis.length;i++){alert(lis[i].innerHTML)}}//为id=bt3的按钮绑定事件调用函数
            document.getElementById('bt3').onclick=function(){//获取name=gender的节点var genders = document.getElementsByName('gender')for(var i =0;i<genders.length;i++){alert(genders[i].value)}}//为id=bt4的按钮绑定事件调用函数
            document.getElementById('bt4').onclick=function(){//获取id为shouyou的元素节点var shouyou = document.getElementById('shouyou');//获取手游名var games = shouyou.getElementsByTagName('li');for(var i=0;i<games.length;i++){alert(games[i].innerHTML)}}//为id=bt5的按钮绑定事件调用函数
            document.getElementById('bt5').onclick=function(){//获取id为shouyou的元素节点var shouyou = document.getElementById('shouyou');//获取子节点包括文本var childnodes = shouyou.childNodes;for(var i =0; i<childnodes.length; i++){alert(childnodes[i].innerHTML)}}//为id=bt6的按钮绑定事件调用函数
            document.getElementById('bt6').onclick=function(){//获取id为shouyou的元素节点var shouyou = document.getElementById('shouyou');//获取所有子元素var childNodes2 = shouyou.children;for(var y =0; y <childNodes2.length ; y++){alert(childNodes2[y].innerHTML);}}//为id=bt7的按钮绑定事件调用函数
            document.getElementById('bt7').onclick=function(){//获取class为d1的元素节点var d2 = document.getElementsByClassName('d1')[0];//获取div下的第一个子节点var first_child = d2.firstChild;alert(first_child.innerHTML);}//为id=bt8的按钮绑定事件调用函数
            document.getElementById('bt8').onclick=function(){//获取class为d1的元素节点var d2 = document.getElementsByClassName('d1')[0];var last_child = d2.lastChild;alert(last_child.value);}为id=bt9的按钮绑定事件调用函数
            document.getElementById('bt9').onclick=function(){//获取id为li2的元素节点var li = document.getElementById('li2');//获取当前元素的父节点var parent = li.parentNode;alert(parent.innerText);}//为id=bt10的按钮绑定事件调用函数
            document.getElementById('bt10').onclick=function(){//获取id为li2的元素节点var li = document.getElementById('li2');// var pre = li.previousSibling;// alert(pre);var pre1 = li.previousElementSibling;alert(pre1.innerHTML);}//为id=bt11的按钮绑定事件调用函数
            document.getElementById('bt11').onclick=function(){//获取id为li2的元素节点var li = document.getElementById('li2');// var next = li.nextSibling;// alert(next.innerHTML);var next1 = li.nextElementSibling;alert(next1.innerHTML);}//为id=bt12的按钮绑定事件调用函数
            document.getElementById('bt12').onclick=function(){//获取input标签var print = document.getElementById('print');alert(print.value);}//为id=bt13的按钮绑定事件调用函数
            document.getElementById('bt13').onclick=function(){//获取input标签var print = document.getElementById('print');var change =prompt('修改为：');
                print.value = change;}}</script><style>.d1{display: inline-block;margin-left: 100px;margin-top: 100px;background-color: lightblue;}.d1>ol>li{display: inline-block;background-color: antiquewhite;}.d2{display:inline-block;position:absolute;margin-left: 50px;margin-top: 100px;}.d2>button{display: block;}</style></head><body><divclass="d1"><p>端游列表</p><ol><liid="li1">英雄联盟</li><liid="li2">QQ飞车</li><li>魔兽争霸</li><li>地下城</li></ol><p>手游列表</p><olid="shouyou"><li>原神</li><li>王者荣耀</li><li>qq飞车手游</li></ol><span>性别：</span>
        男<inputtype="radio"name="gender"value="男">
        女<inputtype="radio"name="gender"value="女"><br>
        输入内容：<inputtype="text"id="print"value="在这里输入内容！"></div><divclass="d2"><buttonid="bt1">获取id为li1的节点 </button><buttonid="bt2">获取所有li</button><buttonid="bt3">获取name=gender所有节点</button><buttonid="bt4">获取手游</button><buttonid="bt5">获取手游所有子节点</button><buttonid="bt6">获取所有子元素</button><buttonid="bt7">获取div下的第一个子节点</button><buttonid="bt8">获取div下的最后一个节点</button><buttonid="bt9">获取当前节点的父节点</button><buttonid="bt10">获取当前节点的前一个兄弟节点</button><buttonid="bt11">获取当前节点的后一个兄弟节点</button><buttonid="bt12">返回input中的value值</button><buttonid="bt13">修改input中的value值</button></div></body></html>

关于DOM查询到这里就差不多了，欢迎在评论区补充，订阅专栏不迷路，持续更新中…

更多题库和知识点总结，面试技巧请看=>牛客网，快来和我一起刷题吧！

标签： javascript 前端 开发语言
本文转载自: https://blog.csdn.net/weixin_46277553/article/details/125573378
版权归原作者 苏凉.py 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【JavaScript】DOM查询（子节点、父节点、兄弟节点）源码详解”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

基于javaweb jsp ssm的农产品质量安全检测网站设计与实现+vue录像(源码+lw+部署文档+讲解等)

ViewControllerPresentationSpy：iOS单元测试的利器

如何在vscode里联动overleaf畅快编辑LaTeX?

⭐️Visual Studio Code汉化教程（Visual Studio Code怎么汉化设置改成为中文）

Unity 中的 UI 布局和动画

新一代JumpServerv3.0开源堡垒机解读-文件的批量传输与批量下载

RabbitMQ之基于注解声明队列交换机：使用@RabbitListener实现消息监听

文章导航