计算列表项数时出现问题

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操作仅搜索具有所有类的元素。