有没有办法获取textNode文档中所有对象的集合？
getElementsByTagName()适用于 Elements，但textNodes 不是 Elements。
更新：我意识到这可以通过遍历 DOM 来完成 - 正如下面许多建议的那样。我知道如何编写一个 DOM-walker 函数来查看文档中的每个节点。我希望有一些浏览器原生的方式来做到这一点。毕竟，我可以<input>通过一个内置调用获取所有s，但不是所有textNodes ，这有点奇怪。
getElementsByTagName() 等效于 textNodes
IT技术
javascript
dom
dhtml
textnode
2021-01-29 23:34:48
6个回答
更新：
我已经概述了超过 1000 次运行的这 6 种方法中的每一种的一些基本性能测试。getElementsByTagName是最快的，但它做了一半的工作，因为它没有选择所有元素，而是只选择一种特定类型的标签（我认为p）并且盲目地假设它的 firstChild 是一个文本元素。它可能没有什么缺陷，但用于演示目的并将其性能与TreeWalker. 自己在 jsfiddle 上运行测试以查看结果。
- 使用树行者
- 自定义迭代遍历
- 自定义递归遍历
- Xpath 查询
- 查询选择器全部
- getElementsByTagName
让我们暂时假设有一种方法可以让您Text本地获取所有节点。您仍然需要遍历每个结果文本节点并调用node.nodeValue以获取实际文本，就像处理任何 DOM 节点一样。所以性能问题不在于遍历文本节点，而是遍历所有非文本节点并检查它们的类型。我认为（基于结果）它的TreeWalker执行速度与 一样快getElementsByTagName，如果不是更快的话（即使 getElementsByTagName 播放有障碍）。
每个测试运行 1000 次。 方法 总计 ms 平均 ms -------------------------------------------------- 文档.树行者 301 0.301 迭代遍历器 769 0.769 递归遍历器 7352 7.352 XPath 查询 1849 1.849 querySelectorAll 1725 1.725 getElementsByTagName 212 0.212
每种方法的来源：
树行者
function nativeTreeWalker() {
var walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
null,
false
);
var node;
var textNodes = [];
while(node = walker.nextNode()) {
textNodes.push(node.nodeValue);
}
}
递归树遍历
function customRecursiveTreeWalker() {
var result = [];
(function findTextNodes(current) {
for(var i = 0; i < current.childNodes.length; i++) {
var child = current.childNodes[i];
if(child.nodeType == 3) {
result.push(child.nodeValue);
}
else {
findTextNodes(child);
}
}
})(document.body);
}
迭代树遍历
function customIterativeTreeWalker() {
var result = [];
var root = document.body;
var node = root.childNodes[0];
while(node != null) {
if(node.nodeType == 3) { /* Fixed a bug here. Thanks @theazureshadow */
result.push(node.nodeValue);
}
if(node.hasChildNodes()) {
node = node.firstChild;
}
else {
while(node.nextSibling == null && node != root) {
node = node.parentNode;
}
node = node.nextSibling;
}
}
}
查询选择器全部
function nativeSelector() {
var elements = document.querySelectorAll("body, body *"); /* Fixed a bug here. Thanks @theazureshadow */
var results = [];
var child;
for(var i = 0; i < elements.length; i++) {
child = elements[i].childNodes[0];
if(elements[i].hasChildNodes() && child.nodeType == 3) {
results.push(child.nodeValue);
}
}
}
getElementsByTagName（障碍）
function getElementsByTagName() {
var elements = document.getElementsByTagName("p");
var results = [];
for(var i = 0; i < elements.length; i++) {
results.push(elements[i].childNodes[0].nodeValue);
}
}
路径
function xpathSelector() {
var xpathResult = document.evaluate(
"//*/text()",
document,
null,
XPathResult.ORDERED_NODE_ITERATOR_TYPE,
null
);
var results = [], res;
while(res = xpathResult.iterateNext()) {
results.push(res.nodeValue); /* Fixed a bug here. Thanks @theazureshadow */
}
}
此外，您可能会发现此讨论很有帮助 - http://bytes.com/topic/javascript/answers/153239-how-do-i-get-elements-text-node
这是Iterator最快的 TreeWalker 方法的现代版本：
function getTextNodesIterator(el) { // Returns an iterable TreeWalker
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
walker[Symbol.iterator] = () => ({
next() {
const value = walker.nextNode();
return {value, done: !value};
}
});
return walker;
}
用法：
for (const textNode of getTextNodesIterator(document.body)) {
console.log(textNode)
}
更安全的版本
如果在循环时移动节点，直接使用迭代器可能会卡住。这样更安全，它返回一个数组：
function getTextNodes(el) { // Returns an array of Text nodes
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
const nodes = [];
while (walker.nextNode()) {
nodes.push(walker.currentNode);
}
return nodes;
}
我知道你特别要求一个集合，但如果你只是非正式的意思并且不在乎它们是否全部连接成一个大字符串，你可以使用：
var allTextAsString = document.documentElement.textContent || document.documentElement.innerText;
...第一项是 DOM3 标准方法。但是请注意，innerText在支持它的实现（至少 IE 和 Chrome）中似乎排除了脚本或样式标记内容，同时textContent包含它们（在 Firefox 和 Chrome 中）。
这是一个更惯用且（希望）更容易理解的替代方法。
function getText(node) {
// recurse into each child node
if (node.hasChildNodes()) {
node.childNodes.forEach(getText);
}
// get content of each non-empty text node
else if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent.trim();
if (text) {
console.log(text); // do something
}
}
}
document.deepText= function(hoo, fun){
var A= [], tem;
if(hoo){
hoo= hoo.firstChild;
while(hoo!= null){
if(hoo.nodeType== 3){
if(typeof fun== 'function'){
tem= fun(hoo);
if(tem!= undefined) A[A.length]= tem;
}
else A[A.length]= hoo;
}
else A= A.concat(document.deepText(hoo, fun));
hoo= hoo.nextSibling;
}
}
return A;
}
/* 您可以返回某个父元素的所有后代文本节点的数组，或者您可以向它传递一些函数并对原位文本执行某些操作（查找或替换或其他操作）。
此示例返回正文中非空白文本节点的文本：
var A= document.deepText(document.body, function(t){
var tem= t.data;
return /\S/.test(tem)? tem: undefined;
});
alert(A.join('\n'))
*/
方便搜索和替换，突出显示等