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!

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!

• javascript
• d3.js

• 3 Of the options, I like your way the best. – Mark Commented Jan 15, 2017 at 22:09
• 1 I second the above ment. Your code is better than all provided answers. – Gerardo Furtado Commented Jan 16, 2017 at 4:52
• 1 The only thing I'd change is making it map(d => d.textContent) because you're clearly not interested in getting full, stringified HTML child content, you just want the text in those divs. – Mike 'Pomax' Kamermans Commented May 3, 2023 at 16:57

5 Answers 5

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

Given a few ments to the original post, this seems to be the slickest way (so far!).

Using selection.nodes() gets you access to the DOM elements behind the selection:

var fooDivs = d3.selectAll(".foo").nodes()

You can now use this to get any HTML/CSS property your heart desires, by using the native JavaScript Array.map:

fooDivs.map(function(d) { 
    return d.innerHTML;
});

Or, for those who love one-liners:

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

In pure JS we can achieve this pretty easily by using an array map, which is conveniently built into the Array.from function:

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

console.log(text);

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

Of course, this does require turning the query's static NodeList (which supports forEach, but not map) into a real Array, but that's typically what you want anyway.

This is quite easily possible with vanilla JavaScript (ES6):

let elements = document.querySelectorAll('.foo')

let texts = []

for(let element of elements) {
    texts.push(element.innerText.toLowerCase())
}

console.log(texts)

This outputs ["bar", "baz"], as can be seen here.

ES5 version:

var elements = document.querySelectorAll('.foo')

var texts = []

elements.forEach(function(element) {
    texts.push(element.innerText.toLowerCase())
})

console.log(texts)

This question have very simple answer, you have to use d3.selectAll() and text function like below:

var array=[];
d3.selectAll(".foo").each(function(d,i){
   array.push(d3.select(this).text());
});