有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？

Posted 2023-03-07

【中文标题】有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？

【英文标题】：Is there a way to get innerText of only the top element (and ignore the child element's innerText)?

【发布时间】：2012-03-09 13:44:58

【问题描述】：

例子：

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

如何在忽略“子节点文本”的情况下获取“顶部节点文本”？顶部 div 的 innerText 属性似乎返回内部顶部文本的串联。

【问题讨论】：

先去掉非文本直接子节点？

@Oded：不需要。只需遍历孩子并连接。轻松愉快。

【参考方案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("");

【讨论】：

+1 显然比克隆可能很大的 DOM 树要好，只是丢弃其中的大部分。唯一的改进是在开始时text = []，然后是每次迭代的text.push(child.data)，最后是text = text.join('')，将数组片段转换为字符串，这往往比重复连接更快。字符串。

不错的一个。 PS。 data是在CharacterData接口中定义的，由Text（文本节点）实现。

@DanielEarwicker：似乎数组连接在现代浏览器中可能会更慢，但在 IE 7 中速度更快，因为你最慢的目标浏览器是你真正需要性能提升的地方，所以它胜过一切。修改...

可以使用 Node.TEXT_NODE Source 代替 3 （参见命名常量）

@WilliamArdila：是的。 2012 年确实如此，但 IE

【参考方案2】：

这将适用于您的示例： document.getElementById("item").firstChild.nodeValue;

注意：请记住，如果您知道自己正在处理特定的 html，这将起作用。如果您的 HTML 可以更改，例如：

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

那么您应该使用@Tim Down 提供的更通用的解决方案

---

这里是工作代码 sn-p:

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 获取文本内容（在不支持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'];

【讨论】：

哇，在所有浏览器中都像魅力一样工作。坦率地说，在发布问题之前我认为这是不可能的：）......谢谢......

根本不需要克隆或改变 DOM。只需阅读文本节点子项。看我的回答。

@ivymike Tims 的方法更好。我建议接受他的回答而不是我的回答。它也适用于所有浏览器（在 IE6+、Chrome 1+、Safari 5、Firefox 3+ 中测试）。

【参考方案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>

【参考方案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(" ");

【讨论】：

我是否遗漏了什么，或者这与他们的要求相反？