The Document Object Model
One of the most powerful aspects of jQuery is its ability to make DOM traversal easy. The Document Object Model is a family-tree structure of sorts. HTML, like other markup languages, uses this model to describe the relationships of things on a page. When we refer to these relationships, we use the same terminology that we use when referring to family relationships—parents, children, and so on. A simple example can help us understand how the family tree metaphor applies to a document:
<html> <head> <title>the title</title> </head> <body> <div> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is yet another paragraph.</p> </div> </body> </html>
Here, <html>
is the ancestor of all the other elements; in other words, all the other elements are descendants of <html>
. The <head>
and <body>
...