Question

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

我想要＆＃39; li＆＃39;来自＆＃39; ul＆＃39;

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>

Answer 2

请查看这些方法的文档。它清楚地说了

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

getElementById（）方法返回具有指定值的ID 属性的元素。

所以它应该是

 document.getElementsByTagName("ul")[0].getElementsByTagName("li")

getElementsByTagName（）应用两次不工作

2 个答案: