javascript - 如何在没有其子项的 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>

我能做些什么？

标签： javascripthtmlcss-selectors

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一个。