What is the JavaScript DOM? (Document Object Model)

I can assure you that the JS DOM will no longer be a mystery after reading this…

What is the DOM?

DOM stands for Document Object Model, it is a programming interface for web documents, this interface represents the page in a tree-like data structure. We can tap into this interface to change the document structure, style and content.

DOM diagram

Trees:

Understanding the tree data structure is one of the core pre-requisites to truly understanding the DOM.

DOM Theory

Let’s examine the following basic client-server request scenario:

  • When a user tries to access https://google.com.
  • The client tries to resolve the domain name to an IP address by doing a DNS query.
  • Once/If it gets a IP address, the client makes the request to the machine at the provided IP.
  • The server will then return a simple HTML document.
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<section class="top">
<h1>Hello world!</h1>
</section>
</body>
</html>
  • DOM tree starts from document node.
  • All HTML elements have their separate nodes known as element nodes.
  • Any text or tab character on a single line forms one text node. new line character is also a text node.
  • HTML attribute is also a node knows as attribute node.

Functionality provided by the DOM interface:

  • Ability to create, read, update or delete content from an HTML element.
  • Enables us to dynamically inject elements into our HTML (create HTML elements).
  • Delete HTML elements (or DOM nodes).
  • Change CSS style of an HTML elements or their content.
  • Respond to user interaction on HTML elements.

Conclusion

JavaScript programs may inspect and interfere with the document that the browser is displaying through a data structure called the DOM. This data structure represents the browser’s model of the document, and a JavaScript program can modify it to change the visible document.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdirahman Jama

Abdirahman Jama

Documenting my software engineering journey