JavaScript

Understanding the basics of DOM (Document Object Model)

Introduction to DOM API methods and DOM traversal.

Uday Hiwarale

Published in

JsPoint

8 min readApr 29, 2018

If you are beginning career in front-end development, then DOM is one of the crucial things to learn. Having awesome libraries like jQuery, React or frameworks like Angular, you won’t feel need to touch DOM at all, but you should have at least basic understanding of it.

DOM is abbreviation for Document Object Model. It’s a tree like structured representation of HTML elements. For sake of simplicity, let’s consider a simple scenario. When you enter an URL in the browser, browser asks web server (where that URL points to), to return simple HTML document. That document contains nothing but plain text but written in HTML language (text/html). When browser get’s the response, that text is used to print different segments and content on the screen with different styles and behaviour. How browser does that from simple HTML text? This is where DOM comes into picture.

A typical HTML document looks like this.

<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>        <!-- assets here -->
    </head>
    <body>
        <div class="container">
            <h3>Hello World!</h3>
        </div>
    </body>
</html>

JavaScript

Understanding the basics of DOM (Document Object Model)

Introduction to DOM API methods and DOM traversal.

Written by Uday Hiwarale