javascript - Traversy 的可过滤列表

问题描述

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

我不知道为什么我们应该把 [0] 放在 getElementsByTagName("a") 之后

由于 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>

标签： javascriptarraysdom

javascript - Traversy 的可过滤列表

问题描述

解决方案

推荐阅读