Learning Outcomes
On completion of this lesson you will know the concept of the document object model and its relationship to programming languages, especially JavaScript.
Go to topThe DOM Model
Introduction
HTML consists of a hierarchy of elements inside the <html>..</html> tags. In the lesson Laying out a page we have discussed how to construct such an hierarchy. Our emphasis then was to make our code accessible to assistive technologies such as screen readers. (If you need a refresher on this topic it may be worth your while to look at that lesson again.)
A web page like the one we described would be totally accessible to a blind person using a screen reader. However it would be uncomfortable for a sighted person to use as it may lack many features that makes reading a comfortable experience. It could be even more inaccessible to people with cognitive impairments.
To make the pages more accessible to sighted persons Cascading Style Sheets, normally abbreviated to CSS, were introduced. This highly versatile technology allows us create pages with a high visual impact, while at the same time catering for the needs of sighted users with either low vision or cognitive learning problems.
Although well presented and accessible, those pages are static. There is no animation and hiding or unhiding portions of the page is not possible. Users simply can not interact with the page apart from changing to another page using hyperlinks. For interactivity we need JavaScript.
JavaScript is one of the three components of a web page along with HTML and CSS. Unfortunately JavaScript is not directly compatible with assistive technologies such as screen readers. For that we need WAI-ARIA, which is outside the scope of these lessons.
Go to topThe Document Object Model - DOM
Before continuing further with JavaScript we need to look at the Document Object Model, which is more commonly known as DOM. First we look at the middle word 'Object'.
In advanced programming the word 'object' means a container of elements. Each of those elements may also contain elements of its own, so it would be an object in its own right. Each of these sub objects may also contain other objects ... and so on ad infinitum.
An HTML document, however, is not an object as programs understand it. It is simply a text document. However once it is loaded into the browser, the browser parses it and converts it into a framework known as the DOM. The entire page would now be an object and all of its component elements would also be objects. As objects programs can access them.
The block of HTML above is colour coded to show its hierarchical structure. At the highest level is the black <html></html>
On the next level down are the <head></head> and the <body></body> tags
On the third level are the <header></header> and the <main></main> tags
A browser, on opening this page, would first create an object of the top level element <html>. It would create similar objects of the <head> and the <body> elements.
It would continue in this manner until all of the elements in the document were converted to objects.
In Fig 2 above we have an example of the DOM for the HTML code in Fig 1. This is not a copy of the HTML code. It is simply another representation of it. In this representation all of the HTML elements are converted to objects so that JavaScript can have access to them.
This DOM is not created specifically for JavaScript. Python, Java, Ruby and most other languages can access it. However JavaScript is the most likely one, so you don't have to worry about the other languages.
Go to topSummary
DOM is an abbreviation of Document Object Model. It represents a web page as an object that a programming language can process. As an object it contains the other elements belonging to a web page as other objects, thus making them accessible to programming languages.
The DOM contains a number of methods that the programming languages can call to either extract data from the DOM or else update its existing contents.
As well as the DOM's own methods, its elements can have methods of their own.
The DOM is accessible to most programming languages, although it is generally only used by JavaScript.
Go to topRevision
Fill in the blanks
- The DOM represents a web page as an ______ that programming languages can process.
- In programming, an ______ refers to a container of elements, each of which can also contain other elements.
- When a browser loads an HTML document, it converts it into a framework known as the ______.
- The top-level elements in an HTML document are the <html>, ______, and <body> tags.
- The purpose of CSS is to enhance the ______ appearance of web pages while maintaining accessibility.
- JavaScript interacts with the DOM primarily using ______ such as getElementById() and setAttribute().
- The ______ method retrieves a pointer to an element in the DOM using its unique id.
- The DOM is not limited to JavaScript; other languages like ______ and Python can also access it.
- Assistive technologies require ______, which JavaScript is not directly compatible with.
- Static web pages lack ______ such as animations or the ability to hide or unhide content.