从选择中获取innerHTML

Question

我div在 HTML 页面中有以下内容：

<div class="foo">Bar</div>
<div class="foo">Baz</div>

我想得到一个包含在两个divs 中的文本的数组：

['Bar', 'Baz']

我可以使用d3.nodes它来做到这一点，但它似乎有点笨拙。有没有更聪明的方法？

d3.selectAll(".foo").nodes().map(function(d) { return d.innerHTML; });

答案当然可以是纯 Javascript！

Answer 1

在纯 JS 中，我们可以通过使用数组映射轻松实现这一点，该数组映射方便地内置于Array.from函数中：

const text = Array.from(
  document.querySelectorAll(".foo"),
  e => e.textContent
);

console.log(text);

<div class="foo">Bar</div>
<div class="foo">Baz</div>

当然，这确实需要将查询的静态 NodeList（支持forEach，但不支持map）转换为真正的数组，但这通常是您想要的。