How can I get h1 innerText in JavaScript without the innerText of its child?

I want to get the innerText of <h1> without the innerText inside the span… this is the HTML of page:

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>

but this will return the innerText of both <h1> and <span>.

what can I do?

Answer

Once you select the parent, you’ll have to select its child text node, and get the contents of that node:

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>

Unfortunately there’s no way to navigate directly to a text node with a query string, so you have to go through the childNodes first.