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

Question

我有一个 outer 元素，由 document.getElementById 检索（我无法更改这部分，因为 outer 变量是由其他代码传入的）。如何获取其直接子元素class 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 到 "select" 元素 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 上切换 class，同时具有适用于 [= 的直接子元素的 CSS 规则17=] 而 outer 有 class:

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>

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

How to get the first level child element of a DOM element retrieved by document.getElementById in JavaScript?

javascript

dom

parent-child

selector