Bad Monkey Business

The Solana NFT ecosystem is just as vibrant as Ethereum these days, many new projects come and go on this chain and some stay. Some of these projects even create DAOs that continue the project long…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Simplified Understanding of Javascript DOM

I am at the heart of every web page. I am your Document Object Model.

DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from the document. We can also add events to these elements to make our page more dynamic.

The DOM views an HTML document as a tree of nodes. A node represents an HTML element.

Let’s take a look at this HTML code to better understand the DOM tree structure.

Our document is called the root node and contains one child node which is the <html> element. The <html> element contains two children which are the <head> and <body> elements.

Both the <head> and <body> elements have children of their own.

Here is another way to visualize this tree of nodes.

Types of Nodes:

Using javascript you can get the node name and node type of any node:

2. nodeType — The nodeType property returns an integer value where these integers indicate the type of node.

If the node is an element node, the nodeType property will return 1.

If the node is an attribute node, the nodeType property will return 2.

If the node is a text node, the nodeType property will return 3.

If the node is a comment node, the nodeType property will return 8.

Now the Types of nodes include:

2. getElementsByClassName(): We can access the dom element by getElementByClassName() by providing the element with a class name. Example:

3. getElementsByTagName(): We can access the dom element by getElementsByTagName() by tag name itself. Example:

4. querySelector(): The querySelector() method returns the first element that matches a CSS selector. Example

5. querySelectorAll(): The querySelectorAll() method returns all elements that matches a CSS selector(s). Example

When a web page is loaded, the browser first reads the HTML text and constructs DOM Tree from it. Then it processes the CSS whether that is inline, embedded, or external CSS and constructs the CSSOM Tree from it. After these trees are constructed, then it constructs the Render-Tree from it. Lets go through them one by one:

DOM Tree: As already explained in the above section that the browser creates the Document Object Model. It is a tree of objects. Each node represents an HTML tag:

CSSOM Tree: After the browser had created the DOM tree in the previous step, it started creating the CSSOM. Stands for CSS Object Model. It is like the DOM but for CSS rules.CSSOM does not contain the document element which cannot be printed in screen example <head>, <meta> , <title> etc. So now the above DOM tree will become:

Render Tree: It is also a tree-like structure constructed by combining DOM and CSSOM together. The browser has to calculate the layout of each visible element and paint them on the screen.

As render Tree is a low-level representation of what will eventually get printed on the screen, it won’t contain nodes that do not hold any are in pixel matrix example : display: none as in pixel matrix it will represent as 0px 0px. Let's understand this by a diagram:

In the above diagram, the H2 tag is not visible in the render tree as it has displayed none.

There are some rendering sequences by which the tree gets rendered. Lets understand them briefly:

2. Paint Operation: Creating layers help the browser efficiently perform painting operation throughout the life cycle of the web page such as scrolling or resizing the window. Now we have layers we can combine to draw them on the screen. But the browser does not draw all the layers in a single go.

3. Composition Operation: NOw in this, the layers that are formed until now are sent to GPU to finally draw it on the screen. Sending the entire layers to draw is clearly inefficient because this has to happen every time a reflow or repaint happens. Hence a layer is broken into different tiles which are then drawn on the screen.

By manipulating the DOM, you have infinite possibilities. You can create applications that update the data of the page without needing a refresh. Also, you can create applications that are customizable by the user and then change the layout of the page without a refresh. You can drag, move, and delete elements.

As I said, you have infinite possibilities — you just need to use your creativity.

A custom event can be created using the event constructor, like this:

We created the event myevent, by passing the event name to the Event constructor. Event names are case sensitive so we named them as myEvent and MyEvent.

a).bubbles

The bubbles property specifies whether the event should be propagated upward to the parent element or not.

If we set this to true it will get dispatched in a child element and the parent element can listen to the event and perform an action based on that. That’s the behavior of most DOM events and for custom events, it is set to false by default. In case we only want it to be dispatching a particular element we can stop the propagation of the event via event.stopPropagation().

b). cancelable

The name implies all of it, cancelable specifies whether the event should be cancelable.

Native DOM events are cancelable by default so we can call event.preventDeafult() on it which will prevent the default action of the event if the custom event had cancelable set to false, as calling the event.preventDeafult() will not perform any action.

c). composed

The composed property specifies whether the event should bubble across from the shadow (created when using the web components)to the real DOM.

What is Virtual DOM ?

In simple words, virtual DOM is just a copy of the original DOM kept in the memory and synced with the real DOM by libraries such as ReactDOM. Virtual DOM has the same properties as the Real DOM, but it lacks the power to directly change the content of the screen.
Think of Virtual DOM as the blueprint of a machine, changes made to the blueprint don’t reflect on the machine itself.

Why do we need virtual Dom?

To understand why the concept of virtual DOM arose, let’s revisit the original DOM. As I mentioned, there are two parts to the DOM — the object-based representation of the HTML document and the API to manipulate that object.
For example, let’s take this simple HTML document with an unordered list and one list item.

If we want to modify the content of the first list item to “List item one” and also add a second list item. To do this, we will need use the DOM APIs to find the elements we want to update, create the new elements, add attributes and content, then finally update the DOM elements themselves.

A virtual DOM can be thought of as a copy of the original DOM. This copy can be frequently manipulated and updated, without using the DOM APIs. Once all the updates have been made to the virtual DOM, we can look at what specific changes need to be made to the original DOM and make them in a targeted and optimized way.

we can use the virtual DOM to single out the specific changes that need to be made to the DOM and make those specific updates alone. Let’s go back to our unordered list example and make the same changes we did use the DOM API.
The first thing we would do is make a copy of the virtual DOM, containing the changes we want to make. Since we don’t need to use the DOM APIs, we can actually just create a new object altogether.

This copy is used to create what is called a “diff” between the original virtual DOM, in this case, the list, and the updated one.
A diff could look something like this:

const diffs = [
{
newNode: { /* new version of list item one */ },
oldNode: { /* original version of list item one */ },
index: /* index of element in parent’s list of child nodes */
},
{
newNode: { /* list item two */ },
index: { /* */ }
}
]
This diff provides instructions for how to update the actual DOM. Once all the diffs are collected, we can batch changes to the DOM, making only the updates that are needed.

We should avoid manipulating the DOM. Some of the best practices are:

We can put a lot of styling code in our CSS instead of manipulating it directly with JavaScript.

For example, if we want to make an input field border be displayed as red when we click input submit.we can write the following HTML code:

and the javascript code as :

Instead of the above code, we can do it by CSS by making a class and calling the class name in the javascript code:

CSS:

.invalid {
border: 1px solid red;
}

javascript code:

We can reduce the number of items that needed to be loaded by reducing the elements on our page.

We can use getElementById .

Getting things by ID is faster since there’s only one element with a given ID on a page. This means our browser doesn’t have to check all the nodes to find all the items.

For example, we can write:

If we only want to get one element with the given selector, we can use querySelector to get the DOM node with the given selector.

The browser stops looking after the first node with the given selector is found, which makes the lookup faster.

For example, we can write:

You made it all the way until the end! Hope that this article helped you understand the Javascript DOM and how to use it to manipulate elements on your website.

We have covered these topics in this blog.

If you have found this useful, please consider recommending and sharing it with other fellow developers.

If you have any questions or feedback, let me know in the comments down below.

Bad Monkey Business

Simplified Understanding of Javascript DOM

Add a comment

Related posts:

Which Sales Forecasting Method is Best for Your Business?

The Blue and the Red Elephant

What is coming up?