有没有办法只获取top元素的innerText(并忽略子元素的innerText)？

Question

有没有办法只获取top元素的innerText(并忽略子元素的innerText)？

例:

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

如何在忽略"子节点文本"的同时获取"顶级节点文本"？top 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

这将适用于您的示例： 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 3

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'];