上の要素だけのinnerTextを取得する方法はありますか？子要素のinnerTextは無視しますか？

Question

top要素だけのinnerTextを取得する方法はありますか？（子要素のinnerTextは無視しますか？）

例：「子ノードのテキストを」無視して「最上位ノードのテキストを」取得する方法

<div> 
    top node text 
    <div> child node text </div> 
</div> 

？上のdivのinnerTextプロパティは、内側と上の両方のテキストの連結を返すようです。

Answer 1

ただ、子ノードを反復し、テキスト・ノードを連結します。

var el = document.getElementById("your_element_id"), 
    child = el.firstChild, 
    texts = []; 

while (child) { 
    if (child.nodeType == 3) { 
     texts.push(child.data); 
    } 
    child = child.nextSibling; 
} 

var text = texts.join(""); 

Answer 2

1. 要素をクローンします。
2. すべての子ノードをループします（競合を避けるために後方に移動します）。
   要素にtagName属性がある場合は、要素です。ノードを削除します。
3. innerTextを使用してテキストコンテンツを取得します（がサポートされていない場合は、textContentにフォールバックしてください）。

コード：

var elem = document.getElementById('theelement'); 
elem = elem.cloneNode(true); 
for (var i=elem.childNodes.length-1; i>=0; i--) { 
    if (elem.childNodes[i].tagName) elem.removeChild(elem.childNodes[i]); 
} 
var innerText = elem['innerText' in elem ? 'innerText' : 'textContent']; 

Answer 3

あなたは子要素の内部テキストを無視したくない場合は、以下を使用します関数：

function getInnerText(el) { 
    var x = []; 
    var child = el.firstChild; 
    while (child) { 
     if (child.nodeType == 3) { 
      x.push(child.nodeValue); 
     } 
     else if (child.nodeType == 1) { 
      var ii = getInnerText(child); 
      if (ii.length > 0) x.push(ii); 
     } 
     child = child.nextSibling; 
    } 
    return x.join(" "); 
} 

Answer 4

これはあなたの例では機能します。 document.getElementById("item").firstChild.nodeValue;

注：あなたがその特定のHTMLを扱っている知っていれば、これが動作することに注意してください。あなたのHTMLは、例えばに、変更することができる場合：

<div> 
    <div class="item"> child node text </div> 
    top node text 
</div> 

あなたはここで@Tim Down

---

することで、より汎用的なソリューションを使用する必要があるコードスニペットを働いている：

window.onload = function() { 
 
    var text = document.getElementById("item").firstChild.nodeValue; 
 
    document.getElementById("result").innerText = text.trim(); 
 
};

#result { 
 
    border: 1px solid red; 
 
}

<div id="item"> 
 
    top node text 
 
    <div> child node text </div> 
 
</div> 
 

 

 

 
<strong>Result:</strong> <div id="result"></div>