document.querySelectorAll 一次获取所有选定元素的 innerText 纯javascript

Posted 2023-02-21

【中文标题】document.querySelectorAll 一次获取所有选定元素的 innerText 纯javascript

【英文标题】：document.querySelectorAll get innerText of ALL selected elements at once pure javascript

【发布时间】：2016-12-11 00:18:30

【问题描述】：

我想获取一个非常长的 html 表（随机长度）的一整列的所有 innerText。 我正在使用此代码：

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

其中 cidx = 我要从中提取内容的列索引。

但是这样的代码会提取所有的 td 元素（当然，其中包含 innerText）。 但它不会直接提取其中的所有 innerText 。因此，我必须使用 for 循环重新处理返回的 tdEls 数组，以从每个 tbEls[i] 元素中提取其自己的 innerText。它有效，但是......

我的问题是：

在纯 JS（没有外部库或框架）中，是否可以使用更直接的方法改进某种方式仅 querySelectorAll 参数('#tBodyID tr td:nth-child(cidx)') 直接获得所有 td元素 innerText 一次，只在一个 javascript 语句中，而不需要使用 for 循环或其他任何东西重新处理返回的数组？

换句话说，是否有某种 innerText 选择器可以用来一次获取所有内容而无需任何额外的循环？

如果老浏览器不识别完全没有问题，对不起。

我希望达到的目标是：

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

我想得到一个类似的数组：

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

提前致谢。

【问题讨论】：

我认为对这个问题的一个可能的回答是： el.queryselectorall(arguments) 行为“独奏”不能做原始帖子中所要求的事情，因为 queryselectorall 的参数只能是 css 选择器：所以它无法使用 CSS 选择器定位 td 文本节点，因为它们只能定位元素，而文本节点不是元素，而只是节点，因此无法选择。所以，换句话说，循环是必不可少的。

【参考方案1】：

这是 2021 年的单行代码。它表示将从 querySelectorAll 返回的 NodeList 设为一个数组，然后将 innerText 映射到一个数组中。

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

【参考方案2】：

我发现的最简单的方法是先将 nodeList 转换为数组，然后使用映射：

var nodes = document.querySelectorAll("h3 em");
var list = [].slice.call(nodes);
var innertext = list.map(function(e)  return e.innerText; ).join("\n");

【讨论】：

这是一个有趣的方法，比我的短，但是我仍然希望在一个语句中找到每个 innerText，优化 queryselectorAll 参数。不过，我对您的回复投了赞成票，因为它比我的要短。不幸的是，我不确定“slice”、“map”和“join”的组合是否比我用来重新处理 querySelector 的返回值的普通 for 循环更快、更有效。

@willy 您可以将变量内联到单个语句中。我的版本比 for 循环慢，因为它在集合上迭代了 3 次。

使用现代语法，您可以这样做：[...document.querySelectorAll('h3 em')].map(o => o.innerText).join('\n');