Вопрос по javascript, dom, html, dom-manipulation – Есть ли способ получить innerText только верхнего элемента (и игнорировать innerText дочернего элемента)?

7

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

Пример:

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

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

Сначала удалить нетекстовые прямые дочерние узлы? Oded
@Oded: не нужно. Просто итерируйте по детям и объединяйте. Очень просто. Tim Down

Ваш Ответ

4   ответа
0

используйте следующую функцию:

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(" ");
}
Я что-то упускаю или это противоположность того, что они просят? Tom
11

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("");
@WilliamArdila: правда. Это было верно в 2012 году, за исключением IE <= 8, который к тому времени не исчез. Tim Down
+1 Очевидно, что лучше, чем клонировать то, что может быть очень большим фрагментом дерева DOM, просто отбросить большую его часть. Только улучшение будетtext = [] в начале, а затемtext.push(child.data) за итерацию и, наконец,text = text.join('') в конце, чтобы превратить массив частей в строку, которая имеет тенденцию быть быстрее, чем повторяющиеся конкатенации с постоянно растущей строкой. Daniel Earwicker
@DanielEarwicker: Кажется, что соединение с массивом может быть медленнее в современных браузерах, но намного быстрее в IE 7, который превосходит все, так как ваш самый медленный целевой браузер - это именно то место, где вам действительно нужно повышение производительности. Внесение изменений и дополнения ... Tim Down
@DanielEarwicker: Я обдумал это, но я думаю, что последние тесты, которые я видел, предполагали, что это не было ясно, что это действительно улучшает производительность, поэтому я выбрал более простую версию. Я сейчас проверю. Tim Down
Хороший. PS.data это определено вCharacterData интерфейс, который реализуетсяText (текстовые узлы). Rob W
3

document.getElementById("item").firstChild.nodeValue;

Примечание: имейте в виду, что это будет работать, если вы знаете, что имеете дело с этим конкретным HTML. Если ваш HTML может измениться, например:

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

тогда вы должны использовать более общее решение@ Вниз

Вот рабочий фрагмент кода:

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>

3
Клонировать элемент.Перебрать все дочерние узлы (назад, чтобы избежать конфликтов):
Если элемент имеетtagName атрибут, то это элемент: удалить узел.использование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'];
Нет необходимости клонировать или мутировать DOM вообще. Просто прочитайте текстовый узел детей. Смотри мой ответ. Tim Down
Вау, работает как шарм во всех браузерах. Честно говоря, я не думал, что это было возможно до публикации вопроса :) ... спасибо ... ivymike
Метод @ivymike Тимса лучше. Я предлагаю принять его ответ вместо моего. Он также работает во всех браузерах (протестировано в IE6 +, Chrome 1+, Safari 5, Firefox 3+). Rob W

Похожие вопросы