如何在没有其子项的 innerText 的情况下在 JavaScript 中获取 h1 innerText？答案

【问题标题】：How can I get h1 innerText in JavaScript without the innerText of its child?如何在没有其子项的 innerText 的情况下在 JavaScript 中获取 h1 innerText？
【发布时间】：2020-08-29 06:50:29
【问题描述】：

我想获得<h1> 的innerText，而在跨度内没有innerText...这是页面的HTML：

var title = document.querySelector('div.col-md-8.info-header h1');
title = title && title.innerText;
console.log(title);

<div class="col-md-12 header">
  <div class="col-md-8 info-header">
    <h1> This note is for h1 tag!!!!!! <span> this note is insidespan v226hql!!! </span>
    </h1>
  </div>
</div>

但这将返回<h1> 和<span> 的innerText。

我能做什么？

【问题讨论】：

标签： javascript html css-selectors

【解决方案1】：

选择父节点后，您必须选择其子节点文本节点，并获取该节点的内容：

const h1 = document.querySelector('div.col-md-8.info-header h1');
const text = h1.childNodes[0].textContent;
console.log(text);

<div class="col-md-12 header">
  <div class="col-md-8 info-header">
    <h1> This note is for h1 tag!!!!!! <span> this note is insidespan v226hql!!! </span>
    </h1>
  </div>
</div>

不幸的是，没有办法直接导航到带有查询字符串的文本节点，所以你必须先通过childNodes。

【讨论】：

这不会包含他们想要避免的内部跨度内容吗？
不，您可以按运行代码片段来查看它的运行情况 - 它只会产生 This note is for h1 tag!!!!!! ，正如您在 sn-p 输出控制台中看到的那样。 childNodes[0]选择父节点的第一个子节点，第一个子节点是OP要获取内容的文本节点。
获取不到所有文字，如果h1后面有文字spanel，则不包含。
明白了。我在手机上。它适用于这种特定情况。我一直在笼统地思考。感谢您的解释。

【解决方案2】：

试试这个。

var mainElement = document.getElementById("id_of_h1"),
    innerElements = mainElement.firstChild,
    innerTexts = [];

while (innerElements) {
    if (innerElements.nodeType == 3) {
        innerTexts.push(innerElements.data);
    }
    innerElements = innerElements.nextSibling;
}

var finalResult = innerTexts.join("");

finaresult 将仅包含顶部元素的互文。

【讨论】：

【解决方案3】：

如果你有 <h1>hello <span>another</span> world 并且需要获取除 html 元素之外的所有文本 - hello world 而不是 hello another world，那么你需要这种方式

const h1 = document.querySelector('div.col-md-8.info-header h1');
const el = h1.childNodes;
let result = "";
for(i=0;i<el.length;i++){
   if(el[i].nodeName == '#text'){
     result+=el[i].textContent;
   }
}
console.log(result);

<div class="col-md-12 header">
  <div class="col-md-8 info-header">
    <h1> This note is for h1 tag!!!!!! <span> this note is insidespan v226hql!!! </span> extra text without tag
    </h1>
  </div>
</div>

【讨论】：