Print this chapterPrint this chapter

Submodule 14.1: Introduction to DOM

DOM definition

DOM (Document Object Model) is a tree-like representation of the HTML structure of Web pages. All objects of an HTML page are included and can be manipulated by the DOM.

By manipulation, we mean that we change the content ( eg add/delete HTML ), the structure ( move an HTML element to another place) and their appearance ( change their style).

To get a sense of the DOM structure copy the below code and paste it on the "Markup to test" field of the Live DOM Viewer webpage.

View source:

You can also see the DOM of a page in the console - elements and inspect these with the appropriate tool.

DOM Inspection

Exercise

  1. Open your editor, create a new file and save it as exersice14.1.1.html in the folder "yourNameWEB2JS".
  2. Copy the code below and paste it in the new file.
  3. Open the console to see the results.

Resources:

- What exactly is the DOM?

- What is the DOM?