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.