What DOMinates the Web?

Photo by Sam Erwin on Unsplash

What is the DOM?

The DOM stands for Document Object Model. It is an object-oriented representation of objects and nodes that make up the content for the documents that are seen by its users on the web. The documents themselves are in HTML and XML format and each web page that you visit is considered a document. Whereas the nodes of each document are assembled in a tree structure.

Here is an example of a single DOM from Wikipedia:

DOM (Document Object Model) shown in a tree structure

The purpose of the DOM is to allow the manipulation of the documents with programs and languages that can change the structure, style and content in the browser. It is built up of multiple APIs and available in most web browsers we use today. Different browsers will have different DOMs available to them which can affect cross-browser functionality when building applications. Some of the different types of objects that are employed are document, window, table, etc.

One of the most commonly used language for this type of scripting maneuvering is JavaScript. With JavaScript and other scripting languages, it is possible to utilize the objects that are created from the DOM to exploit their methods and properties, or create new ones to change what is seen in the browser. That means that HTML elements and CSS styles can be changed, added, and removed as needed in your program. All events, like clicking a button or hovering over an image for example, are fair game as well.

Without the DOM, programming languages wouldn’t have any reference to the model of web pages or documents and their content. Since the DOM is not a programming language itself and also works separately from any language, it is able to be manipulated by any scripting language without much hassle or specific installation.

Understanding and being able to properly control the elements of a web page will aid programmers in their pursuit of building more efficient applications for the web.

Please let me know if this explanation of the DOM was helpful in the comments!




No Matter What People Tell You, Words And Ideas Can Change The World.

Recommended from Medium

API First

Making a Responsive Header With MaterialUI and React

GIF of responsive header

TypeScript vs JavaScript: What’s the difference?

Rails with Javascript: Project Mode

JavaScript pass by reference or value

Shake things up with Redux#405

Expanding Single Page Apps into multiple Browser Windows — Part 2

ES6 — What’s new?

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
Amanda M Johnson

Amanda M Johnson

Full Stack Software Engineer | manda.m.johnson@gmail.com

More from Medium

This Time! Thoroughly Understand the Implementation Mechanism of JavaScript!

My First 3 Months at ArcTouch

Three kinds of loops that we use all the time without knowing their names.

Picture showing illustrations of counter-based, input-validation and sentinel-controlled loops, respectively.