What is DOM using JavaScript?
Hi, I am Airen, learning programming in Canada. Today I am going to write about what is DOM using JavaScript.
The official name of the DOM
DOM stands for “Document Object Model”. The DOM is a model for the objects of a document. So we can see that it is not a programming language like JavaScript. DOM is A number of functions and rules for manipulating HTML and XML documents.
What is the role of the DOM?
In fact, the DOM can be broadly classified into three categories.
- Core DOM: The underlying model for all document types.
- XML DOM: The underlying model for XML documents.
- HTML DOM: The underlying model for HTML documents.
In this section, we will list the ones defined by the HTML DOM, which will be the most common for the reader. The other two are conceptually the same, only the objects they manipulate change.
- Representing HTML elements as objects
- Properties of all HTML elements
- Methods to allow access to all HTML elements
- Events for all HTML elements
As you can see, the DOM defines a wide range of things, but if we were to rephrase the above definition in one sentence, it would be as follows.
The HTML DOM is a standard for retrieving, modifying, inserting and deleting HTML elements.
In other words, thanks to the DOM, we front-end engineers are able to manipulate the document structure (HTML), styling (CSS), and content of web pages using the JavaScript programming language and jQuery.
What is a DOM tree?
When a web page is loaded, the browser (Chrome, Safari, etc.) forms the DOM of the loaded page. The hierarchical structure of that DOM looks like the picture above. This hierarchical structure is called the DOM tree.
Example of DOM manipulation with JavaScript
Let’s check out one rule of the DOM. This is just an example of one of the many DOM definitions.
var h2s = document.getElementsByTagName(‘h2’);
By executing the above code, the standard DOM defines that the getElementsByTagName method must return a list of all <h2> elements in the document.
How to get HTML elements using the DOM
Now, let’s try manipulating HTML from JavaScript by utilizing the object data created by the DOM!
In general, it’s easy to use the Document object’s method “getElementById()”.
Look at the following sample example!
Execution result
In this example, a p element with the id attribute value “text” has been placed. The feature of the “getElementById()” method is that the p element can be retrieved by JavaScript by using this id attribute value.
As a test, if we output the variable “p” to the console log, we can see from the execution result that the p element is firmly retained.