js原生获取某个div下的所有子节点

最新推荐文章于 2024-05-20 11:07:36 发布

小橙几

最新推荐文章于 2024-05-20 11:07:36 发布

阅读量7.5k

点赞数 8

分类专栏：学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_42174938/article/details/122056771

版权

学习笔记专栏收录该内容

12 篇文章

订阅专栏

最终效果:
在这里插入图片描述

<!DOCTYPE html>
<html>
<title>js原生获取某个div下的所有子节点</title>
<head>
<style type="text/css">
#wrapper {
    background-color: pink;
}
#wrapper .row {
    border: 1px solid #000;
}
</style>        
</head>
<body>
    <div id="wrapper">
        <div class="row"><input type="checkbox" value="98" /> <span>什么鬼写法</span></div>
        <div class="row"><input type="checkbox" value="99" /> <span>不会吧</span></div>
        <div class="row"><input type="checkbox" value="100" /> <span>啊这</span></div>
    </div>
</body>
<script>
function doJsFor() {
    var checkedArray = ['99','100']; // 选中的value
    var parentNode = document.getElementById('wrapper'); // 获取到input们的父节点
    var inputArray =  parentNode.getElementsByTagName('input'); // 获取到所有input节点
    for(let i=0;i<inputArray.length; i++){
        for(let j=0;j<checkedArray.length; j++){
            if(inputArray[i].value === checkedArray[j]) {
                inputArray[i].checked = 'checked'; // 动态给input赋值
            }
        }
    }
}
doJsFor();
</script>
</html>在这里插入代码片