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

这是因为长度在then之外。这意味着您将在页面的第一次呈现时记录空html集合的长度。

将其放入then内，然后将显示正确的值

像这样：

addFilm.append(addFilmAnchor, addFilmId, addFilmCrawl, addFilmDirector, addFilmDate);
let links = document.getElementsByTagName('li');
console.log(links.length);

Answer 2

因此，这里发生的是由异步ajax请求引起的经典错误。您正在请求数据，然后基于该数据插入元素。然后，您要计算元素。

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

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

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

无法获取HTMLCollection的长度

2 个答案: