JavaScript DOM

The Document Object Model (DOM) is a fundamental concept in web development, enabling dynamic and interactive web pages. It serves as a programming interface for web documents, allowing developers to access, manipulate, and modify the content and structure of web pages using JavaScript.

What is the DOM?

The DOM is a programming interface provided by web browsers that represents the structure of an HTML or XML document as a hierarchical tree of objects. Each object in this tree corresponds to an element in the document, such as paragraphs, headings, links, and images. The DOM provides a way for developers to interact with web documents programmatically, making it a crucial part of web development.

Why is the DOM Important?

The DOM is essential for creating dynamic and interactive web applications. Without the DOM, web pages would be static, and users would not be able to interact with or manipulate page content. It enables developers to:

Access and modify HTML elements and their attributes.
Add, delete, or change content dynamically.
Respond to user actions, like clicks and keyboard input.
Create interactive web forms and validate user input.
Update the page without requiring a full page reload (e.g., for single-page applications).

Accessing DOM Elements

To work with the DOM, you need to access HTML elements. JavaScript provides several methods to select and manipulate these elements within your web page.

Selecting Elements by ID

You can select an element with a specific ID using the getElementById method. This is often used when you want to target a specific element on the page.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="myHeading">Hello, World!</h1>
    <script>
        // Access an element by its ID
        const heading = document.getElementById("myHeading");
        console.log(heading.textContent); // Output: Hello, World!
    </script>
</body>
</html>

Selecting Elements by Tag Name

You can select elements by their HTML tag name using the getElementsByTagName method. This returns a collection of elements with the specified tag name.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        // Access all <li> elements within the <ul>
        const listItems = document.getElementsByTagName("li");
        console.log(listItems.length); // Output: 3
    </script>
</body>
</html>

Selecting Elements by Class Name

To select elements by their class name, use the getElementsByClassName method. It returns a collection of elements with the specified class.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <script>
        // Access all elements with class "box"
        const boxes = document.getElementsByClassName("box");
        console.log(boxes.length); // Output: 3
    </script>
</body>
</html>

Selecting Elements by CSS Selector

The querySelector and querySelectorAll methods allow you to select elements using CSS selectors. querySelector returns the first matching element, while querySelectorAll returns all matching elements.

<!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body> <ul> <li class="item">Item 1</li> <li class="item">Item 2</li> <li>Item 3</li> </ul> <script> // Access the first element with class "item" const firstItem = document.querySelector(".item"); console.log(firstItem.textContent); // Output: Item 1

// Access all elements with class “item”
const allItems = document.querySelectorAll(“.item”);
console.log(allItems.length); // Output: 2

</script> </body> </html>

Modifying DOM Elements

Once you’ve selected elements from the DOM, you can manipulate them by changing their content, attributes, styles, and more. This dynamic manipulation is what makes web pages interactive.

Changing Text Content

You can change the text content of an element using the textContent property.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="myHeading">Hello, World!</h1>
    <button onclick="changeText()">Change Text</button>
    <script>
        function changeText() {
            const heading = document.getElementById("myHeading");
            heading.textContent = "Welcome to JavaScript DOM!";
        }
    </script>
</body>
</html>

Modifying Attributes

You can modify attributes like src, href, class, and more using the setAttribute method.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <img id="myImage" src="image.jpg" alt="An image">
    <button onclick="changeImage()">Change Image</button>
    <script>
        function changeImage() {
            const image = document.getElementById("myImage");
            image.setAttribute("src", "new-image.jpg");
        }
    </script>
</body>
</html>

Styling Elements

You can change the style of an element by accessing its style property and setting CSS properties.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="myParagraph">This is a paragraph.</p>
    <button onclick="highlightText()">Highlight Text</button>
    <script>
        function highlightText() {
            const paragraph = document.getElementById("myParagraph");
            paragraph.classList.add("highlight");
        }
    </script>
</body>
</html>

DOM Traversal

DOM traversal involves navigating through the DOM tree to access or manipulate different elements. Common traversal methods include parentNode, childNodes, nextSibling, previousSibling, and more.

Accessing Parent and Child Nodes

You can access an element’s parent node using the parentNode property and its child nodes using the childNodes property. Be aware that childNodes includes text nodes, so you may need to filter them.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>