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>
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 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.
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.
Syntax
element.innerText = "New Text";
Example 1: Get Text
HTML
<h1 id="title">Hello World</h1>
JavaScript
let text = document.getElementById("title").innerText;
console.log(text);
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>
JavaScript
document.getElementById("title").innerText = "Welcome";
Before
Hello
After
Welcome
innerText → Reads or changes the visible text inside that element.
References
https://www.w3schools.com/js/js_htmldom.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://www.geeksforgeeks.org/html/javascript-html-dom/
Top comments (1)
good examples 👌