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
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
allows scripts to access children of the DOM as properties.
For example, if you wanted to access the <body>
element in your script, you could access it as a property of the document
by typing document.body
. This property will return the body element of that DOM.
Similarly, you could access the <title>
element with the .title
property. See 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). Thedocument.body
and document.head
properties act as though you were directly accessing the html
DOM element. Click Next when you’re ready!