The Document Object Model, abbreviated DOM, is a powerful tree-like structure that organizes the elements on a web page and allows scripting languages to access them. This lesson will focus on some of the most useful methods and properties of the DOM interface in JavaScript. This interface is implemented by every modern browser.
First things first! The document
object in JavaScript is the door to the DOM structure. The document
object allows you to access the root node of the DOM tree. Before you can access a specific element in the page, first you must access the document structure itself. The document
object allows scripts to access children of the DOM as properties.
For example, if you want to access the <body>
element from your script, you can access it as a property of the document
object by using document.body
. This property will return the body element of that DOM.
Similarly, you could access the <title>
element with the .title
property.
Here is a comprehensive list of all document
properties.
Instructions
The diagram to the right illustrates that the document
keyword points to the root node of the Document Object Model (DOM). The document.body
and document.head
properties act as though you were directly accessing the html
DOM element. Click “Next” when you’re ready!