DEV Community

Prateek Singh
Prateek Singh

Posted on

2 1

Document Object Model

The words “the DOM” are used all over developer documentation sites and tutorials on writing interactive JavaScript code

When you request a website, no matter what backend language is powering that website, it will respond with HTML. The browser receives a stream of HTML. The bytes are run through a complicated (but fully documented) parsing process that determines the different characters (e.g. the start tag character, an attribute like href, a closing angle bracket like >). After parsing has occurred, a process called tokenization begins. Tokenization takes one character at a time and builds uptokens. The tokens are:

DOCTYPE
start-tag
end-tag
comment
character
end-of-file

Let’s take a break for a second. At this state, the browser has received the bytes that’ve been sent by a server. The browser has converted the bytes to tags and has read through the tags to create a list of tokens.

This list of tokens then goes through the tree construction stage. The output of this stage is a tree-like structure — this is the DOM!

I want to point out two important quotes that Illya said in the video:

a tree structure that captures the content and properties of the HTML and all the relationships between the nodes the DOM is the full, parsed representation of the HTML

So the DOM is a model (representation) of the relationships and attributes of the HTML document that was received. Remember that DOM stands for “Document Object Model”. Something that I’ve found to be true as I’ve been learning is that to break something down, just read the thing backwards:

Document Object Model

…would become…

Object Model of the Document!

Remember that a JavaScript object is a tree-like structure that has properties and values. So the DOM can be accessed using a special object provided by the browser: document

Try this:

open the console on this page
type out the word document
careful not to declare it (const document)
careful not to wrap it in quotes ("document")
press enter

Console Tab
Viewing the document object in the DevTools' Console pane.

The document the object is provided by the browser and is a representation of the HTML document. This object is not provided by the JavaScript language. ECMAScript is the language specification that JavaScript is based on, and it only references the document object model in one place, in its "Global Object" section:

In addition to the properties defined in this specification the global object may have additional host defined properties. This may include a property whose value is the global object itself; for example, in the HTML document object model the window property of the global object is the global object itself. (source)

Basically, this says that the document object is not part of JavaScript, but is expected to already exist and be freely accessible to JavaScript code.

The DOM is standardized by the W3C. There are a number of specifications that make up the DOM, here are a few:

  1. Core Specification
  2. Events Specification
  3. Style Specification
  4. Validation Specification
  5. Load and Save Specification

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay