Javascript Document Object Model (DOM)

DOM:

Manipulating the DOM (Document Object Model) in JavaScript includes deciding on HTML factors, editing their content or attributes, and responding to user interactions.

Let's discover some common obligations associated with DOM manipulation:

Selecting Elements:

You can use various methods to select HTML elements. Here are a few examples:

                                      
                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation Example</title>
</head>
<body>

    <h1 id="mainTitle">Hello, World!</h1>
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        // Selecting elements by ID
        const titleElement = document.getElementById('mainTitle');
        console.log(titleElement.textContent); // Output: Hello, World!

        // Selecting elements by class
        const listItems = document.querySelectorAll('.list li');
        listItems.forEach(item => console.log(item.textContent));
    </script>

</body>
</html>

In this example:

document.getElementById('mainTitle') selects the element with the ID "mainTitle."
document.querySelectorAll('.list li') selects all <li> elements inside elements with the class "list."

Modifying Content and Attributes:

You can modify the content and attributes of selected elements:

                                      
                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation Example</title>
</head>
<body>

    <h1 id="mainTitle">Hello, World!</h1>
    <button id="myButton">Click me</button>

    <script>
        const titleElement = document.getElementById('mainTitle');
        titleElement.textContent = 'Modified Text'; // Change text content

        const buttonElement = document.getElementById('myButton');
        buttonElement.setAttribute('disabled', true); // Set attribute
    </script>

</body>
</html>

In this situation, textContent is used to adjust the textual content content material of an element, and setAttribute is used to set an attribute (in this situation, the "disabled" characteristic of a button).

Handling Events:

Responding to user interactions involves adding event listeners:

                                      
                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation Example</title>
</head>
<body>

    <button id="myButton">Click me</button>

    <script>
        const buttonElement = document.getElementById('myButton');

        // Add an event listener for the click event
        buttonElement.addEventListener('click', function() {
            alert('Button Clicked!');
        });
    </script>

</body>
</html>