javascript - 使用javascript计算html文档中特定类型的标签并将其显示为数字

Question

如何简单地创建一个计数器来对 html 中特定类型的元素进行计数并在 div 中显示计数。例如，计算 li 并显示数字:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<div class="counter">5</div>

Answer 1

您可以使用querySelectorAll(或getElementsByTagName)并获取返回的元素列表的长度属性来计算数量:

document.getElementsByClassName("counter")[0].textContent = document.querySelectorAll("ul > li").length;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<div class="counter"></div>

这使用纯 JavaScript 来获取 li 的数量并将它们插入到 div 中。让我来分解一下:

document.getElementsByClassName("counter")[0]

获取类名为 counter 的第一个 div。接下来，它访问其 textContent 属性，这是元素的内部文本。然后它将其重新分配给:

document.querySelectorAll("ul > li").length

在文档中搜索带有 li 标签的所有元素，这些元素是ul 元素的直接子元素。然后它获取返回的元素列表的长度。