JavaScript Document Object Model (DOM)

avatar


image.png

Image Source

Whenever a webpage is loaded into the browser, the browser creates the DOM (Document Object Model) first from the corresponding HTML document before it gets rendered into the browser. It is basically a tree-like representation of your HTML document. Through this DOM, JavaSCript can understand and interpret your HTML. It can even manipulate the elements, classess, ids, attributes and so on with the help of DOM. In DOM, each of your HTML tags are represented as an object. These HTML elements are also represented as nodes in DOM and basically DOM is a tree of nodes. Consider the following simple markup langugage.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
    <h2>JavaScript DOM</h2>
    <div id="div1">
        <p id="para1">Paragraph 1</p>
    </div>
    <div id="div2">
        <p id="para2">Paragraph 2</p>
    </div>
</body>
</html>

The document is always the root node. This node contains one child node which is <html>. It has two child node: <head> and <body>. <head> has one child node which is <title>. Similarly <body> has three child nodes which are <h2>, <div> and <div>. Each <div> again have their own child node which is <p>. In DOM, this is represented as a following tree like structure.

DOM.drawio.png

Created From draw.io

With DOM, JavaScript is really a fun way to learn. You can control error while user tries to submit incorrect form in the client side, makes your webpage more interactive by adding more style, changing text style while user performs something and so on.



0
0
0.000
0 comments