javascript - 无法获取 HTMLCollection 长度

Question

我的页面上有几个动态创建的列表元素，我现在的目标是访问所有 <li>在我的页面上使用 getElementsByTagName ，但是当我尝试这样做时，控制台告诉我我的 li 的长度数组是 0 .

我已阅读 getElementsByTagName 上的文档和示例用例但没有跟踪问题。

这是我的代码:

window.addEventListener('DOMContentLoaded', function() {
  let btn = document.querySelector('.sw-btn');
  let content = document.querySelector('.content');
  let filmsList = document.createElement('ul');

  function getFilms() {
    axios.get('https://swapi.co/api/films/').then(res => {
      content.appendChild(filmsList);
      for (var i = 0; i < res.data.results.length; i++) {
        res.data.results.sort(function(a, b) {
          let dateA = new Date(a.release_date),
            dateB = new Date(b.release_date);
          return dateA - dateB;
        });

        (function updateFilms() {
          let addFilm = document.createElement('li');
          filmsList.appendChild(addFilm);

          let addFilmAnchor = document.createElement('a');
          let addFilmId = document.createElement('p');
          let addFilmCrawl = document.createElement('p');
          let addFilmDirector = document.createElement('p');
          let addFilmDate = document.createElement('p');

          addFilmAnchor.textContent = res.data.results[i].title;
          addFilmId.textContent = `Episode ID: ${res.data.results[i].episode_id}`;
          addFilmCrawl.textContent = `Episode description: ${res.data.results[i].opening_crawl}`;
          addFilmDirector.textContent = `Episode director: ${res.data.results[i].director}`;
          addFilmDate.textContent = `Episode release date: ${res.data.results[i].release_date}`;

          addFilm.append(addFilmAnchor, addFilmId, addFilmCrawl, addFilmDirector, addFilmDate);
        })();
      }
    }).catch(err => {
      console.log("An error occured");
    })

    let links = document.getElementsByTagName('li');
    console.log(links.length);
  };

  btn.addEventListener('click', getFilms);
});

body {
  max-height: 100vh;
  padding: 0;
  margin: 0;
  font-family: Muli;
}

body::before {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Star_Wars_Logo.svg/1200px-Star_Wars_Logo.svg.png') no-repeat center / cover;
  background-size: cover;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.1;
}

h1 {
  text-align: center;
  color: #660d41;
  font-size: 3em;
  margin-top: 10px;
  letter-spacing: 1px;
}

main {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.content {
  max-width: 55%;
  overflow-y: scroll;
  max-height: 75vh;
}

ul {
  list-style-type: none;
  padding: 10px 20px;
}

li {
  border-bottom: 1px solid orangered;
  margin-bottom: 30px;
}

li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

a {
  font-size: 1.7em;
  color: #b907d9;
  cursor: pointer;
  margin-bottom: 10px;
}

p {
  font-size: 1.2rem;
  color: #0f063f;
  margin: 10px 0;
}

button {
  padding: .5em 1.5em;
  border: none;
  color: white;
  transition: all 0.2s ease-in;
  background: #da2417;
  border-radius: 20px;
  font-size: 1em;
  cursor: pointer;
  margin-top: 15px;
}

button:focus {
  outline: none;
}

button:hover {
  background: #e7736b;
}

button:active {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7) inset;
}

<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
<h1>Star wars films</h1>
<main>
  <div class="content"></div>
  <button class="sw-btn">Find Films</button>
</main>

这是有关工作的链接 pen 。感谢您的帮助。

Answer 1

所以这里发生的是由异步 ajax 请求引起的典型错误。您正在请求数据，然后根据该数据插入元素。然后，您想要计算元素的数量。

问题是，axios.get 返回的 Promise 不会立即解析，因为正在向另一台服务器发出 HTTP 请求。这显然需要一些时间，因此需要 Promise 接口(interface)的 then 方法。

您想要做的是将计数代码移动到 .then() 方法的末尾，以便在插入元素之后对元素进行计数。

tl;dr，您正在尝试计算在计数时根本不存在的元素。