Programming the Web

Spring 2021

Very basic example using the DOM


This example illustrates a basic triumviate (HTML, CSS, JavaScript) use of the Document Object Model (DOM). The HTML (this file; use your browser's "view source" option to see the raw HTML for this page) creates the elements (content) of the page; the CSS to give the page "style" (for this example just one element gets styled); and the JavaScript for interacting both with HTML (for this example to analyze the content of the page) and the CSS (for this example to modify the style of an element).

This is a generic div - it can contain other elements such as: a styled span. Click on the span to change its size and text.

Below is a sequence of several "paragraphs":

A paragraph can be used to represent a usual paragraph of text. It might feature one or more sentences.

On the other hand, p tags can be used just to delineate conceptual blocks that do not necessarily correspond to paragraphs of text. Since the default behavior is to put spacing between the lines of paragraphs this can help separate concepts.

Or whatever.

Click anywhere on this paragraph to see how JavaScript can access the sequence of paragraphs on this page as an array.