如何通过querySelector跳过中间步骤获取DOM树中的间接子元素？

当然可以！完全不用像原来那样逐层查找父元素、直接子元素再到间接子元素——querySelector和querySelectorAll的设计本身就支持跨层级查找调用元素下的所有后代节点，不管目标元素在DOM树里嵌套得有多深。

先看你的示例场景 #

你的示例HTML结构（格式化后更清晰）：

<body class="page"> 
  <section class="parent"> 
    <div class="direct-child"> 
      <button type="button" class="direct-child__button"></button> 
      <form class="indirect-child"> 
        <h2 class="indirect-child__title">Something</h2> 
        <input type="text" class="indirect-child__input"> 
        <input type="text" class="indirect-child__input"> 
        <button type="submit" class="indirect-child__button">Submit</button> 
      </form> 
    </div> 
  </section> 
</body>

你原来的JS代码是逐层递进查找：

let pageSelector= document.querySelector(`.page`); //step 1
let parentSelector = pageSelector.querySelector(`.parent`); //step 2
let dChild = parentSelector.querySelector(`.direct-child`); //step 3
let iChild = dChild.querySelector(`.indirect-child`); //step 4
let element = iChild.querySelector(`.indirect-child__input`); //step 5

优化后的写法 #

完全可以跳过步骤3和4，直接从parentSelector出发查找目标元素：

let pageSelector= document.querySelector(`.page`); //step 1
let parentSelector = pageSelector.querySelector(`.parent`); //step 2
// 直接查找parentSelector下所有后代里的.indirect-child__input
let element = parentSelector.querySelector(`.indirect-child__input`);

甚至可以更简化，直接从document出发一步到位：

// 直接在整个文档里找.page .parent下的.indirect-child__input
let element = document.querySelector(`.page .parent .indirect-child__input`);

补充说明 #

• querySelector会返回调用元素下第一个匹配选择器的后代元素
• querySelectorAll会返回调用元素下所有匹配选择器的后代元素，返回的是一个NodeList集合
• 如果担心同名类名冲突，也可以用更精确的层级选择器缩小范围，比如：

  // 指定必须是.direct-child下的.indirect-child里的输入框
  let element = parentSelector.querySelector(`.direct-child .indirect-child .indirect-child__input`);
  

内容的提问来源于stack exchange，提问作者Tahir Ruzbaev