Question

我知道有很多方法可以从DOM树中选择一个元素，但是我试图遍历子元素＆＃39;按钮#vertingher-default＆＃39;来自父元素（即div＃container）使用伪类。它没有用，请让我知道它有什么问题。

p[1]

Answer 1

使用这个：

document.querySelectorAll('div#container button:first-child');

你得到div#container里面的所有按钮他们父母的第一个孩子。

您获得空数组的原因是因为您的按钮不是第一个孩子。您之前有一个<h3>标记。

Answer 2

以下作品。 button:nth-of-type将检查仅按钮类型的元素

document.querySelectorAll('div#container button:nth-of-type(1)');

Answer 3

您可以在querySelector button上使用document.getElementById('container').querySelector('button')来获取div中第一个ID为container的按钮。

＆＃13;

var child = document.getElementById('container').querySelector('button');
console.log(child);

＆＃13;

<div id="container">

  <div id="switcher" class="switcher">
    <h3>Style Switcher</h3>
    <button id="switcher-default">
      Default
    </button>
    <button id="switcher-narrow">
      Narrow Column
    </button>
    <button id="switcher-large">
      Large Print
    </button>
  </div>

</div>

＆＃13;

您也可以使用querySelectorAll()，但在这种情况下，您需要按[0]获取第一个按钮：

＆＃13;

var firstChild = document.getElementById('container').querySelectorAll('button')[0];
console.log(firstChild);

＆＃13;

<!-- begin snippet: js hide: false console: true babel: false -->
<div id="container">

  <div id="switcher" class="switcher">
    <h3>Style Switcher</h3>
    <button id="switcher-default">
      Default
    </button>
    <button id="switcher-narrow">
      Narrow Column
    </button>
    <button id="switcher-large">
      Large Print
    </button>
  </div>

</div>

＆＃13;

使用伪类从父级到第一个子元素的遍历不能按预期工作

3 个答案: