dom

JavaScript DOM Manipulation

JavaScript DOM Manipulation

The DOM (Document Object Model) allows JavaScript to interact with HTML elements dynamically.

Selecting Elements

Use document.getElementById or document.querySelector to select elements:

      
        let element = document.getElementById("myElement");
        let anotherElement = document.querySelector(".myClass");

Modifying Elements

Change content or styles of an element:

      
        element.textContent = "Hello!";
        element.style.color = "blue";

Activity

Try It Yourself!

Create a button in HTML. When clicked, change the text of an element on the page.

Quiz

Quick Quiz

  1. What is the DOM?
  2. How do you select an element by ID?
  3. How can you change the text of an element?

Answers: The structure of a webpage; getElementById; use textContent.