JavaScript DOM

#webdev #programming #javascript #ai

DOM stands for Document Object Model.

DOM API provides a set of functions and methods to modify the HTML document dynamically via JavaScript.

getElementById() – select an element by ID.

getElementsByName() – select elements by name.

getElementsByTagName() – select elements by a tag name.

getElementsByClassName() – select elements by one or more class names.

querySelector() – select elements by CSS selectors.

Example: This example shows accessing the JavaScript HTML DOM by id.

<html>
<head></head>

<body>
    <h1 id="demo">This is some text.</h1>
    <button onclick="changeText()">
      Change Text
      </button>

    <script>
        function changeText() {
            let element = document.getElementById("demo");
            element.textContent = "Text changed by JavaScript!";
        }
    </script>
</body>

</html>

Accessing Elements in the DOM

getElementById()

let heading = document.getElementById("title"); console.log(heading.textContent);

getElementsByClassName()

Returns a collection of elements with a specified class.

let items = document.getElementsByClassName("list-item"); console.log(items[0].textContent);