Document Object Model

Introduced with JavaScript in the web browser was a concept called the document object model. The HTML document would, when viewed in a web browser, be represented an a JavaScript object.

In the document object model (DOM), individual elements within a HTML document can be accessed through a root object called document.

As was introduced in a previous section, this variable document is in the global scope. It can be accessed inside of any function and used to access, search for, or change the object representing the HTML.

Why is the DOM important?

When you made a basic website while learning HTML and CSS, each page was a different document and when you clicked links you travelled between them. Professional websites work a bit differently: when a webpage reacts to a user in some way, JavaScript is changing the HTML using the DOM. As most modern web content is database-driven, updating the page content dynamically is an essential part of the design. From loading e-mail through Outlook or Gmail in a webpage to showing new locations in Google Maps, all of these actions take place because of JavaScript code working through the document-object model. The document object model is the way to add, remove, or update content.

Accessing Elements within DOM

The DOM follows a metaphor of parents and children. Any elements found within it are its children and can be accessed, using the DOM, by using its children property.

In fact, the results returned from the children property of objects in DOM acts like (but is not quite) an array. It has a length and can be accessed through an index.

All HTML elements represented as objects within the DOM also have two properties commonly used to check their contents: innerText and innerHTML.

innerText Property of HTML Elements

The innerText property of an HTML element is set to its text contents and that of any children it has.

Changing its value only changes the text content of an element.

innerHTML Property of HTML Elements

The innerHTML property of an HTML element is set to its HTML and that of any children it has.

Changing its value changes the HTML content of an element.

Searching for Elements within DOM

Because searching across elements using their children could become tedious, the DOM also provides some high-level searching functions that can return groups or individual elements.

getElementById: Search for an element based on its ID attribute
getElementsByClassName: Search for element(s) based on their CLASS attribute
getElementsByTagName: Search for element(s) based on their tag name

Changing Elements in DOM

As was mentioned in the parts on innerText and innerHTML, changing these properties changes the document itself. The DOM is not merely a representation of the document; it is the document. Making any changes affects the HTML document as the user sees it.

For example, setting the innerHTML of an element to an empty string will erase its children. The new HTML content of the element will be the empty string itself and all other content will be removed. (It will be restored when the document is reloaded.)

Play with the Code (Repl.it):

Take a moment to play with the code and concepts in the embedded Repl.it viewer below. You might try adding a <div> for a Tweet and some innerHTML, and then use getElementByID to retrieve it in the console.

Video: