本文介绍JavaScript中获取父级和子级元素的方法。通过parentNode获取单一父节点，利用children数组访问多个子元素，并使用childNodes结合data属性读取或修改子级文本内容，附带完整代码示例。
一、获取父级元素（parentNode）
在DOM结构中，每个元素仅对应一个直接的父级元素。
语法格式： 元素.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方式访问时，返回的是不带双引号的纯字符串内容。
<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获取父级元素和子集元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！