Copyright

The Document Object Model (DOM): Purpose & Function

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

In this lesson, we define the Document Object Model (DOM) and discuss its purpose. We explain DOM nodes and their parent-children relationships. We provide a code example to illustrate the many, wide-ranging uses of JavaScript to manipulate documents via the DOM.

The Document Object Model, DOM

The Document Object Model is a standard set by W3C, the World Wide Web Consortium. This standard defines how web browsers load and interpret HTML and XML documents.

In this standard, HTML elements are interpreted as objects with specific attributes. In the DOM, these objects are referred to as nodes.

Purpose

According to the W3C, one of the main reasons for developing the DOM is to maintain a standard programming interface for HTML and XML documents, which is language-independent. Setting and maintaining this standard enables programmers to create or navigate these types of documents and modify their elements predictably, using any type of language or development environment.

Having said that, JavaScript language is arguably one of the most popular ways of working with HTML documents using the DOM.

Nodes

As mentioned above, the individual elements in an HTML document are called "nodes" in DOM terms. In their definition of the DOM, W3C are reluctant to describe the relationship between elements in a document as "tree-like", however, this description is frequently used by other sources to explain how elements are connected to each other in the DOM.

If the term "tree-like" sounds a little esoteric, perhaps it will be easier to understand if we interpret this as meaning that like a tree has a main trunk, from which stem certain main branches, which in turn branch off into finer branches and so on, so does an HTML document contain certain "key" elements, like the <head> and <body>, which in turn contain other elements, like <div>'s, <p>'s and others.

The W3C does not emphasise this "tree" analogy for a few reasons. One reason is that while this analogy helps describe a document's structure, it is not relevant when it comes to implementation. This means that programmers are free to use the DOM to access and work with any element in the document directly, without having to, for example, linearly first go through the "trunk" element, then move on to the first "branch" to get to the "sub-branch" element that they're really after.

Another reason is that unlike a real tree, an HTML document doesn't have a main "trunk" element that contains all others. Which is why the W3C also describe a document's structure as "forest-" or "grove-like", in the sense that a document can contain multiple cores of elements.

Parent - Children Nodes

But enough about trees. A more tangible relationship between elements in a document in DOM terms is the parent-child relationship. All this means is that if one HTML element contains another, the container is referred to as the "parent" node, and the content of that container is the "child".

Before this gets too confusing, let's illustrate this idea with an example. Consider the following HTML document:

<!DOCTYPE html>
<body>
<div>
<p>
<a href = "www.study.com">Click here to go to Study.com</a>
</p>
</div>
</body>
</html>

In DOM terms, we have a few parent-child relationships in this example. The <body> element is the parent of the <div> element (node), which is the parent of the <p> node, which in turn is the parent of the <a> node.

Incidentally, the href is an attribute of the <a> node. All the elements as well as this attribute can be manipulated using JavaScript and the DOM.

Uses of the DOM

The uses of the DOM are many and varied, but if we were to make a list of the key abilities, these would include:

  • first of all, locating elements in the document by their ID, class, tag name (<div>, <p>, etc.) and other characteristics
  • adding, removing or modifying the HTML elements themselves
  • modifying any attribute of an HTML element, such as their class, style attributes and others
  • we can even use JavaScript to add animation to a document, by gradually changing an element's position on the page over time

Items JavaScript Can Manipulate via the DOM

As mentioned above, just about any element in an HTML document can be accessed and manipulated using Javascript and the DOM, from the <html> tag on down.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account
Support