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.
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.
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.
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.
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.
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");
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With