C'è un modo per ottenere innerText solo dell'elemento superiore (e ignorare innerText dell'elemento figlio)?

Question

C'è un modo per ottenere innerText solo dell'elemento superiore (e ignorare il testo interiore dell'elemento figlio)?

Esempio:

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

come ottenere il "testo in alto nodo", ignorando "text nodo figlio"? La proprietà innerText del div superiore sembra restituire la concatenazione sia del testo interno che di quello superiore.

Answer 1

Basta scorrere i nodi figlio e concatenare i nodi di testo:

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. Clona l'elemento.
2. Ciclo attraverso tutti i nodi figlio (indietro, per evitare conflitti):
   Se l'elemento ha un attributo tagName, allora è un elemento: Rimuovere il nodo.
3. Utilizzare innerText per ottenere il contenuto testuale (con fallback su textContent, quando innerText non è supportato).

Codice:

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

Se non si vuole ignorare testo interno del elemento figlio, utilizzare il seguente function:

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

Funzionerà nel tuo esempio: document.getElementById("item").firstChild.nodeValue;

Nota: Tenete a mente che questo funzionerà se si sa che si tratta di quella specifica HTML. Se il codice HTML può cambiare, ad esempio: il codice

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

quindi si dovrebbe utilizzare la soluzione più generico @Tim Down

---

Qui sta lavorando frammento:

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>