Why HTML DOM?
Structure of DOM
The structure of DOM is compared with that of a tree with elements, both parent and child elements, in the form of objects. Each of the elements in the DOM is known as a node. We can also add events to the elements of the DOM. If there are multiple nodes present, we can access them with the help of their unique index.
There are many methods and properties with which we can view and manipulate the object model. Let us explore them.
By targeting ID
A unique id attribute can be given to an element in the HTML document. We can access that particular element of the document with the given id by using the method
getElementbyId(). Let us understand its syntax.
This is the only parameter of this method. It is the string that we have given to an element of HTML as an ID.
It returns the element of the document whose id we have given as a parameter. If none of the elements have the id we have given as a parameter, then a null is returned. Once the element gets accessed, we can make operations on it.
By targeting class
The class attribute can be given to multiple elements in an HTML document. We can access all those elements with the same class name using the method
getElementsByClassName(). Let us understand its syntax.
This is the only parameter in this method. We put the class name of the elements that we need to access in this parameter.
All the elements with the given class names get accessed and we can manipulate them with other methods.
An HTML document can contain many tags. They are usually enclosed within triangular brackets. Examples of tags are
<p>, <h1>, <strong>, <em>, <abbr> etc. We can target tags with the help of the method
getElementsByTagName(tagName). Let us understand its syntax.
We should put the name of the tag which we want to access inside it. It is the only parameter of this method.
All the tags will get accessed. Once they are accessed we can manipulate them with subsequent commands.
By query selector
We can target the element with single or multiple selectors using the query selector method. We can do it by
querySelectorAll() methods. Let us understand their syntax.
document.querySelector("h1, p, span") document.querySelectorAll("h1, p, span")
These two methods have only one parameter. We have to put the single or multiple selectors of elements in the HTML document.
In the first method, the first element in the HTML document which corresponds to the selector in the parameter is accessed whereas, in the second method, all the elements in the HTML document which correspond to the given selector get accessed.
Create and delete elements
In all the above methods, we have seen how we can access the elements of an HTML document. Just accessing with manipulating them is of no use. So now we are going to discuss some of the ways in which we can create and delete elements of the HTML document.
createElement() method using which we can create elements.
This is the only parameter for this method. In this parameter, we have to put the name of the node which we want to create.
A node gets created in the dom. For example, if we put div in the name parameter, a div gets created.
We can add a node to a parent as the last child of the parent node using the append child method. Let us understand the syntax of this method.
This is the node to which we want to add an element as the last member
This is the element we want to add to a parent node as the last node.
We get the parent node getting added with the provided child as the last element.
At times, there comes a need of removing the created or already present child in the parent node. We can use the
removeChild() method to remove them. Let us understand its syntax
This is the node from which we want to delete an element.
This is the element we want to delete from the parent node.
It returns a node by deleting the element specified in the parameter.
We can also replace an older node in a parent node with a new node with the help of the
replaceChild() method. Let us understand its syntax
This is the parent node inside which you want to replace a node with a newer one
New and old
New is the new node that we want to replace with an old node i.e old in the syntax.
Insert a node before an existing one
We can directly insert a node before a particular node inside a parent node using the DOM methods. We use the
insertBefore() method for it. Let us understand its syntax
This is the parent node inside which you want to add a new node.
It is the new node that you want to add
It is the node before which you want to add the new one
The parent node gets added with the new node specified in the parameter before the older node.
We can access any object using the methods we have discussed earlier in this article. In place of click, we can use any event from many events that are available. Let us discuss some of the most used events.
click: The function gets triggered on clicking the object
mouseover: The function gets triggered when the mouse hovers over the object
dblclick: The function gets triggered when the object is clicked twice
keypress: The function gets triggered when the user presses a key
mousedown: The function gets triggered when the user clicks the mouse
mouseleave: The function gets triggered when the mouse leaves the object
cut: The function gets triggered when the user cuts the content of the object
copy: The function gets triggered when the user copies the content of the object
Unlimited access to all platform courses
100+ practice projects included
ChatGPT Based Instant AI Help
Structured Full-Stack Web Developer Roadmap To Get A Job
Exclusive community for events, workshops
Sharing is caring
Did you like what Manish wrote? Thank them for their work by sharing it on social media.