Definition of DOM
DOM(Document Object Model) is a standard data model. The DOM is the javascript way of viewing an html page. The DOM is a platform and interface that allows programs and scripts to access and modify the content, structure, and style of a document. The term HTML DOM refers to an html document. The case here is that the content, structure, and style of an html document can be accessed and modified using the javascript syntax.
- Things Javascript can do with DOM
- Javascript can modify any HTML element on a web page.
- Javascript can change any HTML attribute on a web page.
- Javascript can change any CSS style on a web page.
- Javascript can omit existing HTML elements and attributes.
- Javascript can add new HTML elements and attributes.
- Javascript can react to every event that occurs on a web page.
- Javascript can create new events on web pages.
- querySelector() vs querySelectorAll()
There are two ways to select the DOM: querySelector() and querySelectorAll(). What’s the difference between the two?
- querySelector()
Is a method that we use to select only one DOM. How to use it, we first enter it into a variable.
- querySelectorAll()
As for this querySelectorAll otherwise, we can retrieve all the DOM with the selector we specify. So for example there are 10 divs, we can take them all, and later will be stored as a Nodelist, a thread.
- Working with attributes
There are times when handling the DOM, we have to change its attributes programmatically. Btw, you know the attributes, right? For those who don’t know, attributes are rich in class, id, action, type, in an HTML element. And we can add custom attributes as needed. To set the attribute, we use the name setAttribute. So the first parameter is the attribute name, followed by the value. Then, to retrieve the value of an existing attribute, we use the getAttribute method. This method has only one parameter, namely the name of the attribute whose value will be taken.
- Changing the contents of the DOM
Sometimes we need to change the contents of the DOM. Typical usage examples are for elements containing alert notification messages. It’s impossible to make multiple divs with different messages and styles. Of course, only make 1, then the contents are changed using JS, by default the content is “Data saved successfully”, while if it fails, it is replaced with “Failed to save data”. Changing it is with innerHTML. By changing the contents of the DOM, we can manipulate it more easily.
- Conclusion and Closing
To make the website look more dynamic, of course we need the DOM to manipulate it, with the DOM we can easily manipulate the HTML to make it look more attractive.
The need for digital IT is needed in daily activities, Bead IT Consultant is the right choice as your partner, visit our website by clicking this link: www.beadgroup.com