Question

我刚刚看了Traversy的可过滤列表视频，

我不知道为什么我们应该在getElementsByTagName（“ a”）之后放置[0]

由于HTML文件中只有一个“ a”标签，

我认为我不需要在getElementsByTagName（“ a”）后面加上[0]。

但是没有它就行不通。

请有人给我解释一下

非常感谢

// Get input element

let filterInput = document.getElementById("filterInput");

// Add Event Listener

filterInput.addEventListener("keyup", filterNames);

function filterNames() {
  // Get values of input
  let filterValue = filterInput.value.toUpperCase();

  // Get names ul
  let ul = document.getElementById("names");

  // Get lis from ul
  let li = ul.querySelectorAll("li.collection-item");
  console.log(li);
  // Loop through collection-item lis
  for (let i = 0; i < li.length; i++) {
    let a = li[i].getElementsByTagName("a")[0];
    console.log(a);
    // If matched
    if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

  <title>Filterable List</title>
</head>

<body>
  <div class="container">
    <h1 class="center-align">My Contacts</h1>
    <input type="text" id="filterInput" placeholder="Searchi Names..." />
    <ul id="names" class="collection with-header">
      <li class="collection-header">
        <h5>A</h5>
      </li>
      <li class="collection-item">
        <a href="#">Abe</a>
      </li>
      <li class="collection-item">
        <a href="#">Adam</a>
      </li>
      <li class="collection-item">
        <a href="#">Alan</a>
      </li>
      <li class="collection-item">
        <a href="#">Anna</a>
      </li>
      <li class="collection-header">
        <h5>B</h5>
      </li>
      <li class="collection-item">
        <a href="#">Bob</a>
      </li>
      <li class="collection-item">
        <a href="#">Beth</a>
      </li>
      <li class="collection-item">
        <a href="#">Bill</a>
      </li>
      <li class="collection-item">
        <a href="#">Bread</a>
      </li>
      <li class="collection-header">
        <h5>C</h5>
      </li>
      <li class="collection-item">
        <a href="#">Carrie</a>
      </li>
      <li class="collection-item">
        <a href="#">Cathy</a>
      </li>
      <li class="collection-item">
        <a href="#">Chloe</a>
      </li>
      <li class="collection-item">
        <a href="#">Candy</a>
      </li>
    </ul>
  </div>
  <script src="app.js"></script>
  <!-- <script src="app2.js"></script> -->
</body>

</html>

Answer 1

这是因为getElementsByTagName返回包含指定标签的元素数组。根据文档，您将看到：

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

由于只有一个带有该标签的元素，因此必须添加[0]才能获得它。 “ [0]”对应于集合中的FIRST元素。如果您有第二个元素，则可以使用[1]来获取它，依此类推，就像使用数组一样。

遍历的可过滤列表

1 个答案: