Переход от родительского к первому дочернему элементу с использованием псевдокласса не работает должным образом - PullRequest
Новая
       5

Переход от родительского к первому дочернему элементу с использованием псевдокласса не работает должным образом

0 голосов
/ 22 мая 2018

Я знаю, что есть много способов выбрать элемент из дерева DOM, но я пытаюсь перейти к дочернему элементу «button # switcher-default» из родительского элемента (то есть, div # container), используя псевдокласс.Это не работает, пожалуйста, дайте мне знать, что с ним не так. 

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



   <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>

Ответы [ 3 ]

0 голосов
/ 22 мая 2018

Используя это: 

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

Вы получаете все кнопки, которые находятся внутри div#container и первый ребенок их родителя.

Причина, по которой вы получаете пустой массив, в том, что ваша кнопка не первый дочерний элемент.У вас есть тег <h3> до этого.

0 голосов
/ 22 мая 2018

Ниже работает линия.button:nth-of-type проверит элементы только типа кнопки 

document.querySelectorAll('div#container button:nth-of-type(1)');
0 голосов
/ 22 мая 2018

Вы можете просто использовать querySelector на button, как document.getElementById('container').querySelector('button'), чтобы получить первую кнопку внутри div с идентификатором container. 

var child = document.getElementById('container').querySelector('button');
console.log(child);
<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>

Вы также можете использовать querySelectorAll(), но в этом случае вам нужно получить первую кнопку по [0]:

var firstChild = document.getElementById('container').querySelectorAll('button')[0];
console.log(firstChild);
<!-- 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>
...