Lesson 7: DOM Manipulation in JavaScript

The Document Object Model (DOM) represents the structure of a web page as a tree of objects. JavaScript can be used to interact with and manipulate the DOM to change the content, structure, and style of the page.

Accessing Elements

1. getElementById()

This method returns the element that has the ID attribute with the specified value.

      const element = document.getElementById("myElement");
          

Example of getElementById:

      <div id="myElement">Hello World!</div>
      
      const element = document.getElementById("myElement");
      console.log(element.innerHTML); // Output: Hello World!
              

2. getElementsByClassName()

This method returns a live HTMLCollection of elements with the specified class name.

      const elements = document.getElementsByClassName("myClass");
          

Example of getElementsByClassName:

      <div class="myClass">Item 1</div>
      <div class="myClass">Item 2</div>
      
      const elements = document.getElementsByClassName("myClass");
      console.log(elements[0].innerHTML); // Output: Item 1
              

3. querySelector() and querySelectorAll()

These methods allow you to select elements using CSS selectors.

      const element = document.querySelector(".myClass");
      const elements = document.querySelectorAll("p");
          

Example of querySelector and querySelectorAll:

      <p class="myClass">Paragraph 1</p>
      <p>Paragraph 2</p>
      
      const element = document.querySelector(".myClass");
      console.log(element.innerHTML); // Output: Paragraph 1
      
      const elements = document.querySelectorAll("p");
      console.log(elements.length); // Output: 2
              

Modifying Elements

1. Changing Content

Modify the content of an element using the innerHTML or textContent properties.

      element.innerHTML = "New Content";
      element.textContent = "New Content";
          

Example of Changing Content:

      <div id="myDiv">Old Content</div>
      
      const myDiv = document.getElementById("myDiv");
      myDiv.innerHTML = "New Content";
              

2. Changing Attributes

Modify the attributes of an element using the setAttribute method.

      element.setAttribute("attributeName", "value");
          

Example of Changing Attributes:

      <img id="myImage" src="image.jpg" alt="Description">
      
      const img = document.getElementById("myImage");
      img.setAttribute("src", "newImage.jpg");
              

3. Changing Styles

Modify the style of an element using the style property.

      element.style.propertyName = "value";
          

Example of Changing Styles:

      <div id="myDiv">Styled Div</div>
      
      const myDiv = document.getElementById("myDiv");
      myDiv.style.color = "blue";
      myDiv.style.fontSize = "20px";
              

Event Handling

1. Adding Event Listeners

Add event listeners to elements to handle user interactions like clicks, mouse movements, and key presses.

      element.addEventListener("event", function() {
          // Code to execute
      });
          

Example of Adding Event Listeners:

      <button id="myButton">Click Me</button>
      
      const button = document.getElementById("myButton");
      button.addEventListener("click", function() {
          alert("Button clicked!");
      });