Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

document.querySelectorAll get innerText of ALL selected elements at once pure javascript

I want to get all innerText of a whole column of a very long html table (random length). I'm using this code:

var tbEls = document.querySelectorAll('#tBodyID tr td:nth-child(cidx)');

Where cidx = the column index I want to extract content from.

But such code extracts all the td elements (with the innerText inside them of course). But it doesn't extract directly all the innerText inside them. Cause of this I have to reprocess the returned tdEls array with a for loop to extract from each tbEls[i] element its own innerText. It works but...

My question is:

In pure JS (no external libraries or frameworks) is it possible to use a more direct approach improving some way just and only the querySelectorAll parameter ('#tBodyID tr td:nth-child(cidx)') to get directly all the td elements innerText at once and in just one javascript statement and without the need of reprocessing the returned array with the for loop or anything else?

In other words is there a some kind of innerText selector that can be used to get them all at once without any kind of extra loop?

No problem at all if it is not recognized by old browsers, I'm sorry for them.

What I hope to achieve is something like:

var arrTblColInnerText = document.querySelectorAll('#tBodyID tr td:nth-child(cidx):alltd:innerText');

I want to get an array similar to:

0: value from column cidx cell 0
1: value from column cidx cell 1
2: value from column cidx cell 2
3: value from column cidx cell 3
...
n: value from column cidx cell n

Thanks in advance.

like image 542
willy wonka Avatar asked Aug 04 '16 18:08

willy wonka


People also ask

How do you use queryselectorall in JavaScript?

The JavaScript querySelectorAll method is used to select elements in the document using CSS selectors and returns all the matching elements as a list. The method returns a static NodeList (an array-like object) that contains a list of all elements that match the specified selectors or group of selectors.

What is the return type of queryselectorall?

The querySelectorAll () method returns a static NodeList of elements that match the CSS selector. If no element matches, it returns an empty NodeList. Note that the NodeList is an array-like object, not an array object.

How to call the queryselector() method on the document?

You can call the querySelector () method on the document or any HTML element. The following illustrates the syntax of the querySelector () method: let element = parentNode.querySelector (selector); In this syntax, the selector is a CSS selector or a group of CSS selectors to match the descendant elements of the parentNode.

What is the innertext property in JavaScript?

Definition and Usage The innerText property sets or returns the text content of the specified node, and all its descendants. If you set the innerText property, any child nodes are removed and replaced by a single Text node containing the specified string.


2 Answers

The easiest way I found was to convert the nodeList to an array first then use a map:

var nodes = document.querySelectorAll("h3 em");
var list = [].slice.call(nodes);
var innertext = list.map(function(e) { return e.innerText; }).join("\n");
like image 173
Simon Bergot Avatar answered Oct 22 '22 22:10

Simon Bergot


Here's a one-liner from 2021. It says to take the NodeList returned from the querySelectorAll and make it an Array, then map the innerText into an array.

Array.from(document.querySelectorAll("h3 em")).map(x => x.innerText)

like image 12
Neil Guy Lindberg Avatar answered Oct 22 '22 23:10

Neil Guy Lindberg