如何获取JavaScript中document.getElementById检索的DOM元素的第一级子元素？ [重复]

Question

此问题已经在这里有了答案：

Using querySelectorAll to retrieve direct children（10个回答）

关闭10分钟前。

我有一个由outer检索的document.getElementById元素（由于其他代码传递了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上切换一个类，同时具有适用于outer的直接子元素而outer具有该类的CSS规则：

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>