The Element Interface

Now that we know how to select and retrieve elements, let's see how to manipulate them. DOM elements come in various types, and their properties change accordingly.

Element Text

The innerText Property

You can retrieve the text of an element with the innerText property of elements:

const h1 = document.querySelector('h1')
const titleText = h1.innerText
console.log(titleText) // Introduction to the DOM

This property retrieves all the text of the element, including the text of nested elements:

const sidebarText = document.querySelector('.aside').innerText
console.log(sidebarText) /*
                           "On this page:
                           Table of Contents for current page
                           The DOM: Document Object Model
                           The document object
                           Retrieving DOM elements
                           document.querySelector() and document.querySelectorAll()
                           The Element interface
                           Element text
                           The innerHTML property
                           Retrieving the value of a user input field
                           A word on checkbox and radio types
                           Events"
                        ​ */

You can easily change the text with this property:

const h1 = document.querySelector('h1')
h1.innerText = 'New uninteresting text'