javascript - getElementsByTagName() 应用两次不起作用

Question

<ul id="nav">
    Favorite beverages :
    <li> Tea </li>
    <li> Coffee </li>
    <li> Milk </li>
</ul>

我想要'ul'中'li'的总数

Method 1 : It doesn't work

var val =  document.getElementsByTagName("ul").getElementsByTagName("li");
console.log(val.length);

Method 2 : It works

var val =  document.getElementById("nav").getElementsByTagName("li");
console.log(val.length);

为什么方法 1 不起作用？

Answer 1

因为 document.getElementsByTagName("ul") 返回具有给定标签名称的元素的实时 HTMLCollection。

为了您的理解:

element.getElementsByTagName("li") 是有效方法。

elements.getElementsByTagName("li") 不是有效方法。

var val = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
console.log(val.length);


var val = document.getElementById("nav").getElementsByTagName("li");
console.log(val.length);

<ul id="nav">
  Favorite beverages :
  <li> Tea </li>
  <li> Coffee </li>
  <li> Milk </li>
</ul>

编辑以获取 ul 而不是 li

中的文本

var val = document.getElementById("nav").firstChild.wholeText;
console.log(val);

<ul id="nav">
  Favorite beverages :
  <li> Tea </li>
  <li> Coffee </li>
  <li> Milk </li>
</ul>