javascript - 计算列表项数量的问题

Question

我有一个难题。基本上，我试图获取卡片列表的长度并做一些断言来验证卡片的数量是否等于 2。出于某种原因，我得到：

Uncaught TypeError: document.getElementsByClassName(...).getElementsByTagName is not a function

这是代码的样子：

<ul class="UserPaymentsContent__cardList" style="">
<li class="UserPaymentsContent__cardList__item" >
</li>
<li class="UserPaymentsContent__cardList__item" >
</li>
</ul>

这是我运行的代码：

console.log(document.getElementsByClassName("UserPaymentsContent__cardList UserPaymentsContent__cardList__item").getElementsByTagName("li").length)

Answer 1

您可以使用document.querySelectorAll

const lis = document.querySelectorAll('.UserPaymentsContent__cardList__item');

console.log(lis.length);

<ul class="UserPaymentsContent__cardList" style="">
  <li class="UserPaymentsContent__cardList__item" >
  </li>
  <li class="UserPaymentsContent__cardList__item" >
  </li>
</ul>

Answer 2

document.getElementsByClassName("UserPaymentsContent__cardList")[0].children.length

这应该适合您的目的。document.getElementsByClassName("UserPaymentsContent__cardList")为您提供 HTMLCollection 对象数组。第一个元素是您正在寻找的ul父对象。

Answer 3

此错误告诉您，类查询未找到任何元素。

问题似乎是您正在搜索具有一类或另一类的元素。getElementByClass 操作仅搜索具有所有类的元素。