如何在 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 已经在变量中，您可以在带有querySelectorAll 的查询字符串的开头使用:scope 来“选择”正在调用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 的直接子元素的CSS 规则，而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>