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!