Introduction to the Document Object Model (DOM)
The Document Object Model (DOM) in the JavaScript programming language is a programming design development interface or built-in framework for webpage website documents. It visualizes the structure of webpage objects designed by JavaScript programmers in a tree structure order. In which the individual objects of the designed webpage website are related to a portion of the webpage such as webpage elements, webpage attributes and webpage text content information. It allows JavaScript programmers to communicate with JavaScript and other programming languages in a dynamic order with the content and structure of the webpage and manipulate webpage elements.
In simple language, DOM in JavaScript is an abstract model of webpage design and development. Which allows JavaScript developers to access elements and content on a webpage, modify existing webpages, add and remove webpage elements. DOM features in JavaScript help to make webpages interactive and dynamic by enabling JavaScript to modify webpage structure, webpage style, and webpage content after the webpage is loaded in the web browser.
What is DOM in JavaScript?
In JavaScript programming, DOM previews the design developed webpage elements in a tree-like structure order, which represents the HTML document in the designed webpage. Where the individual element portion of the HTML webpage such as webpage element, webpage attributes, and text or content is like a node in the tree.
- Document – DOM is like a tree view in structure order in webpage design. It represents the complete HTML document in the designed webpage.
- Elements – The designed webpage is displayed in the format of nodes in tree order, such as <div> tag, <p> tag, <button> tag, element, etc.
- Text – It represents the text content information inside a design developed webpage element.
- Attributes – It displays the properties of the design developed webpage element, such as webpage class, id, href, link, etc.
Example of a simple HTML document structure and DOM structure in JavaScript.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Javascript Basic DOM Representation </title>
</head>
<body>
<h1>Hi, This is a simple DOM layout!</h1>
<p>Let we tray to menuplate dom structure.</p>
</body>
</html>
javascript DOM Representation.
Document
├── html
├── head
│ ├── meta
│ ├── title
└── body
├── h1
└── p
└── ol
How DOM works in JavaScript.
- Javascript Access – JavaScript programming interacts or communicates with the DOM through the web browser’s built-in API (application programming interface) features. It provides several methods to access and manipulate a webpage document.
- Dynamic changes – Once the DOM is loaded in a webpage, JavaScript programming allows you to modify or manipulate it. It helps in adding webpage elements, removing or modifying webpage elements in the existing webpage without reloading the webpage.
- Event handling – DOM in JavaScript programming enables to handle or manage user interactions such as clicks, mouse movements, keypress events, and provide response dynamically without refreshing the webpage.
DOM Nodes in JavaScript.
Design webpage or website elements DOM displays the HTML document in a hierarchical order of nodes.
The main types of DOM nodes in JavaScript programming are.
- Element nodes – Element nodes contain HTML elements, such as <div> tag, <p> tag, <button> tag.
- Text nodes – These represent real-time text inside HTML webpage elements.
- Attribute nodes – These represent attributes of elements in HTML webpage, such as class, id, href, tag, etc.
- Comment nodes – These represent comments in HTML webpage.
DOM nodes JavaScript example.
<div class=”holder”>
<p>This is a test class!</p>
</div>
Here in DOM node.
- Here <div> tag and <p> tag is an element node for webpage.
- Here inside <p> tag “This is a test class!” is a text node element for webpage content.
- Where <div> tag has an attributes node for class=”holder”.
Accessing and manipulating DOM with JavaScript programming.
JavaScript programming allows web developers to interact or communicate with the DOM in multiple ways.
JavaScript contains common methods for DOM manipulation.
Accessing JavaScript DOM elements.
You can use multiple methods to access webpage elements in the DOM in JavaScript programming. For example,
- getElementById() – JavaScript accesses a webpage element by its id attribute.
- getElementsByClassName() – JavaScript accesses webpage elements by their class name.
- getElementsByTagName() – JavaScript accesses elements by their tag name, e.g., <div>, <p> tags.
- querySelector() – JavaScript accesses the first webpage element that matches the CSS selectors applied to the webpage.
- querySelectorAll() – JavaScript can access all webpage elements matching the CSS selectors applied in the webpage.
dom element example.
// let tray to Accessing webpage element by ID
const heading = document.getElementById(‘textheading’);
// let tray Accessing webpage elements by its class name
const paragraphs = document.getElementsByClassName(‘textParagraph’);
// let Accessing the first webpage tag <p> tag element with a specific class
const paragraph = document.querySelector(‘.sampleParagraph’);
Manipulating html webpage elements from the DOM.
Once you have access to a webpage element, you can modify the default content, styles, and webpage attributes of that webpage element.
Modifying webpage content.
- Use .innerHTML to modify the HTML content inside a webpage element.
- Use .textContent to change simple webpage text.
Modifying webpage style.
- Use a .style file to directly modify CSS properties in a designed webpage.
Modifying webpage attributes.
- Use .setAttribute() to modify the attributes of a webpage.
Example of element modification in an HTML webpage.
// let tray to Changing the text content of webpage element
heading.textContent = “Hi, This is a example of modification web page heading!”;
// let tray to Changing the inner HTML of webpage element
heading.innerHTML = “<strong>hi, javascript!</strong>”;
// let tray to Changing a webpage CSS style
paragraph.style.color = “blue”;
// let tray to Modifying a webpage link attribute
const link = document.querySelector(“a”);
link.setAttribute(“href”, “https://www.vcanhelpsu.com”);
Adding and removing webpage elements.
You can also dynamically add or delete webpage elements from an HTML webpage.
- createElement() – It helps to create a new HTML element.
- appendChild() – It appends a new child to an HTML element.
- removeChild() – It removes an HTML child element.
Adding and removing webpage elements Example.
// let Create a new heading webpage element
const newHeading = document.createElement(“h”);
newHeading.textContent = “This is a example of new heading.”;
// let Append the new heading to the webpage body
document.body.appendChild(newHeading);
// let tray to Remove the new heading after 7 seconds
setTimeout(() => {
document.body.removeChild(newheading);
}, 7000);
JavaScript event handling.
The DOM allows you to respond to user events such as click, keypress, or mouse movement. This is done by adding event listeners to the element.
- addEventListener() – It adds an event listener to a JavaScript webpage element.
Example of JavaScript event handling.
// let tray Attaching a click event to a the html webpage button
const button = document.querySelector(‘button’);
button.addEventListener(‘click’, () => {
alert(‘You Click on Button’);
});
You can listen to various events such as click, mouseover, keydown, etc. in a JavaScript webpage.
Modifying the DOM for dynamic content in an HTML webpage.
DOM allows you to create interactive and dynamic webpages by modifying webpage content in realtime, without requiring a reload of the existing webpage in the web browser. It typically applies AJAX or Fetch API calls to dynamically modify or update web content based on webpage user interaction.
Example of dynamically updating content without page reload.
// let tray to content change on when you click
const button = document.querySelector(‘#modifyContent’);
button.addEventListener(‘click’, () => {
document.querySelector(‘#content’).textContent = “we add some dynamic content!”;
});
Conclusion of Document Object Model (DOM) in JavaScript programming.
DOM in JavaScript is a powerful interface for manipulating HTML and XML webpage documents in a structured, dynamic order. With JavaScript programming, the DOM framework helps web developers interact and communicate with web pages in realtime, respond to user input, modify webpage structure, and create a rich interactive web user experience.
With the DOM framework in JavaScript programming, web developers can accomplish some specific tasks, some of which are as follows.
We can access html webpage elements using JavaScript dom methods like getElementById(), querySelector(), etc.
We can modify webpage internal content information using .innerHTML, .textContent, and .style methods in html webpage.
We can add and remove webpage elements dynamically in a webpage without refreshing using .createElement(), .appendChild(), and .removeChild().
We can respond to webpage events using addEventListener() method in JavaScript webpage.
