Hey everyone,

I am here to explain DOM in deep as i have seen many people struggling with DOM.I hope you all will find it very useful

Let's Begin....

WHAT IS DOM

The Document Object Model (DOM) is a programming interface for web document. The strongest point of the JavaScript is DOM and (Event) too. DOM is an HTML part it represent the page so that programs can change the document structures, styles and content. DOM represent the document as an objects.

Actions Of DOM In JavaScript

some of the action we can perform with this model are:

• Change or Remove HTML tag on the page
• Change or Add CSS styles to element
• Read and Change the Attributes (href, src, alt), etc
• Create new elements and insert them into the page
• Attach event listener to an elements (click, keypress, submit)

const clickBtn = document.querySelector("#click-btn")

function clicked (){
console.log("clicked")
}

clickBtn.addEventListener("click" , clicked)

:- This is an example of addEventListener(click) function

How To Target DOM

There are many ways to target DOM but usually we use this type to target

• To target ID selector we use document.getElementById("ID")

  const inputDiv = document.GetElementById("input-div")
  

• To target Class selector we use document.getElementByClassName("className")

  const inputDiv =  document.getElementByClassName("input-div")
  

• To target the Tag Name like (p, h1, body, hr, br) we use getElementByTagName("tag")

  const para = document.getElementByTagName("p")
  //paragraph tag is used
  

  This is the most used properties of DOM

• querySelcetor is one of the most frequently used property of DOM.

For eg:-

const inputDiv = document.querySelector("#input-div")
//it is used for ID 

const inputDiv = document.querySelector(".input-div")
//it is used for Class

• querySelectorAll it is only used for Class. When a HTML index has multiply class with a same name then querySelectorAll is used.

  const inputDiv = document.querySelectorAll(".input-div")
  

  DOM Class List

  Properties and Methods

• add() => Adds one or more token to the list.

• remove() => Removes one or more token from the list.
• toggle() => To add and remove token from the list at a same time.
• value() => Returns the token list as a string
• length() => Returns the number of token in the list
• contains() => Returns true if the list contains a class
• replace() => Replaces a token in the list

some examples of classlist

element.classList.add("myStyle", "anotherClass", "thirdClass");
//to add() the class

element.classList.remove("myStyle", "anotherClass", "thirdClass");
//to remove() the class

let numb = element.classList.length;
//to get the length()

let x = element.classList.contains("myStyle");
//to find whether the page contains() this class or not

Want to know more about classList you can refer Guide

Manipulation The DOM

• innerText => Returns the text content of an elements and all its children.
• innerHTML => Returns the content of an element, including with spacing and inner HTML tags.
• innerContent => Returns the text content of an elements with spacing and CSS hidden text, but without tags.
• getAttributes() => Returns the value of an elements attribute. eg:- name, value etc
• setAttributes() => To set a new value to an attributes

• createElement() => createElement() accept the HTML tags name and return the a new node with an element type.

• append() => The append() method inserts a set of Node objects or DOMString objects after the last child of a parent node.

• prepend() =>The prepend() method inserts a set of Node objects or DOMString objects after the first child of a parent node

some examples of createElement(), innerText , append() and prepend()

const b = document.createElement('b')
b.innerText = 'HELLO WORLD'
const i = document.createElement('i')
i.innerText = 'GOODBYE GALAXY'
const p = document.querySelector('p')
p.append(b, i) // append both b and i to the end of
p
p.append(b) // just append b to the end of p
p.prepend(i) // prepend i to the start of p

Thanks everyone this is from my side, I wrote how much i know about DOM, If something is missing please do Comment and let me know what i have missed.If you find it useful and for more Blogs you can follow me on Hashnode