The JavaScript Document Object Model, commonly referred to as JavaScript DOM, serves as an interface tailored for web documents, particularly those in HTML or XML formats. Through the utilization of JavaScript DOM, we can depict the organization of a document in a tree-like arrangement of nodes. This representation enables us to access, alter, and manage the content, organization, and style of a web page effectively.
A web page refers to a document that can be viewed within a browser window or as its HTML source. While both instances represent the same document, the Document Object Model (DOM) version enables it to be modified and interacted with.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Output:
Hello, World!
Properties of Document Object Model
Methods of JavaScript DOM
In JavaScript, by utilizing methods, we are able to interact with and alter the contents of the document. Below are several key methods of the Document Object Model:
| Method | Description |
|---|---|
| document.write("string") | It writes the given string on the document. |
| document.writeln("string") | It writes the given string on the document with a newline character at the end. |
| getElementById() | It returns the element having the given id value. |
| getElementByName() | It returns all the elements having the given name value. |
| getElementByClassName() | It returns all the elements having the given class name. |
| getElementByTagName() | It returns all the elements having the given tag name. |
| querySelector() | It returns the first elements matching a CSS selector. |
| querySelectorAll() | It returns all elements matching a CSS selector. |
JavaScript getElementById
In JavaScript, the getElementById method is a native function that enables you to retrieve an HTML element by its distinctive ID attribute.
Syntax
The syntax of getElementById is as follows:
document.getElementById(elementID);
Example
<html>
<head>
<title>getElementById example</title>
</head>
<body>
<p id="demo">JavaScript DOM</p>
<button onclick="changeColor('purple');">purple</button>
<script>
function changeColor(newColor) {
const elem = document.getElementById("demo");
elem.style.color = newColor;
}
</script>
</body>
</html>
Output:
JavaScript getElementsByName
In JavaScript, the method getElementsByName provides a collection of elements that share the specified name attribute.
Syntax
The syntax of getElementsByName is as follows:
document.getElementsByName(elementName);
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript DOM</title>
</head>
<body>
<h2>The getElementByName method</h2>
Phone:
<input name="devices" type ="checkbox" value="Phone">
Laptop:
<input name="devices" type ="checkbox" value="Laptop">
Sofa:
<input name="furnitures" type ="checkbox" value="Sofa">
<p>Check the checkboxes that have name = "devices"</p>
<script>
const collection = document.getElementsByName("devices");
for(let i =0; i <collection.length; i++){
if(collection[i].type =="checkbox"){
collection[i].checked = true;
}
}
</script>
</body>
</html>
Output:
JavaScript getElementsByClassName
In JavaScript, the method getElementsByClassName retrieves a collection of elements that possess a specified class name.
Syntax
The structure of getElementsByClassName is outlined below:
document.getElementByClassName(classname);
Example
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<p class="highlight">This is paragraph 1.</p>
<p class="highlight">This is paragraph 2.</p>
<p>This is a normal paragraph.</p>
<button onclick="highlightParagraphs()">Highlight Paragraphs</button>
<script>
function highlightParagraphs() {
// Get all elements with the class 'highlight'
var elements = document.getElementsByClassName("highlight");
// Loop through the elements and change their background color
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>
Output:
JavaScript getElementsByTagName
In JavaScript, the method getElementsByTagName is an intrinsic function that retrieves all elements that possess the specified tag name.
Syntax
The syntax of getElementsByTagName is as follows:
getElementsByTagName(tagName)
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<script type="text/javascript">
function countpara(){
var totalpara=document.getElementsByTagName("p");
alert("total p tags are: "+totalpara.length);
}
</script>
<p>This is a paragraph</p>
<p>Here we are going to count a total number of paragraphs by the getElementByTagName() method.</p>
<p>Let's see the simple example</p>
<button onclick="countpara()">count paragraph</button>
</body>
</html>
Output:
JavaScript querySelector
Within JavaScript, the querySelector function retrieves the initial element that corresponds to a specified CSS selector.
Syntax
The syntax of querySelector is as follows:
querySelector(selectors)
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelector Example</title>
</head>
<body>
<p id="myParagraph">Click the button to change this text.</p>
<button id="myButton">Click Me</button>
<script>
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
const paragraph = document.querySelector('#myParagraph');
paragraph.textContent = 'The text has been changed!';
});
</script>
</body>
</html>
Output:
JavaScript querySelectorAll
In JavaScript, the method querySelectorAll retrieves all child elements that conform to a specified CSS selector.
Syntax
The syntax of querySelectorAll is as follows:
element.querySelectorAll(CSS selectors)
Example
<!DOCTYPE html>
<html>
<head>
<title>querySelectorAll Example</title>
<style>
.highlight {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h2 class="highlight">Heading One</h2>
<h2 class="highlight">Heading Two</h2>
<h2>Heading Three</h2>
<script>
const elements = document.querySelectorAll('.highlight');
elements.forEach((element) => {
element.style.color = 'red';
});
</script>
</body>
</html>
Output:
Features of JavaScript DOM
Certain characteristics of the JavaScript Document Object Model (DOM) include:
Dynamic Manipulation
JavaScript possesses the capability to dynamically create, eliminate, and alter HTML elements, attributes, and styles, thereby facilitating the development of interactive and dynamic web pages.
Event Handling
In JavaScript, the Document Object Model (DOM) facilitates the handling of user interactions and various events that take place on the webpage, including actions like clicking buttons or submitting forms.
Tree structure
The Document Object Model (DOM) in JavaScript illustrates HTML documents as a hierarchical tree structure, with each element functioning as a node. This design facilitates effective navigation and alteration of the elements within the document.
DOM Traversal
JavaScript has the capability to traverse the DOM tree through a variety of methods, enabling the identification of particular elements and the ability to interact with their properties and methods.
Conclusion
To conclude, the JavaScript Document Object Model (DOM) offers a collection of functions and methods that allow for the dynamic alteration of HTML documents. It serves as a crucial link between HTML documents and scripting languages, facilitating the creation of dynamic and interactive web experiences.