JavaScript HTML DOM

Last Updated : 04 Apr, 2024

The HTML DOM serves as a blueprint for webpages, outlining their structure and individual elements, using JavaScript it can dynamically access and modify the content, structure, and style of a webpage. We can access, modify, and delete the HTML elements via JavaScript.

Table of Content

What is DOM?
Features of JavaScript DOM
What is HTML DOM?

What is DOM?

The DOM ( Document Object Model) is a universal language for web documents such as HTML, XML, and SVG. The JavaScript HTML DOM represents an HTML document as a tree-like structure, where elements, attributes, and text are nodes. Through the DOM, It allows developers to interact with individual document parts, enabling dynamic updates and manipulation.

Features of JavaScript DOM

Tree Structure: The DOM is organized like a family tree, with elements having parent and child relationships, it is easy to find and change things based on their positions.
Element Access: You can use different methods like getElementById, getElementsByTagName, and querySelector to access specific elements on a webpage.

What is HTML DOM?

HTML DOM stands for HTML Document Object Model.
It is a programming interface for web documents.
It represents the structure of an HTML document as a tree of objects.
With the HTML DOM, JavaScript can access and manipulate all elements of an HTML document.

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

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Accessing the JavaScript
             HTML DOM by id
      </title>
</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>