JS querySelectorAll 函数没有 select 预期 css class

Question

我尝试 select careerPoints class 和 JavaScript，但是当我键入 querySelectorAll 时，我得到“未定义”。此外，当我键入 querySelector 时，我只能获得循环中的第一个元素。

这是我的代码：

<body>
  <h1>Hi</h1>

  {%for x in range(0, 16)%}
    <ul>
      <li scope="row"><p>Name:</p> {{dataName[x]['firstName']}} {{dataName[x]['lastName']}}</li>
      <li class="points"><p>Career Points</p><p class="careerPoints">{{dataName[x]['careerPoints']}}</p> </li>
      <li class="numbers"><img width="100px" src="{{dataName[x]['headShotUrl']}}" alt="{{dataName[x]['firstName']}} {{dataName[x]['lastName']}}"></li>
      <li class="numbers"><p>Height</p> {{dataName[x]['height']}}</li>
    </ul>
  {%endfor%}

  <script>
    var elements = document.querySelectorAll("careerPoints").text;
    console.log(elements);
   </script>
 </body>

Answer 1

应该是querySelectorAll(".careerPoints").

querySelectorAll 使用 CSS select 或者。在这种情况下 . select 是 class。例如，# 会 select id。

另一个问题是这个（为了方便我添加了 .）。

var elements = document.querySelectorAll(".careerPoints").text;

querySelectorAll returns 一个节点列表，所以你不能只是 select 文本，因为节点列表上没有文本属性（注意：有根本没有 text 属性）。您需要遍历节点列表，然后 select textContent (or innerText which behaves a little differently) from each element. Here's a small example using forEach 将文本记录到控制台。

const elements = document.querySelectorAll(".careerPoints");
elements.forEach(element => console.log(element.textContent));

JS querySelectorAll 函数没有 select 预期 css class

JS querySelectorAll function does not select intended css class

javascript

html

for-loop

queryselector

tagname