JavaScript – HTML DOM Methods
Introduction:
In this tutorial, you’ll learn about JavaScript and how it interacts with HTML through the Document Object Model (DOM). We’ll cover the basics of JavaScript’s DOM methods, which are essential for manipulating HTML elements dynamically. By the end, you’ll have a solid understanding of how to use JavaScript to create dynamic web pages.
Table of Contents
What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of HTML documents as a tree-like structure, where each node represents an HTML element, attribute, or text. JavaScript can be used to manipulate the DOM, allowing you to dynamically change the content, structure, and style of web pages.
HTML DOM Methods
- getElementById():
- This method is used to select an HTML element by its id attribute.
- Syntax:
document.getElementById("elementId") - Example:
<!DOCTYPE html> <html> <body> <h1 id="heading">Hello World!</h1> <script> var element = document.getElementById("heading"); console.log(element.innerHTML); // Output: Hello World! </script> </body> </html>
- getElementsByClassName():
- This method is used to select HTML elements by their class name.
- Syntax:
document.getElementsByClassName("className") - Example:
<!DOCTYPE html> <html> <body> <p class="intro">This is a paragraph.</p> <p class="intro">This is another paragraph.</p> <script> var elements = document.getElementsByClassName("intro"); for (var i = 0; i < elements.length; i++) { console.log(elements[i].innerHTML); } </script> </body> </html>
- getElementsByTagName():
- This method is used to select HTML elements by their tag name.
- Syntax:
document.getElementsByTagName("tagName") - Example:
<!DOCTYPE html> <html> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> var elements = document.getElementsByTagName("li"); for (var i = 0; i < elements.length; i++) { console.log(elements[i].innerHTML); } </script> </body> </html>
- querySelector():
- This method is used to select the first HTML element that matches a specified CSS selector.
- Syntax:
document.querySelector("selector") - Example:
<!DOCTYPE html> <html> <body> <div id="container"> <p class="text">Paragraph 1</p> <p class="text">Paragraph 2</p> </div> <script> var element = document.querySelector("#container .text"); console.log(element.innerHTML); // Output: Paragraph 1 </script> </body> </html>
- querySelectorAll():
- This method is used to select all HTML elements that match a specified CSS selector.
- Syntax:
document.querySelectorAll("selector") - Example:
<!DOCTYPE html> <html> <body> <div id="container"> <p class="text">Paragraph 1</p> <p class="text">Paragraph 2</p> </div> <script> var elements = document.querySelectorAll("#container .text"); elements.forEach(function(element) { console.log(element.innerHTML); }); </script> </body> </html>
Conclusion
Understanding JavaScript DOM methods is crucial for building dynamic and interactive web pages. By utilizing these methods, you can manipulate HTML elements, attributes, and content on the fly, providing a rich user experience. Practice using these methods in your projects to solidify your understanding and improve your web development skills.
