DOM

The Document Object Model (DOM) is a language-agnostic model for representing structured documents built in HTML, XML, or similar standards. You can think of it as a tree of nodes that closely resembles the document parsed by the browser.

At the top, there is an implicit document node, which represents the <html> tag; browsers create this tag even if you don't specify it and then build the tree off this root node according to what your document looks like. Consider a simple HTML file to be like the following:

<!DOCTYPE html> 
<title>A title</title> 
<div> 
  <p>A paragraph of text</p> 
</div> 
<ul> 
  <li>List item</li> 
  <li>List item 2, <em><strong>italic</strong></em></li> 
</ul>

Note how we don't have the <html>, <head> or <body> tags. Chrome will parse the preceding code to DOM, as follows:

Type document into the Chrome JavaScript console to get this tree view. You can expand it by double-clicking; Chrome will then highlight the section of the page relating to the specified element when you hover over it in the console.

You can also test random selections by typing $('.some-selector') into the console. Even if jQuery isn't included in this page, it will still work because it's built into Chrome's console as an alias for document.querySelector('.some-selector') (and is then overridden by jQuery if it's included in the page). Additionally, $$('.some-selector') acts as a shortcut to document.querySelectorAll('.some-selector), if you want to return more than just the first element in the selection.

Table of Contents for DOM

Create new playlist

Sign In

Sign Up

Table of Contents for
DOM