Understanding the DOM
Making a website interactive is possible thanks to the Document Object Model, usually referred to as the DOM. The DOM is an interface that allows a programming language to manipulate the structure, the content and style of a website.
Understand what it is and how it works allows programmers to create websites that can dynamically change on the browser while the source on the server will not change and will never be affected by client-side script executions.
What is the DOM?
The Document Object Model is a representation of the HTML and CSS structure and style. Basically, the browser that you use to view a website creates a representation of the code that can be accessed by other web-scripting language as objects.
In this very basic website you can find the absolute most essential aspects of any website document — a doctype, and an html tag with the head and body nested inside.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Understanding the DOM</title>
</head>
<body>
<h1>Hello DocumentObjectModel</h1>
</body>
</html>
If you save this code in an html and open it in your browser you will be able to see this very basic website being rendered and using your browser development tools you will be able to inspect the DOM implementation.
On this example the DOM will look exactly as the same HTML source code just wrote and by hovering each element will highlight the respective element in the rendered website.
The Object and its Properties
The document object is a build-in object that has several properties and methods that allows the programmers to modify websites.
You can easily see the object by typing in the JavaScript console in your browser developer tools document and press ENTER:
> document;
While you can see the exact code the file created have on it, this browser-generated code named DOM allows to:
- Be modified by client-site code.
- Fix automatically source code errors.
If you want to see how the DOM can be modified by client-site scripting, typing document.body in the console will respond with the body of the DOM, document is an object, body is a property of that object that is being accessed with dot notation.
> document.body;
<body>
<h1>Hello DocumentObjectModel</h1>
</body>
Also directly in the console some of the live properties of the body object on this website can be modified. For example change the background color property by typing document.body.style.backgroundColor = ‘red’; in the console and press ENTER
{…} typing document.body in the console will respond with the body of the DOM, document is an object, body is a property of that object that is being accessed with dot notation.
After typing and submitting this instruction the website will be live updated with this new background color.
While the DOM is being live modified if you check the page source code, usually by right clicking on the page and select “View Page Source”, you will notice that the source code of the website doesn't include this new style attribute. Which will make the background color change made it on the console to disappear if the webpage is refreshed.
Conclusion
The source of a website will not change and will never be affected by client-side JavaScript. However changes on the DOM can be performed and this allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.
Understand what the DOM is and how it works will help you to create more dynamic websites that can be changed on the browser while the source on the server will not change and will never be affected by client-side script executions.
If you want to know more the SalsaMobi education efforts on different technologies may be a good start point, also you can subscribe here and we will notified you when we create more articles or tutorials.
Julio Marin is an advocate for the research and implementation of new technologies and their use on day to day life. Research areas include multimedia development and delivery, cryptocurrencies, mobile development and marketing automation. Currently works in SalsaMobi as Senior Curriculum Developer and Blockchain Development Team Lead.
