Question

如何获取另一个元素的elementByClassName？（试图获得title和author）

HTML

<div class="post">
    <div class="top">
        <div class="title">Title 1</div>
    </div>
    <div class="bottom">
        <div class="author">Author 1</div>
    </div>
</div>

的Javascript

我的代码获取了posts的列表：

var list = document.getElementsByClassName("post");

我怎样才能得到title和author假设我不能只创建两个类列表。

list.getElementsByClassName("top").getElementsByClassName("title");

^^这不起作用，因为list是一个元素。

Answer 1

这不起作用，因为list是一个元素。

不，如果list是一个元素，将工作。它不起作用，因为list是元素的集合。

list[0]是一个元素：

list[0].getElementsByClassName("top")

但我建议使用querySelector / querySelectorAll insetad，它允许您使用全范围的CSS选择器（甚至可以在没有getElementsByClassName的IE8上工作）。

var list = document.querySelectorAll(".post");

例如，这会列出每个帖子的title和author：

Array.from(document.querySelectorAll(".post")).forEach(function(post) {
    var title = post.querySelector(".title").innerHTML;
    var author = post.querySelector(".author").innerHTML;
    // ...
});

（Array.from是ES2015的内容，但可以是polyfilled。Array#forEach是ES5的内容，但如果需要，可以为IE8等真正过时的浏览器进行填充。）

Answer 2

您可以迭代getElementsByClassName返回的HTMLCollection中的元素，在每个元素上调用getElementsByClassName并将结果推送到数组。

var elements = [];
[].forEach.call(document.getElementsByClassName("post"), function(el) {
  [].push.apply(elements, el.getElementsByClassName("title"));
  [].push.apply(elements, el.getElementsByClassName("author"));
});

但最好使用querySelectorAll：

var elements = document.querySelectorAll(".post .title, .post .author");

如何获取另一个元素

HTML

的Javascript

2 个答案: