Understanding Document Object Model (DOM) in Details

We have all listened of a DOM, or Document Object Model, that gets mentioned from time to time, associated to JavaScript. DOM is a flattering critical judgment in web development. Without it, we wouldn’t be means to dynamically cgange HTML pages in a browser.

Learning and bargain a DOM formula in improved ways of accessing, changing, and monitoring opposite elements of an HTML page. The Document Object Model competence also assistance us reduce nonessential increases in book execution time.

Data structure trees

Before articulate about what a DOM is, how it comes into existence, how it exists, and what happens inside of it, we wish we to know about trees. Not a coniferous deciduous kind though about a data structure tree.

It’s a lot easier to sense a judgment of information structures if we facilitate a definition. we would say, a information structure is about arranging your data. Yes, usually plain aged arrangement, as we would arrange a seat in your residence or books in a bookshelf or all a opposite food groups you’re carrying for a dish on your image in sequence to make it suggestive to you.

Of course, that’s not all there is to a information structure, though that’s flattering most where it all starts. This “arrangement” is during a heart of it all. It’s flattering critical in a DOM as well. But we’re not articulate about DOM yet, so let me drive we towards a data structure that we competence be informed with: arrays.

Arrays trees

Arrays have indices and length, they can be multi-dimensional, and have many some-more characteristics. As most as critical it is to know these things about arrays, let’s not worry ourselves with that right now. To us, an array is flattering simple. It’s when we arrange opposite things in a line.

Illustration of a elementary arrayIllustration of a elementary array

Similarly, when meditative of trees, let’s say, it’s about putting things next one another, starting with usually one thing during a top.

Illustration of a tree structureIllustration of a tree structure

Now, we competence take a singular line ducks from before, turn it upright, and tell me that “now, any steep is underneath another duck”. Is it a tree then? It is.

Depending on what your information is or how you’ll be regulating it, a greatest information in your tree (called a root) competence be something that is of good importance or something that’s usually there to enclose other elements underneath it.

Either way, a greatest component in a tree information structure does something really important. It provides a place to start acid for any information we wish to mislay from a tree.

Searching in a tree information structureSearching in a tree information structure

The definition of DOM

DOM stands for Document Object Model. The Document points to an HTML (XML) document that is represented as an Object. (In JavaScript all can ever usually be represented as an object!)

The Model is created by a browser that takes an HTML request and creates an intent that represents it. We can entrance this intent with JavaScript. And given we use this intent to manipulate a HTML request and build a possess applications, DOM is fundamentally an API.

The DOM tree

In JavaScript code, a HTML request is represented as an object. All a information review from that request are also saved as objects, nested underneath one another (because like we pronounced before, in JavaScript all can ever usually be represented as objects).

So, this is fundamentally a earthy arrangement of DOM information in code: all is arranged as objects. Logically, however, it’s a tree.

The DOM Parser

Every browser module has a module called DOM Parser that is obliged for parsing an HTML request into DOM.

Browsers review an HTML page and spin a information into objects that make adult a DOM. The information benefaction in these JavaScript DOM objects are logically organised as a information structure tree famous as a DOM tree.

DOM ParserDOM Parser

Parsing information from HTML to a DOM tree

Take a elementary HTML file. It has a root element html. Its sub-elements are head and body, any has many child elements of their own.

So essentially, a browser reads a information in a HTML document, something identical to this:


And, arranges them into a DOM tree like this:

DOM treeDOM tree

The illustration of any HTML component (and a belonging content) in a DOM tree is famous as a Node. The root node is a node of html.

The DOM interface in JavaScript is called document (since it’s a illustration of a HTML document). Thus, we entrance a DOM tree of an HTML document by a document interface in JavaScript.

We can’t usually access, though also manipulate a HTML document by a DOM. We can supplement elements to a web page, mislay refurbish them. Each time we change or refurbish any nodes in a DOM tree, it reflects on a web page.

How nodes are designed

I have mentioned before that any square of information from an HTML request is saved as an intent in JavaScript. So, how a information saved as an intent can be logically organised as a tree?

The nodes of a DOM tree have certain characteristics or properties. Almost any node in a tree has a primogenitor node (the node right above it), child nodes (the nodes next it) and siblings (other nodes belonging to a same parent). Having this family above, below, and around a node is what qualifies it as a part of a tree.

This family information of any node is saved as properties in a intent representing that node. For example, children is a skill of a node that carries a list of a child elements of that node, so logically arranging a child elements underneath a node.

Avoid overdoing DOM manipulation

As most as we competence find updating a DOM useful (in sequence to cgange a web page), there is such a thing as overdoing it.

Say, we wish to refurbish a tone of a div on a web page regulating JavaScript. What we need to do is accessing a analogous DOM node object and refurbish a tone property. This shouldn’t impact a rest of a tree (the other nodes in a tree).

But, what if we wish to remove a node from a tree or add one to it? The whole tree might have to be rearranged, with a node private or combined to a tree. This is a dear job. It takes time and browser apparatus to get this pursuit done.

For example, let’s say, we wish to add 5 additional rows to a table. For any row, when a new nodes are combined and combined to a DOM, a tree is updated any time, adding adult to 5 updates in total.

We can equivocate this by regulating a DocumentFragment interface. Think of it as a box that could hold all a 5 rows and be combined to a tree. This approach a 5 rows are added as one singular square of data and not one by one, heading to usually one refurbish in a tree.

This doesn’t usually occur when we mislay or supplement elements, though resizing an element can also impact other nodes, as a resized component competence need other elements around it to adjust their size. So, a analogous nodes of all a other elements will need to be updated and a HTML elements will be rendered again according to a new rules.

Likewise, when a blueprint of a web page as a whole is affected, a partial or a whole of a web page competence be re-rendered. This is routine is famous as Reflow. In sequence to avoid extreme reflow make certain you’re not changing a DOM too much. Changes to a DOM aren’t a usually thing that can means Reflow on a web page. Depending on a browser, other factors can minister to it, too.

Wrapping up

Wrapping things up, a DOM is visualized as a tree done adult of all a elements found in an HTML document. Physically (as earthy as anything digital can get), it’s a set of nested JavaScript objects of that properties and methods reason a information that creates it probable to logically arrange them into a tree.

Add Comment