Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Traversing and accessing the DOM with Javascript

Friday, November 29th, 2013 by Servage

Now that you have a sense for the language of JavaScript, let’s look at some of the ways we can put it to use in modern web design. First, we’ll explore DOM scripting, which allows us to manipulate the elements, attributes, and text on a page. I’ll introduce you to some ready-made JavaScript and DOM scripting resources, so you don’t have to go it alone. You’ll learn about “polyfills,” which provide older browsers with modern features and normalize functionality.

I’ll also introduce you to JavaScript libraries that make developers’ lives easier with collections of polyfills and shortcuts for common tasks.
Meet the DOM
You’ve seen references to the Document Object Model (DOM for short) several times throughout these articles, but now is the time to give it the attention it deserves. The DOM gives us a way to access and manipulate the contents of a document. We commonly use it for HTML, but the DOM can be used with any XML language as well. And although we’re focusing on its relationship with JavaScript, it is worth noting that the DOM can be accessed by other languages too, such as PHP, Ruby, Python, C++, Java, Perl, and more.

Although DOM Level 1 was released by the W3C in 1998, it was nearly five years later that DOM scripting began to gain steam. The DOM is a programming interface (an API) for HTML and XML pages. It provides a structured map of the document, as well as a set of methods to interface with the elements contained therein. Effectively, it translates our markup into a format that JavaScript (and other languages) can understand. It sounds pretty dry, I know, but the basic gist is that the DOM serves as a map to all the elements on a page. We can use it to find elements by their names or attributes, then add, modify, or delete elements and their content. Without the DOM, JavaScript wouldn’t have any sense of a document’s contents—and by that, I mean the entirety of the document’s contents.

Everything from the page’s doctype to each individual letter in the text can be accessed via the DOM and manipulated with JavaScript.
The node tree
A simple way to think of the DOM is in terms of the document tree. You saw documents diagrammed in this way when you were learning about CSS selectors.

<html>
<head>
<title>Document title</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h2>Subhead</h2>
<p>Paragraph text with a <a href="foo.html">link</a> here.</p>
</div>
<div>
<p>More text here.</p>
</div>
</body>
</html>

Each element within the page is referred to as a node. If you think of the DOM as a tree, each node is an individual branch that can contain further branches. But the DOM allows deeper access to the content than CSS because it treats the actual content as a node as well. This example shows the structure of the first p element. The element, its attributes, and its contents are all nodes in the DOM’s node tree.

It also provides a standardized set of methods and functions through which JavaScript can interact with the elements on our page. Most DOM scripting involves reading from and writing to the document.

Resources and further reading

W3 Schools

W3 Schools-2

Traversing and accessing the DOM with Javascript, 5.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.