DEV Community

Madhan Raj
Madhan Raj

Posted on

Document Object Model [DOM]

#dom #javascript #tutorial #beginners

Definition of DOM:

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.
Concepts and usage:

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

DOM stands for Document Object Model. It is an interface that allows JavaScript to access and manipulate HTML elements dynamically.
Example : Change Text

HTML


<h1 id="title">Hello</h1>

<button onclick="changeText()">
Change
</button>
Enter fullscreen mode Exit fullscreen mode

JavaScript

function changeText() {
    document.getElementById("title").innerHTML = "Welcome!";
}

Before clicking

Hello

After clicking

Welcome!

getElementById()

    getElementById() is a DOM method used to find and access an HTML element by its id.

    getElementById() is a DOM method that returns the HTML element
Enter fullscreen mode Exit fullscreen mode

whose id matches the given value.

Syntax


document.getElementById("idName");

    document → Represents the entire HTML page.

    getElementById() → Searches for an element by its id.

    "idName" → The value of the id attribute in the HTML.
Enter fullscreen mode Exit fullscreen mode

getElementById() is a DOM method that selects a single HTML element using its unique id. It returns the element object, allowing JavaScript to read or modify its content, style, or attributes.

Remember: getElementById() only finds the element. What you do after finding it (such as changing innerHTML, style, or value) determines the action performed on that element.
innerText

innerText is a DOM property used to get or set the visible text inside an HTML element.

innerText is a property that returns or changes the visible text content of an HTML element.
Enter fullscreen mode Exit fullscreen mode

Syntax

element.innerText = "New Text";

Example 1: Get Text
HTML

<h1 id="title">Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

JavaScript

let text = document.getElementById("title").innerText;
console.log(text);
Enter fullscreen mode Exit fullscreen mode

Output

Hello World

    Here document.getElementById("title") → Finds the
    element.

    .innerText → Reads the visible text inside it.
 Example 2: Change Text
 **HTML**

<h1 id="title">Hello</h1>
Enter fullscreen mode Exit fullscreen mode

JavaScript

document.getElementById("title").innerText = "Welcome";

Before

Hello

After

Welcome
Enter fullscreen mode Exit fullscreen mode

innerText → Reads or changes the visible text inside that element.
Reference
https://www.w3schools.com/js/js_htmldom.asp

Top comments (0)