The Javascript HTML Document Object Model is often abbreviated to DOM. The DOM or (Document Object Model) refers to the elements that javascript can interact with on a html page.

To fully understand the DOM it is best to be aware of ‘Inspect Element‘. To explain the DOM first of all create a basic HTML page and load it into the browser.

Now if you right click on the blank web page or or (control + click for a mac) and select ‘Inspect Element’ you will be able to see the DOM.

Javascript HTML Document Object Model. Inspect Element.
Right click for windows or control + click in a mac and select ‘Inspect Element’.

Clicking on ‘Inspect Element’ will open the ‘Developer Tools’. The DOM is visible in the ‘Developer Tools’ window.

Javascript HTML Document Object Model. The DOM.
The DOM.

Next a ‘div’ element with the id of ‘addText’ is added on line 9.

Now the addition of the new ‘div’ element will also appear in the DOM if the element is inspected in the web browser.

Javascript HTML Document Object Model. A div added to the DOM.
The DOM with a new ‘div’ that has an ‘id’ of ‘addText’.

The DOM however is not the HTML document. To demonstrate this we use some javascript to add text to the ‘div’ with an ‘id’ of ‘addText’.

On lines 11 and 12 a text node is created and then appended to the ‘div’ element with an ‘id’ of ‘addText’ in the html document.

Above on line 9 the HTML document does not have the line of text ‘This is some text!’ in-between the ‘div’ tags.

Javascript HTML Document Object Model. This is some text.
Text is added to the page with javascript.

By again inspecting the element in the browser the DOM appears and this time it is different to the HTML document above. The text ‘This is some text!’ is between the ‘div’ tags. The javascript has changed the DOM and this is shown on the webpage.

Javascript HTML Document Object Model. DOM with the state changed.
In-between the ‘div’ tags is the text added by javascript. The HTML document does not have this text in-between the div tags.

Javascript HTML Document Object Model

Javascript can alter the DOM however the HTML document remains unchanged. Knowledge of the DOM allows for a better understanding of how to design and manipulate webpages.

To see how the DOM and the HTML document change again study the following code snippet. The ‘div’ tags have been removed and on line 10 one line of javascript code replaces the previous javascript.

Javascript HTML Document Object Model. A heading.
document.write(“<h1>Heading</h1>”);

Look at the DOM! The ‘h1’ is added by the javascript.

Javascript HTML Document Object Model. Document Object Model.
The ‘h1’ element added to the DOM.

The DOM may resemble a HTML document however the DOM is not a html document. The DOM is the Document Object Model and this needs to be understood as the DOM is what the browser uses to render a webpage.


More on Javascript

Javascript logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *