如何获取元素节点列表

我目前正在学习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


MM们
浏览 126回答 1
1回答

蝴蝶刀刀

您要选择列表项,因此请使用 (或 ) 选择这些项:querySelectorAllgetElementsByTagName<li>const items = document.querySelectorAll('li');console.log(items[0], items[1], items[2]);<section id="players">&nbsp; <h1>Players</h1>&nbsp; <ol>&nbsp; &nbsp; <li>Alice</li>&nbsp; &nbsp; <li>Bob</li>&nbsp; &nbsp; <li>Cesar</li>&nbsp; </ol></section>如果只需要选择从元素降序的 s,请使用选择器和 : 之间的后代选择器(空格):<li>playersplayersliconst items = document.querySelectorAll('#players li');console.log(items[0], items[1], items[2]);<section id="players">&nbsp; <h1>Players</h1>&nbsp; <ol>&nbsp; &nbsp; <li>Alice</li>&nbsp; &nbsp; <li>Bob</li>&nbsp; &nbsp; <li>Cesar</li>&nbsp; </ol></section>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript