如何获取元素节点列表

Question

我目前正在学习 HTML 和 JavaScript，但我无法理解 nodes/elements 以及如何记录它们。我正在参加在线课程，该课程使用机器人更正我的代码。这是我的 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>

我需要创建一个包含三个元素节点的 'array-like' 值：上面 HTML 结构中的每个 'list item' 一个，我需要保存 'array-like' 变量中的值称为 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

Answer 1

您想 select 列表项，因此使用 querySelectorAll（或 getElementsByTagName）到 select 那些 <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>

如果您只需要 select 来自 players 元素的 <li>，请使用后代 selector (a space) players select 或 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>

如何获取元素节点列表

How to get a list of element nodes

html

javascript

arrays

element

nodes