用javascript检查 <ul> 中有多少 <li>答案

【问题标题】：Check how many <li> there are in a <ul> with javascript用javascript检查 <ul> 中有多少 <li>
【发布时间】：2013-12-01 04:36:55
【问题描述】：

按照我的代码：

HTML：

<ul id="ul_o">
<li>v1</li>
<li>v2</li>
</ul>

JS：

console.log(document.getElementById("ul_o").getElementsByClassName("LI").length);

为什么控制台中的数字是 0 而不是 2？

【问题讨论】：

标签： javascript html

【解决方案1】：

给 - document.getElementById("ul_o").getElementsByTagName("li").length

要获得更广泛的答案以确保dom 已准备好被JS 访问和更新，我们可以使用类似于html5 中的onreadystatechange 事件-

<html>
<head>
<title>Test</title>
</head>
<body>
<ul id="ul_o">
<li>v1</li>
<li>v2</li>
<li>v3</li>
</ul>
<script type='text/javascript'>
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    document.body.innerHTML = '<h4><code>ul</code> with <i>ul_o</i> has '+document.getElementById("ul_o").getElementsByTagName("li").length +' <code>li</code> Tags</h4>';
  }
}
</script>
</body>
</html>

Fiddle

【讨论】：

忘掉小提琴吧。这是一个直截了当的答案，OP 应该将此标记为解决方案，因为您的答案是第一个答案
@Ishank Dubey，你忘了在这里提一下：上述方法只有在加载 DOM 时才有效
true @Vickey，必须加载 DOM。

【解决方案2】：

getElementsByClassName 使用类属性来识别标签。你应该使用getElementsByTagName("li")

console.log(document.getElementById("ul_o").getElementsByTagName("li").length)

【讨论】：

【解决方案3】：

<ul id="ul_o">
<li class="my-class">v1</li>
<li class="my-class">v2</li>
</ul>

console.log(document.getElementById("ul_o").getElementsByClassName("my-class").length);

【讨论】：

【解决方案4】：

试试这样的

 console.log(document.getElementById("ul_o").getElementsByTagName("LI").length);

document.getElementsByTagName

getElementsByTagName() 方法以 NodeList 对象的形式返回具有指定标记名的元素子元素的集合。

document.getElementsByClassName

返回一组具有所有给定类名的元素

【讨论】：

你为什么用LI而不是li？

【解决方案5】：

您也可以使用querySelectorAll 来获取元素的长度，但请确保在加载 DOM 后调用所有这些方法

document.addEventListener("DOMContentLoaded", function () {
    console.log(document.getElementById("ul_o").querySelectorAll("li").length);
}, false);

【讨论】：

【解决方案6】：

此表一目了然：-)

DOM Element	DOM method	DOM method result type
`<li id="li"></li>`	`getElementById('li')`	`#li`
`<li class="li"></li>`	`getElementsByClassName('li')`	`[.li, ..., .li]`
`<li></li>`	`getElementsByTagName('li')`	`[li, ..., li]`

【讨论】：

【解决方案7】：

只需使用：

document.querySelectorAll("#ul_o li").length

【讨论】：

【解决方案8】：

你在你的 JS 中使用了以下代码

console.log(document.getElementById('ul_o').getElementsByClassName('li').length);

你需要明白

是一个标签名而不是一个类名。类名是分配给标签的属性。例如，

console.log(document.getElementById('ul_o').getElementsByTagName('li').length);

将名称 ClassName 替换为 TagName 您的代码将计算

的数量存在于

【讨论】：

【解决方案9】：

const elem = document.getElementById("ul_o");
console.log(elem.childElementCount);

<ul id="ul_o">
<li>v1</li>
<li>v2</li>
</ul>

【讨论】：