ドキュメント内のすべてのtextNodeオブジェクトのコレクションを取得する方法はありますか？
getElementsByTagName()Elementsには最適ですが、textNodesはElementsではありません。
更新：これはDOMを歩くことで達成できることを理解しています-以下の多くが示唆しているように。ドキュメント内のすべてのノードを調べるDOM-walker関数を作成する方法を知っています。私はそれを行うためのブラウザネイティブの方法があることを望んでいました。結局のところ<input>、1回の組み込み呼び出しですべてを取得できるのは少し奇妙ですが、すべてを取得できるわけではありませんtextNode。
更新：
1000回の実行でこれら6つのメソッドのそれぞれについていくつかの基本的なパフォーマンステストの概要を説明しました。getElementsByTagNameは最速ですが、すべての要素を選択するわけではなく、特定の種類のタグ（私は思うp）を1つだけ選択し、そのfirstChildがテキスト要素であると盲目的に想定するため、中途半端な仕事をします。少し欠陥があるかもしれませんが、デモンストレーションの目的で、パフォーマンスをと比較するためにありTreeWalkerます。jsfiddleで自分でテストを実行して、結果を確認します。
Text少しの間、すべてのノードをネイティブに取得できるメソッドがあると仮定しましょう。他のDOMノードの場合と同じように、結果の各テキストノードをトラバースし、呼び出しnode.nodeValueて実際のテキストを取得する必要があります。したがって、パフォーマンスの問題は、テキストノードを反復処理することではなく、テキストではないすべてのノードを反復処理してそれらのタイプをチェックすることです。私は（結果に基づいて）それが（getElementsByTagNameが障害者である場合でも）速くはないにしても、TreeWalker同じくらい速く実行されると主張します。getElementsByTagName
各テストを1000回実行しました。 メソッド合計ミリ秒平均ミリ秒 -------------------------------------------------- document.TreeWalker 301 0.301 反復トラバーサー7690.769 再帰的トラバーサー73527.352 XPathクエリ18491.849 querySelectorAll 1725 1.725 getElementsByTagName 212 0.212
各メソッドのソース：
TreeWalker
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;
}
}
}
querySelectorAll
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);
}
}
XPath
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;
}
あなたが特にコレクションを要求したことは知っていますが、それを非公式に意味し、それらがすべて1つの大きな文字列に結合されているかどうかを気にしない場合は、次を使用できます。
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'))
* /
検索と置換、強調表示などに便利です
非推奨になった後createTreeWalkerは、使用できます
/**
* Get all text nodes under an element
* @param {!Element} el
* @return {Array<!Node>}
*/
function getTextNodes(el) {
const iterator = document.createNodeIterator(el, NodeFilter.SHOW_TEXT);
const textNodes = [];
let currentTextNode;
while ((currentTextNode = iterator.nextNode())) {
textNodes.push(currentTextNode);
}
return textNodes;
}
var el1 = document.childNodes[0]
function get(node,ob)
{
ob = ob || {};
if(node.childElementCount)
{
ob[node.nodeName] = {}
ob[node.nodeName]["text"] = [];
for(var x = 0; x < node.childNodes.length;x++)
{
if(node.childNodes[x].nodeType == 3)
{
var txt = node.childNodes[x].nodeValue;
ob[node.nodeName]["text"].push(txt)
continue
}
get(node.childNodes[x],ob[node.nodeName])
};
}
else
{
ob[node.nodeName] = (node.childNodes[0] == undefined ? null :node.childNodes[0].nodeValue )
}
return ob
}
var o = get(el1)
console.log(o)