Well, you’ve studied Hypertext Markup Language (HTML), learned Cascading Style Sheet (CSS), make beautiful forms, made responsive web pages and you’ve started to show your family and friends the amazing work you are doing.
Then you decide to make the next move by asking yourself how you can make your website listen to events, make animation and also implement dynamic behavior on your web page. So that is where DOM comes to play its role.
DOM is an Application Programming Interface (API) for HTML and XML documents that represent how your HTML and XML documents are read by the browser. It defines the logical structure of documents and the way a document is accessed and manipulated. It is designed to be used with a scripting language such as JavaScript.
How it works
When we load an HTML or XML file on the browser, the browser creates an object through DOM from the HTML or XML file, it is a tree-like Data Structure that helps us to access every property of the object so easily.
Let’s look at some examples
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<h1>JavaScript DOM Manipulation</h1>
<div>
<p> Document Object Model (DOM) is an application Programming Interface (API) for HTML and XML</p>
</div>
</body>
</html>
This is the DOM representation of the above HTML code.
In Data Structure, a tree has one or more nodes. Similarly, in DOM objects there are lots of nodes. Keep in mind that every node is an object. In the diagram above, the parent node is the document which is having HTML as the child node, similarly, the HTML has head & body children. The body also has div & h1 as children nodes. The div also has p as a child node. So from the diagram above, to access the text node of the div of the body. The code is
document.html.body.div.p.text;
Some Basic Method for DOM manipulation
querySelector() is a method that is used to get the first element that matches the selector. If no match is found it returns null.
the syntax is
let player = document.querySelector(".name");
The code above will get the first element with the class name and assign it to the variable player.
- querySelectorAll() is a method that is used to get all the elements that match the selector, unlike querySelectorAll().
The syntax is
let players = document.querySelectorAll(".name");
The code above will get all the elements with the class name and assign it to the variable players.
- document.createElement() is a method that is used to create a new element. The syntax is
let description = document.createElement("div");
The code above will create a new element div and assign it the variable description. You can also fill the new element with any HTML content. To do that the syntax is
description.innerHTML = "<p>Hello Hashnode</p>";
The code above will fill the previously created div tag with the p tag.
- addEventListener() : event is what happens to an HTML element such as clicking, focusing, or deleting. We can use eventListener() to assign JavaScript functions to listen to these events. And do something when the event has occurred.
The syntax is
let btn = document.querySelector("button");
btn.addEventListener("click", foo);
In the code above, the first line will select the first button element in the HTML file and assign it to the variable btn. The second line will add an event, click to the btn variable (first button), when the event is received the code will run the function foo.
Summary
DOM defines the logical structure of documents, and the way elements can be accessed and manipulated. It is designed to be used with a scripting language such as JavaScript.
DOM is a tree-like data structure that helps us to access every property of the object so easily.
Don't just Read, Code it Yourself