DOM Manipulation

Creating Nodes

This part is fairly simple. The document node object offers two functions for node creation:

To create a new element:

document.createElement

To create a new text node:

document.createTextNode

Both methods take a single string for an argument.

Placing Nodes

A node is absolutely useless until it has a place in the DOM. There are two ways you can place a node:

• appendChild
• insertBefore

Both functions belong to element nodes.

Appending Nodes

To append something means to add it to the end of something else, like an appendix in a book. Thus, appendChild adds a child node to the end of the parent node, which is the object of this method.

It is this function that is often called as well when creating text nodes, which are immediately appended to their respective child elements.

The following example is part of the script of a page on the CD, which displays all colors with a compact hex code (i.e. three hex digits instead of six). A portion is shown below:

Below I create a ul element, an array of li elements, and append to each of those a text node.

Creating The Menu

var nav_list = document.createElement("ul");

var tabs = new Array();

for(var l = 0; l < reds.length; l++){

tabs[l] = document.createElement("li");

tabs[l].appendChild(

document.createTextNode(

reds[l].getElementsByTagName("caption")[0].firstChild.data

)

);

nav_list.appendChild(tabs[l]);

}

You may wonder what on earth is contained in the variable reds, which appears to be an element node list of some sort. Well, now we get into the reason we pull this sort of stunt.

The page in question has 16 tables of 16 rows and 16 columns, each table cell showing a different color. The rows are in ascending green value, the columns in ascending blue value, and the tables are arranged in ascending red value. The variable reds, therefore, is this:

Where I Get The Value Of reds

var reds = document.getElementsByTagName("table");

Now it is clear that the above list creates a navigation list based on the tables in the webpage containing a list item for each table in the document. The script-generated li elements then have text nodes appended to them, which are simultaneously given the text contained in the respective caption elements—that, by the way, is why newly-created text nodes are usually not assigned to variables; normally they're appended as soon as they're created.

Yes, I know there will be 16 tables. That's beside the point; this script generates a tab for every table, regardless of how many tables there are on the page. If I wanted to include every single value for red, I would end up with 256 tabs without having to change the script—though the resulting page would probably be too large for the average computer.

If this were an external script, it would create accurate tabbed menus for every page it was linked to—assuming, of course, each page follows the pattern this script was coded for.

Generating Any Number Of Nodes

Back in Forms, I demonstrated the textarea element, which writes three paragraphs to three p elements:

The Original textarea Demonstration

var form = document.getElementById("Form");

var txt = form.Text;

var write = document.getElementById("Write").getElementsByTagName("p");

form.Click.onclick = function(){

var txt_split = (txt.value.match("\r\n"))?txt.value.split("\r\n"):txt.value.split("\n");

var l = 0;

var pc = 0;

while(pc < write.length && l < txt_split.length){

if(txt_split[l].length > 0){

write[pc].firstChild.data = txt_split[l];

pc++;

}

l++;

}

}

But through the creation and appending of nodes, you can create and append as many p elements as you please:

The textarea Demonstration Allowing For Infinite Paragraphs

Added Lines In Bold

Altered Lines Underlined

var form = document.getElementById("Form");

var txt = form.Text;

var write = document.getElementById("Write");

var pars = new Array();

form.Click.onclick = function(){

var txt_split = (txt.value.match("\r\n"))?txt.value.split("\r\n"):txt.value.split("\n");

var pc = 0;

var l = 0;

while(l < txt_split.length){

if(txt_split[l].length > 0){

pars[pc] = document.createElement("p");

pars[pc].appendChild(document.createTextNode(txt_split[l]));

write.appendChild(pars[pc]);

pc++;

}

l++;

}

}

And the result (four paragraphs):

Clicking the button again will append yet more paragraphs.

Removing Nodes

Sometimes you want to remove a node. The method for this (and again, you use this method with the targeted node's parent element node) is removeChild.

This method has the child node intended for removal sent to it. However, so long as a variable has a reference to that node, a removed node still exists. For example, say I have a paragraph (which is referenced by the variable par_1) that I want to remove from the top of the body, then paste it at the bottom. I would first remove the paragraph from the body, and then append it again.

I use this trick in the following script, which cycles paragraphs up and down (moving them down requires the insertBefore function.

Each time a button is clicked, it removes one of the paragraphs from the body element node, but then puts it somewhere else, though that does not have to be the case.

Replacing Nodes

Another way to manipulate the DOM is to swap one node for another.

Below, I have a page that uses a table to display various function names and what they do:

I also have the following script:

At first, the dl element is in limbo, not part of the DOM just yet. But with a click of the button, the dl element node is switched with the table element node, and now the dl element is part of the DOM, and the table element is in limbo.

Clicking a second time reverses the action.

Manipulating Tables

Back in The Document Object Model, I mentioned that in an HTML DOM, tr elements were the child elements of tbody elements, not table elements. This is especially important to remember when you're manipulating tables, because while what HTML-created tr elements that are not explicitly placed in a thead or tfoot element are placed in tbody, tr elements created through JavaScript follow no such rule. If you append a tr element to a table element, to a table element it will be appended—and most likely show up between tbody and tfoot.

Yes, you are hearing the voice of experience here.

Setting Attributes

The setAttribute method sets the value of an attribute—if the element doesn't have that attribute to begin with, then the setAttribute attribute creates the attribute node as well as setting its value.

It takes two arguments, both strings:

1. The attribute name
2. The attribute value

The script below will set the title attribute to the first p element of any webpage to This is the first paragraph.

Here's the result:

Removing Attributes

The removeAttribute method simply removes the attribute from the element with which the method is associated. It takes one string argument: the name of the attribute to be removed. If the attribute name isn't found, then the script simply moves on.

Using This To Your Styling Advantage

In JavaScript Styling, you saw how to change the style of an element with JavaScript. But what if you wanted to tailor a stylesheet to take full advantage of JavaScript, but didn't want to leave everyone who had JavaScript turned off in the lurch? Or you wanted to change... a lot?

To the first, remember that link elements use href attributes and through setattribute, you can change the value of those attributes. This allows you to have a stylesheet that will be used if JavaScript is turned off, and one that takes full advantage of JavaScript. The second, of course, will require that JavaScript alter the href attribute to point to it.

To the second, you can simply add an attribute, then use the attribute selector as mentioned in CSS Selectors to apply the rules. Even if the attribute and its value are not in the (X)HTML specification, CSS will affect any element that has that attribute. Remember, though, not all major browsers support attribute selectors. With recent versions of Internet Explorer supporting these methods, however, this is changing.

I'm going to use the page with the tabbed menu used back in JavaScript Styling to demonstrate both. We'll start with the two stylesheets.

The second stylesheet assumes that the user can somehow interact with the page and make the various sections visible or invisible at will, something that can only be done through a client-side script. But if you look at the link element's href attribute, it points to the first stylesheet, which assumes no script. The JavaScript coding in the fourth part of the example shows how the script alter that element to point to the script-requiring stylesheet. In other words, the stylesheet that assumes JavaScript is enabled requires JavaScript to be enabled to be used at all.

Take a look at the rules for #Menu li[current] and div.section[current]. In HTML 4.01 and XHTML 1.0, there is no such thing as the current attribute. CSS doesn't care. Using the setAttribute function, the attribute will be applied to the DOM, triggering the respective rules, and removed through the removeAttribute function, causing the elements' styling to revert.

A validator won't know that this is going on; validators only read the webpage code, not the DOM, so extra attributes set through JavaScript won't raise errors. Below is the adjusted script:

I know I didn't give a value to any current attribute. Because of the way the stylesheet works, I don't really need to; I only need two different values, so I can get away with a take-it-or-leave-it approach here, but I have had to define actual values for attributes set through JavaScript, since there was a choice between three options.

This means of changing stylesheets, incidentally, is how I allow you to create custom print stylesheets (as introduced in the prologue).

Image Rollover Effects With JavaScript

Simple image rollovers are reasonably easy in CSS, and I explain how to do them in CSS Backgrounds. But this method has a limitation: You can only switch between two pictures. Furthermore, the new image is only downloaded when the rollover is triggered. This can cause a noticeable delay in seeing the first image and seeing the second.

In JavaScript, you can switch between as many as you like, even switching to a random graphic. Furthermore, you can use JavaScript to preload alternate images (this will assist image rollovers done in both languages).

Note that this actually alters the src attribute. Because of this, you can change that attribute to a random value:

What I added was an array of file names. Then, using the trick I described in Numbers And Math, I change the value of src to a random file name from the array.

Mimicking :hover:after

JavaScript can also mimic the :hover:before and :hover:after pseudo-class/-element combinations and its method is more widely supported (though this is changing).

JavaScript is also superior to CSS in flexibility. CSS is quite strict about where you can get and place extra content: extra content must be specifically described in the stylesheet (this includes counters) or it must come from an attribute. Second, the extra content must be either before or after that element through the :before and :after psuedo-elements. JavaScript allows you to get the content from anywhere in the (X)HTML document and put it anywhere in the (X)HTML document. Note this does not include the contents of :before and :after psuedo-elements. Those are set in a stylesheet, not the webpage, so as far as JavaScript is concerned, they don't exist.

The following example comes from my Examples page. The node lists of importance here are all the sup elements and the li elements nested within the div element with the ID Footnotes.

Using a method called cloneNode, a copy is made of the first (and in this case, only) child span element of each li element, adds some text to the cloned span elements, and adds each one to an array. This is done through a for loop.

The reason we have to clone these nodes is because no node can exist in two places at once. If we tried to append any of the original span element nodes, they'd actually be moved out of their respective li element to their new location (feel free to try it). Therefore, we make copies of these span elements and stick them in an array for later use. They're not part of the DOM yet, which means we can use them wherever without worrying about screwing up our page.

The boolean value is there to tell the browser whether to include the cloned node's child nodes (along with their child nodes and so on) or not. If I set it to false, all it would do is clone a new span element node with its relevant attributes (useful for nodes with no children). However, since I want the entirety of each span element's contents as well, I set it to true. Then I insert a text node saying which footnote is being hovered over (helpful when a link has more than one footnote associated with it) before the cloned node's first child node. Because I do that with the cloned nodes, the originals (in the list of footnotes) go unaffected. Note that I use a bit of math: Arrays always start at 0, but the footnotes start at 1. The addition takes that into account.

Now, to set the mouse events on the sup elements. By definition, the number contained in those elements should correspond to a footnote. Therefore, I should be able to use the number contained therein and use it as an element array—with one little adjustment: footnotes start at 1. Arrays start at 0. Again, a little arithmetic is in order.

Remember, though: when you use JavaScript, you actually alter the DOM. When the onmouseover event appends a cloned node to an element, that cloned node is there. An extra event (I'll use onmouseout) is needed to make the appended node go away.

The above loop sets up the events so that when we move our mouse cursor over a sup element, the element's content is converted to a number and lessened by 1, which should give us the array element containing the appropriate footnote. That footnote is appended to the sup element's parent element, by definition becoming the parent element's last child. When the mouse cursor is moved away, the last child (which is the footnote) is removed.

If someone doesn't have JavaScript turned on (or is using a browser that doesn't support it), there is still the footnotes section at the bottom of the page, which can be easily read.

How can you do this with CSS? Short answer: you can't. Long answer... Let me count the ways.

1. The text made visible by these mouseovers is taken from the content of elements elsewhere in the DOM. The only place in the DOM that CSS would be able to get content would be (in this case) from attributes of the respective sup elements.
2. The content of the span elements from which the content is taken contains markup, and JavaScript can copy this markup through the cloneNode function; this cannot be emulated with CSS.
3. The content is not appended to the sup elements, but rather to their respective parent li elements. While CSS could make an illusion otherwise (unless you had two footnote numbers in a row), it would have to append it to the sup element itself.

Simply put, CSS simply cannot fully replace JavaScript—and doesn't have to. CSS and JavaScript play different roles in webdesign.

Document URI

There are two properties of the document node object that allow you to get the URI of a markup document (not just (X)HTML):

documentURI

This, quite simply, gets the URI of the document itself.

baseURI

If an absolute URI is set through the base element, then this property is the value of the base element's href attribute. If the value of the base element's href attribute is not an absolute URI or the base element is not included in the (X)HTML document, then the actual URI document is used instead.

In the case of the document URI being used, this means the entire URI, including anything after the following:

A hash mark (#)

These are often seen in URIs that point to a specific section of a document as defined in an id attribute. This ID does not need to exist for the script to use it.

A question mark (?)

Question marks in a URI usually begins a list of parameters sent to a server-side script via the URI, and also appear before the x and y coördinates sent via a server-side image map, as mentioned in Image Maps.

The URI can then be processed like any other string. Using the tabbed menu above, I use both the ? and the # to give options to whoever views the page. Take a look at the following if statement:

What this does is check to see if ?NoJS is found in the URI. In other words, bordered_tabbed_menu.html will take you to the page and use a tabbed menu, but bordered_tabbed_menu.html?NoJS will act as if JavaScript wasn't activated at all.

Further in this script is something that looks for a # in the URI. Usually, this will jump to an element with a specific ID (if it can find on). However, the script will use this to dictate which tab is showing by altering initial value of cur.

The variable cur is declared but not given a value. The ID that the page would normally jump to is processed by the script. The script checks:

(uri.indexOf("#") == -1)

Whether or not an ID is specified. If one isn't, this proves true, as -1 means the character wasn't found at all.

(uri.split("#")[1].substr(0,3) != "Sec")

(isNaN(uri.split("#")[1].substr(3)))

Whether or not the specified ID is correct. In this case, a) the first three characters have to be Sec and b) the rest of it must be a number.

(Number(uri.split("#")[1].substr(3)) > h2s.length)

This one is specific to this particular ID format: it checks to see if the number in the specified ID is greater than the length of the node list represented by the h2s variable.

If any of the above is true, then cur is set to 0 and the first tab is shown. If not, then cur is set to one less than the number specified in the ID—which could also be 0, but then that would be because the first tab was desired.

Below is the final result:

Filtering DOM Nodes

It's easy to select all p element nodes or span element nodes, but what if you wanted to select all p element nodes that have the class space, or all span element nodes that are child nodes of a header element?

Either one will actually take two arrays: the node list, and one created to hold the desired references. Below are scripts that do just that:

Of course, one has a really long condition, the other is too narrowly defined. So, we use extra coding for each to test their nodes. One, we have to match to strings from h1 to h6, a simple enough loop. The other, since class attributes can hold space-separated strings, require the string to be split, for which we'll create a function.

The second one uses a nested if statement to make sure that the element has an class attribute at all, and uses the className property, as some browsers handle the class attribute differently than others, and this allows for both.