The DOM

Chapter: The DOM

Fundamental to JavaScript, CSS and jQuery is the Document Object Model. Henceforth we will refer to the Document Object Model simply as the DOM.

The DOM is a tree structure containing all the elements of the page. Elements can be text, images, ..., or elements. All elements except one will have exactly one parent. Each and every parent is an element. The one element with no parent is the document itself.

Most modern browsers allow you to inspect the DOM. Each browser will have its own way of doing this, and you should -- as always -- choose your favorite. In this lab manual, I will describe how to inspect the DOM in just one browser. I have chosen, in part so as not to show bias towards any system, the Chrome browser. If you are reading this manual in, say IE or Firefox, or Safari, then please continue to do so. I don't want you to inspect the DOM behind these lab manuals because they use very old HTML standards. (If you do choose to inspect the DOM of this page, you will discover that I am using HTML 3.2. Please don't laugh too loud.)

Here is a sample HTML 5 file. Save it as sample.html and open it in Chrome. It will look awful.

Line 7 of the file says to use a style sheet called mystyle.css. You haven't made a style sheet yet, so the HTML looks terrible. This will be remedied in the next chapter.

For now, let's look at the structure of the DOM.

So, in your Chrome browser, right click on an empty part of the window. Towards the bottom of your action list will be "Inspect". So let's inspect the DOM.

You will see a window upper right that looks like:

The grand ancestor of all the elements has the html tag at the top of the document. Each triangle denotes an element that has at least one child. You can click to expand the element and see the children. Some of those children will themselves have triangles and can expand to show those "grandchildren". And so on.

Exercise 2

Open other pages that you find on the web. Inspect their DOMs. Write a few remarks in your lab notebook about interesting things you find. What is the furthest descendant that you can find? (By this I mean, how deep is the DOM tree? The leftmost triangles you see in your DOM view are children of the overall ancestor. Triangles in from them denote grandchildren, then come great-grandchildren, etc. How many generations deep is the deepest DOM tree that you find?) Write your results in your lab notebook.

Read more about the DOM at w3schools. You may want to put off doing some of the code-modifications and exercises until you've learned JavaScript. Or, you may of course just go ahead as if you know all about JavaScript. I expect you'll find the JavaScript pretty well explains itself.

rpricejones@wooster.edu