Как получить список узлов элементов - PullRequest
Новая
       33

Как получить список узлов элементов

0 голосов
/ 07 мая 2020

В настоящее время я изучаю HTML и JavaScript, и у меня проблемы с пониманием узлов / элементов и того, как их регистрировать. Я прохожу онлайн-курс, который исправляет мой код с помощью бота. Это мой файл в HTML с тем, что требуется: 

<body>
    <section id="players">
      <h1>Players</h1>
      <ol>
        <li>Alice</li>
        <li>Bob</li>
        <li>Cesar</li>
      </ol>
    </section>
    <script src="index.js"></script>
  </body>

Мне нужно создать значение типа «массив», которое содержит три узла элементов: по одному для каждого «элемента списка» в HTML структура выше, и мне нужно сохранить значение типа массива в переменной с именем items

Это мой код JavaScript, но он не работает ... 

let items = document.getElementsById('players')
console.log(items[0])

Вывод бота: 

index.js
    ✓ exists
    ✓ is valid JavaScript
    1) defines items such that it contains three elements
    2) defines items such that it contains three list item elements

1 Ответ

0 голосов
/ 07 мая 2020

Вы хотите выбрать элементы списка, поэтому используйте querySelectorAll (или getElementsByTagName), чтобы выбрать эти <li> s: 

const items = document.querySelectorAll('li');
console.log(items[0], items[1], items[2]);
<section id="players">
  <h1>Players</h1>
  <ol>
    <li>Alice</li>
    <li>Bob</li>
    <li>Cesar</li>
  </ol>
</section>

Если вам нужно выбрать только <li> s, которые происходят от элемента players, используйте селектор потомков (пробел) между players селектор и li: 

const items = document.querySelectorAll('#players li');
console.log(items[0], items[1], items[2]);
<section id="players">
  <h1>Players</h1>
  <ol>
    <li>Alice</li>
    <li>Bob</li>
    <li>Cesar</li>
  </ol>
</section>
...