In this section we explore the Document Object Model, its structure and browser features.
The DOM represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many children nodes.
An access always starts from the document.
This object provides a variety of methods to search and modify elements.
A DOM node is an object with properties containing information about node itself and its contents. Some of the properties are read-only, and some can be updated on-the-fly.
A DOM node may have attributes and properties. Sometimes people mess them up, because they are related, but they are really two different things.
Most of time, to react on user-triggered event, we need to find and modify elements on the page.
The childNodes, children and other helper links are helpful, but they allow to move between adjacent elements only.
Fortunately, there are more global ways to query DOM.
DOM modifications is the key to making pages dynamic. Using the methods described below, it is possible to construct new page elements and fill them on-the-fly.
The document.write methods outputs a string directly into page.
This is one of most ancient methods of appending to a document. It is very rarely used in modern web applications, but still it has it’s special place.
DOM forms, tables, selects and other elements contain additional links to simplify navigation.
They are useful to keep the code shorter and smarter.
Donate to this project
The content of this site is available under the terms of CC BY-NC-SA.
© Ilya Kantor, 2011.