Retrieve innerText of hidden element

Question

I'm trying to get an element's innerText but Chrome returns an empty string because my element is hidden.

Firefox does not.

Is there a way to retrieve the innerText in Chrome even if the element is invisible?

console.log(document.querySelector('div').innerText + ':' + document.querySelector('div').innerHTML);

div {
  height: 0;
  overflow: hidden;
}

<div>
Hello, I'm <strong>empty!</strong>
</div>

Honestly I'm really surprised Chrome behaves like this, is it a bug?

https://jsfiddle.net/r8q2znc4/

Answer 1

You want to use textContent for this, as it returns text from hidden elements

document.querySelector('div').textContent

The documentation states that

TextContent differs from innerText ...

Internet Explorer introduced node.innerText.
The intention is similar but with the following differences:

While textContent gets the content of all elements, including <script> and <style> elements, innerText does not.

innerText is aware of style and will not return the text of hidden elements, whereas textContent will.

As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not.

This is not a Chrome bug, but rather a Firefox bug, innerText shouldn't return the content of hidden elements.