Document Object Model (DOM) in JavaScript

Zia

2 Followers

Nov 1, 2024

1 sec read

163

A Web page contains various elements, such as buttons, text boxes, checkboxes, and so on. These elements exist in a hierarchy and overall represent an HTML document.

JavaScript allows the user to access HTML elements and also change the existing structure of an HTML document. This can be done by using the DOM specification. The DOM is an API that defines the object structure for accessing and manipulating HTML elements. It is used with JavaScript to add, modify, or delete elements and contents on a Web page.

DOM specifications are laid out by W3C and are implemented by all browsers to overcome incompatibility issues. W3C DOM specifications are divided into levels. The level 1 specification of DOM was first defined in 1998. The current DOM specification is level 3.

The DOM reads all the elements contained on an HTML page. It treats HTML elements as nodes. According to the DOM specification, the entire HTML document represents a document node. This document node consists of element nodes, attribute nodes, and text nodes. Thus, the document node is the highest-level node and the text nodes are the lowest ones. Every node in the node hierarchy has a parent node consisting of multiple child nodes. For example, <head> and <body> are the child nodes of <html>. All these nodes together form a node tree and are related to each other.

The Simple HTML document.

<!DOCTYPE html>

<html>

<head>

<title>Simple HTML Document</title>

</head>

<body>

<h1>Welcome to My Page</h1>

<p>This is a simple HTML document.</p>

</body>

</html>

All the nodes present in the node hierarchy contain certain properties. These properties provide information about the node. Different node properties are as follows:

1. nodeName:

Represents the name of the node. It contains the tag name of the HTML element in upper case.

2. nodeValue:

Represents the text contained within the node. This property is only available for attribute nodes and not for document and element nodes.

3. nodeType:

Represents the type of the node. For example, a document node, an element node, and so on.

The HTML DOM provides standard objects for HTML documents. Some of these objects are as follows:

Document object
Form Object
Link object
Table object

The brief description of some of these objects is as follows:

i. Document Object:

The HTML DOM provides a document object that is used within JavaScript to access all HTML elements presented on the page. The document object is one of the basic JavaScript objects.

It represents the e entire HTML document. It provides access to other elements, such as links, anchors, and so on. Each HTML page has only one document object. This object is created when the BODY element is loaded on the Web page. The document object is also part of the window object and is accessed as a window. Document. The document object provides properties that allow the user to specify or retrieve information about elements and their content.

Lists the properties of the document object.

body: Provides access to the BODY element.
head: Returns the <head> element of the document.
title: Specifies or retrieves the title of the document.
anchors: Retrieves the collection containing all the anchors contained in a document.
forms: Retrieves the collection containing all the forms contained in a document.
images: Retrieves the collection containing all the images contained in a document.
links: Retrieves the collection containing all the links contained in a document.

The document object provides methods that allow retrieving HTML elements using the ID, name, and tag name.

Lists the methods of the document object.

close(): Closes a data stream and displays the data collected using the open() method.
getElementById(): Retrieves a collection of HTML elements by using a specified ID.
getElementsByName(): Retrieves a collection of HTML elements by using the specified name.
getElementsByTagName(): Retrieves a collection of HTML elements with specified tag names.
open(): Opens a stream to accept output from the write() or writeln() methods.
write(): Writes text or HTML expression to a document.

The use of the document object to change the image at the click of a button.

<!DOCTYPE html>

<html>

<head>

<title>Change Image using JavaScript DOM</title>

<style>

img {

width: 300px;

height: auto;

}

</style>

</head>

<body>

<h1>JavaScript DOM Image Change</h1>

<button id="changeButton">Change Image</button>

// Select the button and image elements

const button = document.getElementById('changeButton');

const image = document.getElementById('imageElement');

// Add an event listener to change the image on click

button.addEventListener('click', function() {

image.src = "image2.jpg"; // Change the image source

});

</script>

</body>

</html>

ii. Form Object:

The form accepts input from the user and sends data for validation. JavaScript allows you to process and validate form data. A single HTML document can contain multiple forms. The DOM specification provides a form object that represents an HTML form. A form object is created for each <form> tag in an HTML document.

The use of the form object that counts the number of controls in a form.

<!DOCTYPE html>

<html>

<head>

<title>Count Form Controls</title>

</head>

<body>

<h1>Form Controls Counter</h1>

<button type="button">Button 1</button>

<button type="submit">Submit</button>

</form>

<br>

// Select the form element

const form = document.getElementById('myForm');

// Count the number of controls in the form using the `elements` property

const numberOfControls = form.elements.length;

// Display the number of controls

document.getElementById('controlCount').innerText =

`Number of controls in the form: ${numberOfControls}`;

</script>

</body>

</html>

JavaScript DOM Document Object Model Dom in JavaScript DOM manipulation in JavaScript node properties in javascript Document object in javascript form object DOM in JS

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.

Zia

Control Flow Statement in Dart...

In Dart, statements inside a program are generally executed sequentially from top ...

Zia

Jun 5, 2024

376

Synchronous and Asynchronous Programming in...

Consider a realworld scenario. You are speaking on the phone with someone. ...

Zia

Jun 10, 2024

380

Introduction to Loops in JavaScript:...

Consider a scenario where you want to accept and display ten numbers ...

Zia

Oct 20, 2024

222

Introduction to Git and GitHub...

One of the most popular version control systems today is Git. Git ...

Zia

Mar 9, 2024

219

Recomended

The Future of .NET 5.0

In September 2019, Microsoft released .Net Core 3. This version of .NET ...

Zia

May 14, 2024

362

Big Reward

Once a hungry wolf was cramming his prey down. By chance a ...

Story Link

Aug 28, 2024

236

Introduction to DevOps

Software development and its release on the market follow a critical process. ...

Zia

Jun 1, 2024

296

Document Object Model (DOM) in JavaScript

Zia

2 Followers

1. nodeName:

2. nodeValue:

3. nodeType:

i. Document Object:

ii. Form Object:

Published by:

Zia

More From:

Zia

Control Flow Statement in Dart...

Synchronous and Asynchronous Programming in...

Introduction to Loops in JavaScript:...

Introduction to Git and GitHub...

Recomended

The Future of .NET 5.0

Big Reward

Introduction to DevOps