Getting Started: Transitioning to HTML5 - HTML5 Mastery: Semantics, Standards, and Styling - page 10

branching, tree-like structure, the DOM describes how the nodes are nested inside of
each other.
The DOM and the nodes it contains are represented in JavaScript as objects , which
describe what a particular node contains and can do. Using JavaScript, individual com-
ponents on the page can be accessed using dot notation to traverse the tree structure. If
you are not familiar with dot notation, it simply means that one node in the DOM tree
that is nested inside another can be accessed through its containing nodes (known as
objects in this context) by supplying the node (object) name separated by a period. For
example, the HTML page is represented in the DOM as an object named document ,
which contains the actual HTML page contents. Since the HTML page contains a head
and a body, there is a head and a body object inside the document object. So, to
access the HTML page's body element, the following would be written in JavaScript:
document.body . This won't actually do anything; the body element is just being
accessed from JavaScript, but it isn't being processed in any way. The point is that the
structure of the page is represented by nested objects, each of which can be accessed
using a dot (period).
Once you get down to the specific HTML elements, the commands get more gen-
eralized, because it is unknown in advance what elements are on your particular page.
JavaScript contains a number of commands that can be used for accessing the contents
inside the body of the HTML page, for dynamically updating content, for responding
to events, and so on. For instance, to access the first HTML element shown on the
page, you would use document.body.firstElementChild . To access the first
attribute of that element, you would use docu-
ment.body.firstElementChild.attributes[0] . The zero in brackets just
refers to the number of the attribute to access; 0 refers to the first of the attributes
in the HTML element, 1 to the second attribute, and so forth. Lastly, to access the
contents of this element, you would use the following: docu-
ment.body.firstElementChild.firstChild .
Figure 1-4 shows the structure of a simple web page with only a link in the body area.
Looking at this diagram, you'll notice an extra object at the top, called window . While
the DOM is accessible through the document object, document is actually contained
in this window object, which represents the web browser window the page content is
contained in. Technically, accessing the DOM would be done through the window ob-
ject first, which is the “root” object through which all other aspects of the web page
are accessible from JavaScript. Accessing the page's body, for instance, could be done
with window.document.body or document.body (in which case, a reference to
window at the beginning is implied).