What is the Document Object Model?

Is the logical structure of the HTML and XML document in the form of a hierarchical list of nodes. The structure of the nodes is arranged in the form of a tree structure, in which each node is an object representation of parts of the document. Each branch of the document leads to a node, and each node has an HTML data object. Thanks to this we have access to facilities. The DOM allows through its methods to manipulate these objects. The methods give us access to manipulation of tags, attributes, identifier selectors, class selectors and many others.

Document Object Model structure in short DOM

We can imagine the DOM as a tree with branches, the whole tree is just the structure of the HTML document, and the individual branches are its nodes. The document is created using objects that create individual elements of the document, such as HTML tags and attributes.

What the DOM tree structure looks like

The tree has root or root. This is the main object in the document called Window, then the node leads to the next object called Document and assuming, for example, that we have links on the page, and the form, the individual branches of the tree will split into links, the form and anchors, of which the form will have next nodes i.e. branches leading to objects textarea, checkbox, radio, select, reset, button, and with select another branch leads to option object.