如何获取另一个元素的elementByClassName

How to get the elementByClassName of another element

本文关键字：另一个 元素 elementByClassName 获取 何获取      更新时间：2023-09-26

如何获取另一个元素的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是一个元素。

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

不，如果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的东西，但可以多填充。Array#forEach是ES5的东西，如果需要，可以为IE8等真正过时的浏览器多填充。）

您可以迭代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");
相关文章：