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: