What DOMinates the Web?

Amanda M Johnson
An Idea (by Ingenious Piece)
2 min readSep 14, 2020
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!

--

--