Get innerHTML from selection

Question

I have the following divs in an HTML page:

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

I'd like to get an array with the text contained in the two divs:

['Bar', 'Baz']

I can do this using d3.nodes but it seems a bit clunky. Is there a smarter way?

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

The answer could be pure Javascript, of course!

Answer 1

var text = [];
document.querySelectorAll(".foo").forEach(function(e){
    text.push(e.textContent);
});