If we do console.dir
after selecting an element then we can see that the selected element is actually an object and we can see the object properties.
const h2 = document.querySelector('h2');
console.dir(h2);
//Output - We get many properties
We can use these properties as either getters or setters.
e.g Getter: console.log(h2.textContent); // I am an h2.
Setter: h2.textContent = 'new h2 content';
Difference between textContent and innerText:
Suppose we have the following HTML:
<h2>
I am a heading.
<style>
h2 {
color: red;
}
</style>
</h2>
In JavaScript:
const heading = document.querySelector('h2');
console.log(heading.textContent); // I am a heading. h2 {color: red; }
console.log(heading.innerText); // I am a heading.
Other example for above:
HTML:
<h2>
I am a heading.
<span>
I am hidden!
</span>
</h2>
// We hide the span by display:none
<style>
h2 span {
display: none;
}
</style>
JavaScript:
console.log(heading.textContent); // I am a heading. ↵ I am hidden!
console.log(heading.innerText); // I am a heading.
innerText is aware of CSS styling.
innerHTML: