如何使用document.querySelector()查找具有特定ID的div中具有特定类名的元素
如何使用document.querySelector()查找具有特定ID的div中具有特定类名的元素
提问于 2022-03-14 23:37:01
在CSS文件中，我可以指定具有特定类名的元素，这些元素位于具有特定ID的div中，如：
<div id="container1">
<div class="innerBox">Box A</div>
<div class="innerBox">Box B</div>
</div>
<div id="container2">
<div class="innerBox">Box C</div>
<div class="innerBox">Box D</div>
</div>#container1 .innerBox {
/* formatting */
}所以在这里，只有方框A和B会被格式化。
我的问题是-在JS文件中，如何使用document.querySelector()来查找具有特定ID的div中具有特定类名的元素？例如：
var selectedItems = document.querySelector("#container1 .innerBox");我对如何格式化这个论点感到困惑。
此外，由于内部类将有所不同，但外部div将始终相同，因此我尝试使用以下代码(未成功)：
function AddItem(boxClass) {
var boxChosen = document.querySelector("#outer-panel ." + boxClass);
}回答 2
Stack Overflow用户
发布于 2022-03-15 00:06:13
我认为您需要querySelectorAll来获得匹配条件的所有元素，然后使用for循环来执行您想做的事情。
function AddItem(boxClass) {
// use `querySelectorAll` to get all elements.
var boxChosen = document.querySelectorAll("#container2 ." + boxClass);
return boxChosen
}
const elements = AddItem("innerBox")
for (let i = 0; i < elements.length; i++) {
// do something you want.
elements[i].style.backgroundColor = 'blue'
console.log(elements[i])
}<div id="container1">
<div class="innerBox">Box A</div>
<div class="innerBox">Box B</div>
</div>
<div id="container2">
<div class="innerBox">Box C</div>
<div class="innerBox">Box D</div>
</div>
Stack Overflow用户
发布于 2022-03-15 00:08:52
它与CSS选择器的工作原理相同。
如果要选择div #container1中包含类#container1的所有元素，请使用querySelectorAll()
document.querySelectorAll("#container1 .innerBox");如果要选择任何div中包含类.innerBox的所有元素
document.querySelectorAll("div .innerBox");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71475378
复制相关文章
相似问题
腾讯云开发者
