Overview of the DOM
The Document Object Model, or DOM, is the fundamental API for
representing and manipulating the content of HTML and XML documents.
The API is not particularly complicated, but there are a number of
architectural details you need to understand. First, you should
understand that the nested elements of an HTML or XML document are
represented in the DOM as a tree of objects. The tree representation
of an HTML document contains nodes representing HTML tags or elements,
such as <body> and <p>, and nodes representing strings of
text. An HTML document may also contain nodes representing HTML
comments. Consider the following simple HTML document:
<html><head><title>Sample Document</title></head><body><h1>An HTML Document</h1><p>This is a<i>simple</i>document.</body></html>
The DOM representation of this document is the tree pictured in Figure 15-1.
Figure 15-1. The tree representation of an HTML document
If you are not already familiar with tree structures in computer programming, it is helpful to know that they borrow terminology from family trees. The node directly above a node is the parent of that node. The nodes one level directly below another node are the children of that node. Nodes at the same level, and with the same parent, are siblings. The set of nodes any number of levels below another node are the descendants of that node. And the parent, grandparent, ...
Get JavaScript: The Definitive Guide, 6th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
