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 diagram

Trees:

DOM Theory

  • 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

Documenting my software engineering journey

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Odd JavaScript, destructured, part 2

Leetcode Q336. Palindrome Pairs (Q283)

API calls from Excel

NestJS Configuration

Multi Image Gallery With React Native

Integrating Storybook in a React + Next + Less project

Create Effective Test Code By Leveraging The Mockito Framework

Improve Code Quality with BannedSymbolAnalyzers

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

More from Medium

Get a List of HTML Tags and Attributes Used in the Code

Template Literals in JavaScript ES6

My First Project Using An API

Intro to Javascript + Tips for Success