如何在没有子类的innerText的情况下在JavaScript中获得h1 innerText？

Question

我想获取<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>

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

我该怎么办？

Answer 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。

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