DOM or Document Object Model is a representation of the web page or document, which can be modified with a scripting language such as JavaScript according to MDN.
It characterizes the DOM HTML document as a hierarchical tree structure and each element in the document tree is called a Node.
DOM nodes represent all components that make up a web page. For example, a head tag is considered to be a node. Most nodes have a starting tag and ending tag. Things can be nested inside these tags. The inner node is called a child node and the outer node is considered to be its parent node.
Some nodes are self-closing tags like the "img" tag. These are called void nodes and cannot be a parent node, meaning things can’t be nested within them.
Refer to the graph below.
Since 'document' is an object which has properties and attributes, it will have properties & methods. In order to access things within an object, we use selector and query methods to change the content displayed in the browser.
Element Selectors
document.getElementById("idName")
//This method only returns the one element by the specified ID.
document.getElementByClass("className")
//This method returns all elements inside the whole document by the class you specified.
document.getElementById("someElement").getElementsByClassName("className")
//It works in all elements of the DOM, this will return all elements by the class you specify inside the element you want
Query Selectors
document.querySelector("#idName")
//This method takes one argument, which is a CSS selector & returns the first element that matches the selector.
document.querySelectorAll(".className")
//Works similar to above; returns a node list collection of all matching elements.
Create an Element
APPEND
document.createElement("body")
//this method creats the element, but it does not show up on the page.
document.body.append(element)
//this method gets the element to appear on the page.
.INNERHTML
<h1 id="greetings"> HELLO </h1>
let element = document.querySelector("#greeting")
element.innerHTML = "Welcome"
//selects the h1 called greetings and changes HELLO to welcome
Changing Attributes
const element = document.querySelector(".container")
element.style.backgroundColor="#f0f0f0"
//changes the selected elements(in this case the container class) color to grey
Removing Elements
element.remove()
//removes a whole element from the page
This is just a basic overview of some of the methods used to manipulate the DOM.
Top comments (15)
Just a little fix in:
Fixed:
Good job 😄
Thanks, just updated it.
good one
This one is quite special method, and is harder explain than
Well,
document.bodyis a special DOM object traversal.Does anyone know of a book that focuses solely on the DOM and methods associated with the Document object? MDN is a great resource but I don’t find the guides on the DOM that helpful.
Search for Dom tutorial by Brad Traversy on youtube, he pretty much covered all you need and I hope this is not coming too late.
Thanks man. I will take a look! 😎
By the way, his name feels very appropriate: traversing the DOM with Brad Traversy.
Haha!.... You welcome
Good article. Also if we have frequent Dom manipulation, good way to manipulate the Dom is by using createDocumentFragment(API) for better performance.
Great Article Iqra!. Keep writing.
Thanks!
I've seen videos covering this topic, I can't keep up with them but this one is just simple and direct to the point. Now I can go and re-watch those videos with a better fundamental of this subject.
Thank you. 🤘
thanks for the reminder
Clear and brief 👍🏼
Thanks for this simple article!