Document Object Model

In the Browser Object Model there exists a special variable called document that represents the webpage rendered on the screen (you can almost think of it as the HTML code). Through this variable we can listen for when the user interacts with the webpage (clicks on links, submit forms, etc.) and change the webpage dynamically (add/remove HTML elements).

Lecture material

• document-object-model.pdf
• document-object-model.pptx

Recommended reading

• The following chapters from the course book Eloquent JavaScript:
  • Chapter 14: The Document Object Model
  • Chapter 15: Handling Events
• Client-Side JavaScript should only be used to improve the user experience, never to make it worse! The following webpage is an excellent example of wrong usage of client-side JavaScript:
  • An article I want to read