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获取父级元素和子集元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

2020淘宝618理想生活列车自动领喵币js脚本的代码
这篇文章主要介绍了2020淘宝618理想生活列车自动领喵币脚本,需要先安装 auto.js脚本，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
JavaScript实现移动端拖动元素
这篇文章主要为大家详细介绍了JavaScript实现移动端拖动元素，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
javascript使用Blob对象实现的下载文件操作示例
这篇文章主要介绍了javascript使用Blob对象实现的下载文件操作,结合实例形式分析了javascript使用Blob对象下载文件相关原理、操作技巧与注意事项,需要的朋友可以参考下
2020-04-04
Javascript中字符串replace方法的第二个参数探究
当我们要把一段字符串中的某些指定字符替换掉，第一时间想到的就是replace方法，他的用法很简单，W3school上讲的清晰易懂。网上有关replace的文章也有很多了，那么这篇这里主要聊聊它的第二个参数，下面来一起看看，注意阅读本文需要对replace方法有一定了解。
2016-12-12
Js使用WScript.Shell对象执行.bat文件和cmd命令
这篇文章主要介绍了Js使用WScript.Shell对象执行.bat文件和cmd命令,需要的朋友可以参考下
2014-12-12
快速解决js开发下拉框中blur与click冲突
这篇文章主要帮助大家快速解决js开发下拉框中blur与click冲突,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JS 去前后空格大全(IE9亲测)
本文为大家详细介绍下JS去前后空格及所有空格，代码在IE9环境下测试，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
微信小程序-横向滑动scroll-view隐藏滚动条
本篇文章主要介绍了微信小程序-横向滑动scroll-view隐藏滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
详解JavaScript如何实现更短时间的延时函数
在项目开发中,经常能遇到需要延时执行的需求,比如实现一个定时器功能,本文主要和大家介绍了JS如何实现更短时间的延时函数,需要的可以参考下
2024-03-03
JavaScript常用工具函数大全
这篇文章主要介绍了JavaScript常用工具函数,汇总整理了各种JavaScript常用工具函数,包括获取、判断、转换、设置等相关功能函数的定义与使用方法,需要的朋友可以参考下
2020-05-05