JavaScript如何获取父级元素和子级元素代码示例
更新时间：2024年04月27日 10:53:14 作者：浮生_Lee
最近工作中总遇到取各种父啊子啊,每次都得查,所以下面这篇文章主要给大家介绍了关于JavaScript如何获取父级元素和子级元素的相关资料,文中通过代码介绍的非常详细，需要的朋友可以参考下
一、获取父级元素（parentNode）
一个元素只有一个父级元素
语法格式：
元素.parentNode
//获取元素父级
语法格式：A.parentNode //一个元素只有一个父级
样例代码：
var div1 = document.getElementByID('div1');
div1.parentNode.style.width = '100px';
div1.parentNode.parentNode.style.width='200px';
二、获取子级元素（Children）
一个元素可以有多个子级元素，因为一个父级元素可能有多个子级元素，当有多个子级元素的时候需要使用数组来进行表示。
语法格式：
父级元素.children[0]
语法格式：A.children[0] //一个父级元素可以有多个子级元素
var parentDiv = docunment.getElementByID('parentDiv');
parentDiv.children[0].style.width = '200px';
parentDiv.children[1].style.height = '300px';
三、获取子级元素的内容（ChildNodes）
当我们通过children数组来获取子级元素的时候，我们也可以通过childNodes来获取children元素中的文本内容。以带双引号的字符串进行显示。parentDiv.childNodes
A.childNodes[0] //一个父级元素可以有多个子级元素
var parentDiv = docunment.getElementByID('parentDiv');
parentDiv.childNodes[0]
console.log(parentDiv.childNodes[0]);
ex:
<body>
<div id="outerDiv">
99999
<div id="innerDiv">78kkkk5</div>
</div>
</body>
<script>
var outerDiv=document.getElementById('outerDiv');
console.log(outerDiv.childNodes[0]);
</script>
显示结果为：
当我们需要操作子级元素的文本内容的时候，需要使用到data，data本身就有数据的意思。
当我们使用子级.data的时候，会以不带双引号的字符串进行显示。
<body>
<div id="outerDiv">99999
<div id="innerDiv">78kkkk5</div>
</div>
</body>
<script>
var outerDiv=document.getElementById('outerDiv');
console.log(outerDiv.childNodes[0].data);
</script>
显示结果为：
当我们需要通过子级来修改元素的时候，只需要使用子级.data=的形式即可。
<body>
<div id="outerDiv">99999
<div id="innerDiv">78kkkk5</div>
</div>
</body>
<script>
var outerDiv=document.getElementById('outerDiv');
console.log(outerDiv.childNodes[0].data);
outerDiv.childNodes[0].data=123;
</script>
显示结果为：
附：js获取父元素里的所有子元素
<body>
<ul class="uls">
<li><img src="../img/closed.png" />你好</li>
<li><img src="../img/closed.png" />你好</li>
<li><img src="../img/closed.png" />你好</li>
</ul>
</body>
<script>
//先获取
var imgs = document.querySelector('.uls').querySelectorAll('img');
//for循环遍历出每个imgs里的li
for (i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
console.log(1);
}
}
</script>总结
到此这篇关于JavaScript如何获取父级元素和子集元素的文章就介绍到这了,更多相关js获取父级元素和子集元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
uni-app弹出层uni-popup使用及修改默认样式的方法实例
我们在使用uniapp开发的时候,有时可以使用uniapp自有的样式模板,这样可以提高开发效率,下面这篇文章主要给大家介绍了关于uni-app弹出层uni-popup使用及修改默认样式的相关资料,需要的朋友可以参考下2022-11-11
JavaScript 中函数调用有许多独特的变体方式,例如 ~function、-function 等,这些变体不仅展现了 JavaScript 语言的灵活性,也可以在某些场景下让代码更加简洁,本文将通过示例代码和解析,来全面剖析这些特殊的函数调用方式及其返回值的区别2025-01-01
今天小编就为大家分享一篇js jquery 获取某一元素到浏览器顶端的距离实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
js排序动画模拟-插入排序,需要的朋友可以参考下2012-07-07
这篇文章主要介绍了js判断子窗体是否关闭的方法,涉及javascript针对子窗体的获取与属性判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
今天小编就为大家分享一篇关于layui 弹出层一闪而过就消失的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了three.js搭建室内场景教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格，感兴趣的朋友可以参考一下2016-01-01
这篇文章主要介绍了微信小程序实现活动报名登记,本篇将介绍使用微信小程序实现发起一个活动报名的设计，以此为基础，我们可以掌握微信小程序表单的基本用法，进而在诸如疫情信息登记、出入报备等场景中使用小程序进行开发，满足相关的需求，需要的朋友可以参考下2022-09-09
xml 封装与解析 javascript和C#中的分别实现代码。2009-07-07
最新评论