Есть ли способ получить innerText только верхнего элемента (и игнорировать innerText дочернего элемента)?

Question

Есть ли способ получить innerText только верхнего элемента (и игнорировать innerText дочернего элемента)?

Пример:

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

Как получить «текст верхнего узла»игнорируя "текст дочернего узла"?Свойство innerText верхнего div, кажется, возвращает конкатенацию как внутреннего, так и верхнего текста.

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, когда innerText не поддерживается).

Код:

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

Это будет работать в вашем примере: 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>

Answer 4

function getDirectInnerText(element) {
  var childNodes = element.childNodes;
  result = '';

  for (var i = 0; i < childNodes.length; i++) {
    if(childNodes[i].nodeType == 3) {
      result += childNodes[i].data;
    }
  }

  return result;
}

element = document.querySelector("div#element");
console.log(getDirectInnerText(element))

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

Answer 5

Если вы не хотите игнорировать внутренний текст дочернего элемента, используйте следующую функцию:

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(" ");
}