Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Understanding DOM(Document Object Model)
2.1.
Features Provided by DOM in JavaScript
3.
Understanding Nodes
3.1.
Creating New HTML Nodes(Elements)
3.2.
Creating New HTML Nodes(Elements)-insert before()
3.3.
Removing Existing HTML Node
3.4.
Removing a Child Node
3.5.
Replacing HTML Elements
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024

JS DOM Nodes

Author Naman Kukreja
0 upvote
Create a resume that lands you SDE interviews at MAANG
Speaker
Anubhav Sinha
SDE-2 @
12 Jun, 2024 @ 01:30 PM

Introduction

First, we will have an idea about DOM. Suppose you need to make some changes in HTML and CSS files, but for this, you have to write the changes respectively in those files. But with the help of DOM, you can change both HTML and CSS in javascript.

The DOM model of javascript is advantageous as it provides us with lots of features and independence to improve our code.

So without wasting any time, let's dive into our topic.

Also Read, Javascript hasOwnProperty

Understanding DOM(Document Object Model)

Document Object Model or DOM is a platform model representing HTML documents and is also language-independent. It defines the structure of the documents and how the program can access them.

In DOM, all the parts of the documents such as text, elements, etc are arranged in a hierarchical structure like a tree. Each branch of the tree starts and ends with nodes.

Features Provided by DOM in JavaScript

The features provided by DOM are as follows:

  • Javascript can change all the HTML attributes and elements on the page.
  • It can change all styles of CSS on the page.
  • It can create or remove HTML elements and attributes on the page.
  • It can find all the elements with a particular id and class with one function.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Understanding Nodes

Let us understand Nodes with the help of figure:

The above image demonstrates the relationships of nodes. They are known as parent/child relationships. The top node of the tree is the document node which is the root node of the DOM tree. The root node has only one child <html> and the<html> has  two children, i.e.,<head> and <body>.

Nodes that are present on the same level are known as siblings. There can be many siblings, but there should be only one parent of the child nodes, and siblings can have the same parent.

Further, the <head> and <body> contain multiple child nodes according to their use, and in the same way, the tree continues to grow. All HTML attributes such as class, title, id, etc., are also considered in nodes but not in the parent/child relationship.

Every element in an HTML document can be accessed by Javascript by specific properties and methods.

Creating New HTML Nodes(Elements)

To create a new element in HTML DOM, you first need to create the node and then append it to the existing element:

<div id="div1">
    <p id="p1">This is Coding.</p>
    <p id="p2">This is Ninja.</p>
  </div>
 
  <script>
  const par = document.createElement("p");
  const node = document.createTextNode("This is best");
  par.appendChild(node);
 
  const element = document.getElementById("div1");
  element.appendChild(par);
  </script>

 

Understanding the above example:

Step 1: First we created a new <p> element:

const par = document.createElement("p");

Step 2: After this, we created a text node to enter text in p and then appended the par with a text node:

const node = document.createTextNode("This is best");
  par.appendChild(node);

Step 3: Finally, we find our current element and then append our new element with the current one:

const element = document.getElementById("div1");
  element.appendChild(par);

Creating New HTML Nodes(Elements)-insert before()

In the last method, we append the new element at the end of the existing element but here, we will append before it:

<div id="div1">
    <p id="p1">This is Coding.</p>
    <p id="p2">This is Ninja.</p>
  </div>
 
  <script>
  const par = document.createElement("p");
  const node = document.createTextNode("This is best");
  par.appendChild(node);
 
  const element = document.getElementById("div1");
  const child = document.getElementById("p1");
  element.insertBefore(para, child);
  </script>

Removing Existing HTML Node

We can remove an HTML element by just using remove() function:

<div>
    <p id="p1">This is Coding.</p>
    <p id="p2">This is Ninja.</p>
  </div>
 
  <script>
  const elmnt = document.getElementById("p1"); 
  elmnt.remove();
  </script>

 

Understanding the above example:

Step 1: First we find the element that we wanted to remove, as we wanted to remove the element with id p1, so we search for it:

const elmnt = document.getElementById("p1");

Step 2: Now we use the remove function to delete the element:

element.remove();

Removing a Child Node

Some browsers do not support the remove() function. So in these types of browsers we first have to find the parent node to delete the element:

<div id="div1">
    <p id="p1">This is Coding.</p>
    <p id="p2">This is Ninja.</p>
  </div>
 
  <script>
  const parent = document.getElementById("div1");
  const child = document.getElementById("p1");
  parent.removeChild(child);
  </script>

 

Understanding the above example:

Step 1: Here first we find the parent corresponding to the node we want to delete and the node also

const parent = document.getElementById("div1");
  const child = document.getElementById("p1");

Step 2: Now we just have to use removeChild() function:

parent.removeChild(child);

Replacing HTML Elements

For replacing an element we just have to use the replaceChild() method.

Let us understand it with an example:

<div id="div1">
    <p id="p1">This is Coding.</p>
    <p id="p2">This is Ninja.</p>
  </div>
  <script>
  const para = document.createElement("p");
  const node = document.createTextNode("This is best.");
  para.appendChild(node);
 
  const parent = document.getElementById("div1");
  const child = document.getElementById("p1");
  parent.replaceChild(para, child);
  </script>

Practice it on an online JS editor.

FAQs

  1. What does DOM stand for?
    DOM stands for Document Object Model.
     
  2. Other than HTML, where can we use DOM?
    Other than HTML documents, we can use DOM for XML documents.
     
  3. Which functions can we use to remove elements from an HTML document using DOM?
    You can use the function as remove(), removeChild().
     
  4. What are node properties?
    nodeName, nodeValue, nodeType are some of node's properties.

Key Takeaways

In this blog, we have learned about DOM, How the data is stored, nodes, Parent/Child relationships, how to work with nodes.

Check out this problem - Connect Nodes At Same Level

If you want to learn more about javascript, DOM, you must look at the Coding Ninja Full-stack Web development Course. Here you will get a complete way of learning about the frontend and backend.

 

Previous article
Introduction to DHTML
Next article
Javascript DOM navigation
Live masterclass