如何在JavaScript中获取document.getElementById检索到的DOM元素的一级子元素

Question

我有一个由document.getElementById检索的outer元素(我不能更改此部分，因为outer变量是由其他代码传入的(。如何获取其具有类inner的直接子元素？我已经尝试过outer.querySelectorAll(".inner")，它将获得所有.inner元素(见下面的演示(。我只想要直接子项，并且有.inner。我也试过outer.querySelectorAll("> .inner")，但它不起作用。我该怎么做？

var outer = document.getElementById("outer");
var all = outer.querySelectorAll(".inner");
all.forEach(function(e){
e.style.border = "1px solid red";
});

<div id="outer">
<div class="inner">inner</div>
<div id="test">
<div class="inner">inner2</div>
</div>
</div>

Answer 1

如果outer已经在变量中，则可以在查询字符串的开头使用:scope和querySelectorAll来"选择"调用querySelectorAll的元素：

var outer = document.getElementById("outer");
outer.querySelectorAll(":scope > .inner").forEach((e) => {
e.style.border = "1px solid red";
});

<div id="outer">
<div class="inner">inner</div>
<div id="test">
<div class="inner">inner2</div>
</div>
</div>

如果不必在变量中已经有outer，那么使用普通查询字符串#outer > .inner:会更容易

document.querySelectorAll("#outer > .inner").forEach((e) => {
e.style.border = "1px solid red";
});

<div id="outer">
<div class="inner">inner</div>
<div id="test">
<div class="inner">inner2</div>
</div>
</div>

与其在所有子元素上迭代，另一种方法是在outer上切换一个类，同时具有一个CSS规则，该规则适用于outer的直接子元素，而outer具有该类：

document.querySelector('#outer').classList.add('red');

#outer.red > .inner {
border: 1px solid red;
}

<div id="outer">
<div class="inner">inner</div>
<div id="test">
<div class="inner">inner2</div>
</div>
</div>