Manipulating the DOM with javascript – part 4 of 4

This is the final installment of my four-part tutorial on manipulating the DOM with javascript. So far, we have explored the createElement, appendChild, insertBefore, replaceChild and removeChild functions. In this final post, we will explore the createTextNode function, and will then put it all together into a real world example.

Manipulating the DOM with javascript – part 3 of 4

In my last post, we explored the appendChild and insertBefore functions. As I explained, those are two of the three main functions you can use to add a new element into your HTML page. In this post, we will explore the replaceChild and removeChild functions.

Manipulating the DOM with javascript – part 2 of 4

In my last post, I explored the createElement function to begin showing you how to add, remove and replace elements in your HTML pages with javascript. In this post, I will explore the appendChild and insertBefore functions. These are two of the three functions you will use to actually insert the new element you created in the last post.

Manipulating the DOM with javascript – part 1 of 4

In one of my recent posts, I attempted to explain and explore the document object model (DOM) a little bit, in order to help you understand how it can be manipulated. In this series of posts, I will explain how to use javascript to work with the DOM. However, it is important to note that the functions we’ll be using inside of this tutorial are defined by the DOM, and can actually be used in some form or another in any programming language that supports XML. I know for a fact that these same functions are also available in PHP, VBScript and Java. I’m certain that they are available in a host of other languages, as well.

An introduction to the DOM

In the near future, I plan to write a rather in-depth tutorial explaining how to manipulate the DOM using javascript. Essentially, that tutorial will teach how to properly add and remove elements from your Web pages using javascript. If all goes well, that tutorial will be simple enough for beginners to understand, and will help add a lot of power to your javascript arsenal.

However, before I can get into that, we need to explore and understand the DOM.

Creating Accessible “Quick Link” Menus

As many of you are aware, it is rather difficult to create an accessible “quick link” menu (sometimes also called “jump menus”) because most of them require javascript.

For those of you that don’t know what a quick link menu is, it’s generally a dropdown menu, made from a typical form “select” element. Then, when a user chooses one of the options within that select element, the page automatically redirects to the location associated with that option.

For instance, in the top corner of all HTMLCenter pages, there is a quick link menu called “Top Links”.

For a lot of users, these types of menus are extremely useful. Designers generally use quick link menus for one of two purposes: a) to provide a quick, easily locatable list of the top content on their Web site or b) to provide a list of the headers on a long page, allowing the users to quickly “jump” to the appropriate section of the page.

The problem, though, as I mentioned at the beginning of this post, is that they all require javascript in order to work properly. That’s great for the users that have javascript enabled, but it really can cause problems for those that don’t have javascript.

I have come up with a solution to that problem, though. With the solution described below, the “quick link” menu is initially written as an unordered list. Then, I use javascript to convert it to a standard “jump menu”. That way, if the user doesn’t have javascript within his/her browser, they get a nicely formatted unordered list of the links instead.