DOM In JavaScript
I'm a recent graduate with a degree in Mechanical Engineering but I have a passion for web development. I have hands on in ReactJS and I have experience building responsive, user-friendly web applications using this framework. I gained hands-on experience in web development through several projects . I'm proficient in HTML, CSS, JavaScript, and I have experience working with various front-end technologies such as ReactJS, Redux, and Bootstrap. I'm also familiar with back-end development such as Node.js and Express.js.
In this article, we learn about what is DOM and How DOM is an essential part of web development!
What is DOM?
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a web page as a hierarchical tree-like structure, where each node in the tree corresponds to an element, attribute, or text within the document.
The DOM provides a way for web developers to access and manipulate these objects using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>Welcome to my blog.</p>
<button>Click me!</button>
</body>
</html>
The DOM tree for this HTML document looks like this:
The <!DOCTYPE html> and <html> tags are not represented in the DOM tree because they are not elements. The <head>, <body>, <h1>, <p>, and <button> tags are all elements in the DOM tree. The <title> tag is also an element, but it is nested inside the <head> element.
In the DOM, everything is a node. Nodes can be elements, attributes, text, comments, etc.
The topmost node is the document node, representing the entire HTML or XML document. All other nodes are descendants of the document node.
According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well.
All these objects are accessible using JavaScript, and we can use them to modify the page.
Accessing Elements in the DOM
To access elements in the DOM, you can use various methods provided by the Document object or other DOM elements.
Here are some common ways to access elements:
getElementById()
- This method allows you to access an element using its unique ID.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>Hello, DOM!</h1>
<div>
<p id="para">This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Here's an example of how to use getElementById to select a paragraph element with the ID "para" and change its text content:
const myPara=document.getElementById("para");
myPara.textContent="paragraph changed using getElementById";
getElementsByClassName
The getElementsByClassName method allows you to select elements on a web page by their class names.
The
getElementsByClassName()method is used to retrieve a liveHTMLCollection of elements that have a specific class name
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>Hello, DOM!</h1>
<div>
<p class="para">This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
const myPara= document.getElementsByClassName("para");
myPara[0].textContent="paragraph changed using getElementsByClassName";
console.log(myPara);
Here we can see that The getElementsByClassName() method returns a liveHTMLCollection of elements.
getElementsByTagName
This method returns a live HTMLCollection containing all elements with the specified tag name.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>Hello, DOM!</h1>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
const myPara= document.getElementsByClassName("p");
myPara[0].textContent="paragraph changed using getElementsByTagName";
console.log(myPara);
querySelector()
This method allows you to select an element using CSS selector syntax. It returns the first element that matches the specified selector or null if no matching element is found.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>Hello, DOM!</h1>
<div>
<p id="para">This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
const myPara= document.querySelector('#para');
myPara.textContent="paragraph changed using querySelector";
querySelectorAll()
This method is similar to querySelector(), but it returns a NodeList containing all matching elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>Hello, DOM!</h1>
<div>
<p class="para">This is a paragraph.</p>
<p class="para">This is another paragraph.</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
const myPara= document.querySelectorAll('.para');
myPara[0].textContent="paragraph changed using querySelectorAll";
parentNode and childNodes
parentNode:- This property returns the parent node of an element. It represents the direct parent element in the DOM tree.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1>Hello, DOM!</h1>
<div>
<p >This is a paragraph.</p>
<p id="para">This is another paragraph.</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
const childElement = document.getElementById('para');
const parentElement = childElement.parentNode;
console.log(parentElement );
In this example, childElement represents an element with the ID "para." By accessing the parentNode property of childElement, we can retrieve its parent element and store it in the parentElement variable.
childNodes: This property returns a collection of all child nodes of an element, including text nodes, element nodes, and other types of nodes.
const parentElement = document.getElementById('para');
const childNodes = parentElement.childNodes;
console.log(childNodes );
Here, parentElement represents an element with the ID "para." By accessing the childNodes property of parentElement, we can retrieve a collection of all its child nodes and store them in the childNodes variable.
The childNodes collection is a live collection, meaning that it reflects any changes made to the actual DOM tree. It includes all nodes, including whitespace and line breaks, so you may need to filter out unwanted nodes when working with it.
To access specific child nodes within the collection, you can use index notation:
const firstChild = parentElement.childNodes[0];
// This is another paragraph.
const secondChild = parentElement.childNodes[1];
// undefined
In this example, firstChild represents the first child node of parentElement, and secondChild represents the second child node.
nextSibling and previousSibling
You can access the next sibling and previous sibling of an element using the nextSibling and previousSibling properties.
const next = element.nextSibling;
const previous = element.previousSibling;
