HTML DOM activeElement Property

HTML DOM (Document Object Model)

Last Updated : 27 Dec, 2024

The HTML DOM (Document Object Model) is a programming interface that represents the structure of a web page in a way that programming languages like JavaScript can understand and manipulate.

Think of it as a tree of objects where each part of your HTML document (elements, attributes, text) is represented as a node, allowing you to dynamically change or interact with the content and structure of the page.

What Does the HTML DOM Look Like?

Imagine your webpage as a tree

The document is the root.
HTML tags like <html>, <head>, and <body> are branches.
Attributes, text, and other elements are the leaves.

Why is DOM Required?

The DOM is essential because

Dynamic Content Updates: Without reloading the page, the DOM allows content updates (e.g., form validation, AJAX responses).
User Interaction: It makes your webpage interactive (e.g., responding to button clicks, form submissions).
Flexibility: Developers can add, modify, or remove elements and styles in real-time.
Cross-Platform Compatibility: It provides a standard way for scripts to interact with web documents, ensuring browser compatibility.

How the DOM Works?

The DOM connects your webpage to JavaScript, allowing you to:

Access elements (like finding an <h1> tag).
Modify content (like changing the text of a <p> tag).
React to events (like a button click).
Create or remove elements dynamically.

Properties of the DOM

Node-Based: Everything in the DOM is represented as a node (e.g., element nodes, text nodes, attribute nodes).
Hierarchical: The DOM has a parent-child relationship, forming a tree structure.
Live: Changes made to the DOM using JavaScript are immediately reflected on the web page.
Platform-Independent: It works across different platforms, browsers, and programming languages.

Commonly Used DOM Methods

Methods	Description
getElementById(id)	Selects an element by its ID.
getElementsByClassName(class)	Selects all elements with a given class.
querySelector(selector)	Selects the first matching element.
querySelectorAll(selector)	Selects all matching elements.
createElement(tag)	Creates a new HTML element.
appendChild(node)	Adds a child node to an element.
remove()	Removes an element from the DOM.
addEventListener(event, fn)	Attaches an event handler to an element.

Example: In this example, We use HTML element id to find the DOM HTML element.

HTML

<html>
<body>
    <h2>GeeksforGeeks</h2>
    <!-- Finding the HTML Elements by their Id in DOM -->
    <p id="intro">
        A Computer Science portal for geeks.
    </p>
    <p>
        This example illustrates the <b>getElementById</b> method.
    </p>
    <p id="demo"></p>
    <script>
        const element = document.getElementById("intro");
        document.getElementById("demo").innerHTML =
            "GeeksforGeeks introduction is: " + element.innerHTML;
    </script>
</body>
</html>

Output:

getelementbyid() method example output

Getting the HTML element by getElementById() Method

Example : This example describes the representation of the HTML elements in the tree structure.

html

<table>
    <ROWS>
        <tr>
            <td>Car</td>
            <td>Scooter</td>
        </tr>
        <tr>
            <td>MotorBike</td>
            <td>Bus</td>
        </tr>
    </ROWS>
</table>

html elements in tree-like structure

HTML elements in tree-like structure

What DOM is not?

It is not a binary description where it does not define any binary source code in its interfaces.
It is not used to describe objects in XML or HTML whereas the DOM describes XML and HTML documents as objects.
It is not represented by a set of data structures; it is an interface that specifies object representation.
It does not show the criticality of objects in documents i.e it doesn’t have information about which object in the document is appropriate to the context and which is not.

Levels of DOM

DOM consisted of multiple levels, each representing different aspect of the document.

Level 0: Provides a low-level set of interfaces.
Level 1: DOM level 1 can be described in two parts: CORE and HTML.
- CORE provides low-level interfaces that can be used to represent any structured document.
- HTML provides high-level interfaces that can be used to represent HTML documents.
Level 2: consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL, and RANGE.
- CORE2: extends the functionality of CORE specified by DOM level 1.
- VIEWS: views allows programs to dynamically access and manipulate the content of the document.
- EVENTS: Events are scripts that are either executed by the browser when the user reacts to the web page.
- STYLE: allows programs to dynamically access and manipulate the content of style sheets.
- TRAVERSAL: This allows programs to dynamically traverse the document.
- RANGE: This allows programs to dynamically identify a range of content in the document.
Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH.
- CORE3: extends the functionality of CORE specified by DOM level 2.
- LOAD and SAVE: This allows the program to dynamically load the content of the XML document into the DOM document and save the DOM Document into an XML document by serialization.
- VALIDATION: This allows the program to dynamically update the content and structure of the document while ensuring the document remains valid.
- EVENTS: extends the functionality of Events specified by DOM Level 2.
- XPATH: XPATH is a path language that can be used to access the DOM tree.

Example: This example illustrates the dom-manipulation using getElementById() Method.

HTML

<html>
<head></head>
<body>
    <label>Enter Value 1: </label>
    <input type="text" id="val1" />
    <br />
    <br />
    <label>Enter Value 2: </label>
    <input type=".text" id="val2" />
    <br />
    <button onclick="getAdd()">Click To Add</button>
    <p id="result"></p>
    <script type="text/javascript">
        function getAdd() {
            // Fetch the value of input with id val1
            const num1 = Number(document.getElementById("val1").value);
            // Fetch the value of input with id val2
            const num2 = Number(document.getElementById("val2").value);
            const add = num1 + num2;
            console.log(add);
            // Displays the result in paragraph using dom
            document.getElementById("result").innerHTML = "Addition : " + add;
            // Changes the color of paragraph tag with red
            document.getElementById("result").style.color = "red";
        }
    </script>
</body>
</html>

Output:

manipulating document object using getelementbyid method

Manipulating the Document objects using getElementById() Method

HTML DOM activeElement Property

GeeksforGeeks

Improve

Article Tags :

Similar Reads