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

var parentNode = document.getElementById('wrapper');var inputArray =parentNode.getElementsByTagName('input');

小橙几

6892人浏览 · 2021-12-21 10:33:28

小橙几 · 2021-12-21 10:33:28 发布

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

<!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>在这里插入代码片