Question

关注我的代码：

HTML：

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

JS：

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

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

Answer 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

Answer 2

此代码不言自明： - ）

<li id="li">      getElementById('li') -> #li
<li class="li">   getElementsByClassName('li') -> [.li]
<li>              getElementsByTagName('li') -> [li]

Answer 3

getElementsByClassName使用class属性来标识标记。您应该使用getElementsByTagName("li")

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

Answer 4

只需使用：

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

Answer 5

您已在JS中使用以下代码

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

您需要了解

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

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

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

的数量存在于

Answer 6

<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);

Answer 7

尝试这样的事情

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

<强> document.getElementsByTagName

getElementsByTagName（）方法返回具有指定标记名的元素子元素的集合，作为NodeList对象。

<强> document.getElementsByClassName

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

Answer 8

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

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

检查<ul>中有多少<li>与javascript </ul> </li>

8 个答案: