Question

我目前正试图弄清楚如何访问以下集合中某个元素的子元素：

var items = document.querySelectorAll(".timeline li");

我一度遍历items，我希望能够访问我收集的li的其中一个子元素。如果我使用items[i]我将获得列表项，但从那里我不知道如何访问其中的范围。

有什么想法吗？

Answer 1

如果我使用物品[i]我将获得列表项目，但从那里我不确定如何访问其中的跨度。

在querySelector

上使用items[i]

var spanEl = items[i].querySelector( "span" );

如果有多个span，请使用querySelectorAll

var spanEls = items[i].querySelectorAll( "span" );

Answer 2

您可以在querySelector上使用items[i]功能。

items[i].querySelector(...)

为什么不直接获取span：

var items = document.querySelectorAll(".timeline li > span");

＆＃13;

var items = document.querySelectorAll(".timeline li > span");
items.forEach(function(span) {
  console.log("Parent: ", span.closest('li').getAttribute("id"));
  console.log(span.textContent);
});

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

<ul class="timeline">
  <li id="li#1">
  <span>
    span#1
  </span>
  </li>
  <li id="li#2">
  <span>
    span#2
  </span>
  </li>
  <li id="li#3">
  <span>
    span#3
  </span>
  </li>
</ul>

＆＃13;

document.querySelectorAll（）访问集合的子节点

2 个答案: