In this lesson, you'll learn how to interact with the Document using JavaScript. We'll focus on selecting elements with document.getElementById and modifying their content with .textContent.

Selecting Elements with document.getElementById

The document.getElementById method is one of the simplest ways to select an HTML element. This method returns the element with the specified id attribute.

Syntax:

let element = document.getElementById(id);

• id: The id attribute of the element you want to select.
• element: The variable that stores the selected element.

Modifying Content with .textContent

Once you have selected an element, you can manipulate its content using the .textContent property. This property sets or returns the text content of the specified node and all its descendants.

Syntax:

element.textContent = newText; 

• newText: The new text content you want to set for the element.
• element: The variable that references the selected element.

Here’s a complete example demonstrating how to use document.getElementById to select an element and .textContent to modify its content: