☜ ☞

dom

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as a tree of nodes. Each node represents part of the document (such as an element, attribute, or text).

Here are some fundamental concepts and examples of working with the DOM in JavaScript:

Accessing DOM Elements

getElementById()

<!DOCTYPE html>
<html>
<body>
 <p id="myParagraph">Hello, World!</p>
 <script>
   let paragraph = document.getElementById("myParagraph");
   console.log(paragraph.innerText); // "Hello, World!"
 </script>
</body>
</html>

getElementsByClassName()

<!DOCTYPE html>
<html>
<body>
 <p class="myClass">Hello</p>
 <p class="myClass">World</p>
 <script>
   let elements = document.getElementsByClassName("myClass");
   for (let i = 0; i < elements.length; i++) {
     console.log(elements[i].innerText);
   }
   // "Hello"
   // "World"
 </script>
</body>
</html>

getElementsByTagName()

<!DOCTYPE html>
<html>
<body>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
 <script>
   let paragraphs = document.getElementsByTagName("p");
   for (let i = 0; i < paragraphs.length; i++) {
     console.log(paragraphs[i].innerText);
   }
   // "Paragraph 1"
   // "Paragraph 2"
 </script>
</body>
</html>

querySelector()

<!DOCTYPE html>
<html>
<body>
 <p id="myParagraph">Hello, World!</p>
 <script>
   let paragraph = document.querySelector("#myParagraph");
   console.log(paragraph.innerText); // "Hello, World!"
 </script>
</body>
</html>

querySelectorAll()

<!DOCTYPE html>
<html>
<body>
 <p class="myClass">Hello</p>
 <p class="myClass">World</p>
 <script>
   let elements = document.querySelectorAll(".myClass");
   elements.forEach(element => {
     console.log(element.innerText);
   });
   // "Hello"
   // "World"
 </script>
</body>
</html>

Manipulating DOM Elements

Changing Content

<!DOCTYPE html>
<html>
<body>
 <p id="myParagraph">Hello, World!</p>
 <button onclick="changeContent()">Change Content</button>
 <script>
   function changeContent() {
     document.getElementById("myParagraph").innerText = "Content Changed!";
   }
 </script>
</body>
</html>

Changing Styles

<!DOCTYPE html>
<html>
<body>
 <p id="myParagraph">Hello, World!</p>
 <button onclick="changeStyle()">Change Style</button>
 <script>
   function changeStyle() {
     document.getElementById("myParagraph").style.color = "red";
     document.getElementById("myParagraph").style.fontSize = "20px";
   }
 </script>
</body>
</html>

Adding and Removing Elements

<!DOCTYPE html>
<html>
<body>
 <ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>
 <button onclick="addItem()">Add Item</button>
 <button onclick="removeItem()">Remove Item</button>
 <script>
   function addItem() {
     let li = document.createElement("li");
     li.innerText = "New Item";
     document.getElementById("myList").appendChild(li);
   }
   function removeItem() {
     let list = document.getElementById("myList");
     if (list.hasChildNodes()) {
       list.removeChild(list.lastChild);
     }
   }
 </script>
</body>
</html>

Event Handling

Adding Event Listeners

<!DOCTYPE html>
<html>
<body>
 <p id="myParagraph">Click me!</p>
 <script>
   document.getElementById("myParagraph").addEventListener("click", function() {
     alert("Paragraph clicked!");
   });
 </script>
</body>
</html>

Removing Event Listeners

<!DOCTYPE html>
<html>
<body>
 <p id="myParagraph">Click me!</p>
 <button id="removeListener">Remove Event Listener</button>
 <script>
   function clickHandler() {
     alert("Paragraph clicked!");
   }
   document.getElementById("myParagraph").addEventListener("click", clickHandler);
   document.getElementById("removeListener").addEventListener("click", function() {
     document.getElementById("myParagraph").removeEventListener("click", clickHandler);
   });
 </script>
</body>
</html>

These examples provide a foundational understanding of interacting with and manipulating the DOM using JavaScript. There are many more aspects and methods within the DOM API that can be explored as needed for more complex interactions and manipulations.

☜ ☞