The Document Object Model

Learn how to use the DOM (Document Object Model), along with JavaScript, to manipulate Web page elements dynamically.

JavaScript Tabs – Create Tabbed Web Pages Easily

17 March 2009 / 307 Comments

This tutorial shows how to create a Web page containing JavaScript-driven tabs. Each tab displays a separate chunk of content when clicked — perfect if your page needs to hold a large amount of content. It’s also great for things such as multi-step (“wizard”-style) Web forms.

Click the link below to see a tabbed page in action:

See JavaScript tabs in action

The JavaScript and markup are coded in such a way that the page degrades gracefully in browsers that don’t support JavaScript.

In this tutorial you learn how this tabbed page is put together. You can then use the code and ideas to build your own tabbed Web pages. Let’s get started!

A JavaScript Accordion to Show and Hide HTML

19 January 2009 / 29 Comments

In this tutorial you learn how to create a JavaScript accordion script using the Document Object Model. What’s an accordion? Click the link below to find out!

See the JavaScript accordion in action

As you can see, a JavaScript accordion is a useful way to squeeze lots of page content into a small space. It consists of a list of items, of which only one is expanded at any one time. When you click on another item’s heading, the first item collapses and the second item expands.

Let’s see how the accordion is put together.

Changing Page Elements with the DOM

28 November 2008 / 2 Comments

So far, you’ve looked at how to get hold of page elements using JavaScript and the DOM, and how to look inside those elements to retrieve their contents.

In this tutorial, you’ll take your skills a step further, and learn how to change elements. You’ll see how to:

Change the content inside an element
Add and remove elements in the page
Move an element to a different position in the page, and
Manipulate element attributes.

Once you know how to manipulate DOM elements you can start creating flexible, JavaScript-generated Web content.

Looking Inside DOM Page Elements

7 November 2008 / Leave a Comment

In my last DOM tutorial, you learned how to access the elements inside your Web page as JavaScript objects. Once you’ve done that, how do you find out more about each element? This tutorial shows you how to delve deep into any DOM element object.

Retrieving Page Elements via the DOM

31 October 2008 / Leave a Comment

In the last DOM article, you learned that the DOM represents the contents of a Web page as a “tree” of JavaScript objects. By accessing the parts of the tree, called the nodes, you can read existing page content, alter content, and even add new content from scratch.

In this article you’ll learn how to locate and retrieve the elements of a Web page using JavaScript and the DOM.

Introducing the JavaScript DOM

3 October 2008 / Leave a Comment

The Document Object Model lets you access and manipulate the contents of Web pages using JavaScript. By using the DOM, you can do wonderful things like:

Create tabbed Web pages
Create expandable/collapsible (“accordion”-style) Web page elements
Generate Web page content dynamically (on the fly)

In this introductory article, you learn about the concept of the DOM, and how it’s used to access Web page elements from within JavaScript.

The Document Object Model

Footer

Contact Matt

Follow Matt