Clean Up Your Page, Removing Bad Behaviour

Let’s work through the showInfo function.

1. We store a reference to the div that will hold the info. This id is stored in a global variable infoDiv at the top of the script.
2. workingDiv.innerHTML would probably be the way most would achieve the next part of the code but innerHTML is not part of the DOM specification. To emulate the innerHTML function we have to work a bit differently. Into a new variable, we clone workingDiv using cloneNode. The boolean false that is passed as an argument tells JavaScript that we want to clone the element only and not anything inside of it.
3. Now that we have a new empty div, we insert this into the document and introduce a couple of new concepts. workingDiv.parentNode refers to the parent of workingDiv or the next level up in the document hierarchy if you wanted to you could use workingDiv.parentNode.parentNode.parentNode.parentNode to refer through all parents to the element. workingDiv.parentNode.insertBefore(emptyDiv, workingDiv) is a function that will insert a the first argument node or element directly before the second node or element passed to the function. Now we have the same div as before (because we cloned it) inserted before the old one.
4. Now that we have two nodes, we need to remove the old one from the document so again we refer to the parent node of workingDiv and run the removeChild function passing workingDiv as an argument. workingDiv no longer exists in the document and we are left with just the emptyDiv that was inserted in step 3.
5. Because the DOM works on document hierarchy, it’s not a simple matter of adding text inside emptyDiv we need to give emptyDiv a child. In this case we will create a text node using createTextNode out of the text in the title attribute. We then use appendChild to add the text node as a child of emptyDiv!

hideInfo is exactly the same as showInfo except for step 5 we clear the text out of the document onmouseout.☺

So you’re probably starting to see that there aren’t many limits on what can be done without a single line of code inside the HTML.

Let’s look at another method of isolating a group of elements.

I want users to know when they will be leaving my page. In order to flag this, I give them a confirm message whenever they click a link to an external page. (I wouldn’t do this on a real site unless you wanted to annoy your users ☺ ). This next method will find all the links on the page and add the confirm function to any link that has a class of “external”.

Add the below code just above the last } in the initiatePage function.

// loop through and check if the class name contains externalFlag
	// it will add a confirm message if it does...
	nm = links.length;

	for (i=0; i< nm; i++)
	{
	   if (links[i].className.indexOf(externalFlag) != -1)
	   links[i].onclick = function () { return confirm(message);};
	}

See results at : www.lukedingle.com/scripts/dom.php?getCode

This is as simple as it gets really. Get all the links, check their className for the external link flag and add a confirm message to it if it is found.

As you can see now, our page has a lot of JavaScript going on and we haven’t written a single line into the HTML page yet.

Hierarchy Acrobatics and Elements on the Fly

Now that you can access any element you want inside of a document, let’s have a look at some more DOM properties and methods you can use to swing your way around the HTML family tree.

Some Additional Properties

• element.firstChild: This holds a reference to the first child of the element. If element is it will return a reference to as it is the first child of . If the element has no first child, it holds the value null. You can use firstChild an arbitrary number of times all the way down to the wee wee grandchildren.
• element.childNodes: An array of all the child nodes inside an element. If element was , this would hold all the elements in the document.
• element.parentNode: We had a quick look at this earlier in the examples, this holds a reference to the parent node of the element. If element was then parentNode would hold a reference to as it is the next level up in the hierarchy. As with firstChild, this can be used an arbitrary amount of times up to the top level element . If there is no parent, this will be null.
• element.previousSibling/element.nextSibling: This holds a reference to the element that is previous/next within the document but has the same direct parent. If element was then previousSibling be a reference to as they are both direct descendants of .

Some Additional Methods

• document.createElement(tagName): This will create an element of type tagName. If you wanted to create a div you would usevar newDiv = document.createElement("div");You can then set some attributes of the new divnewDiv.setAttribute("id", "newDiv");Then you can add it to the element of your choice – in this case the document.document.appendChild(newDiv);
• element.getAttribute(attName)/element.setAttribute(attName, attVal): This will get and set attributes of an element. Although it is possible to access a lot of attributes directly, the DOM requests that you use get and set attributes in favour of the older methods.
• element.removeChild(element): Pass a reference to an element to this method to remove it from the document.

Summing Up

I certainly hope that I have conveyed how easy the DOM can make your client-side scripting life. In the example code we have gone through, there are many elements with JavaScript applied to them using events but even without JavaScript the page is completely functional. There isn’t a single line of code amongst the HTML and the JavaScript can be re-used with little or no change in any HTML file you want.

Thanks for reading and I hope to answer your DOM questions on the Web Squeeze soon!

Here is all the JavaScript code:

Or you can download from http://www.lukedingle.com/scripts/javascript.js

// This function will be added to throughout the tutorial
// This function will be run when the a page loads and will set up
// The various things using the DOM
var backgroundColour = '#EEEEEE'; // This is the colour the background will turn on mouseover
var date = new Date();			  // a nice date object to work with

var infoDiv = 'border';			 // This is the div we will be adding text to later

var externalFlag = 'external';   // The class name given to links to external sites

var message      = 'Oh! Please don't leave so soon! By clicking okay, you will go to another site. Are you sure you want to?'; // Message on leaving

function initiatePage ()
{
	// Let's get a reference to the #header div in our document.
	var header = document.getElementById('header');

	// Now, we'll attach the background colour changing function
	// to the header div's onmouseover and onmouseout event handlers

	if (header != null)
	{
		header.onmouseover = changeBackground;
		header.onmouseout  = changeBackground;

		//let's get all of the links found inside the header div
		// we will add the showInfo function to the mouseover eventHandler
		// to hide the details 

		var headerLinks = header.getElementsByTagName('a');

		// count how many there are and add the function to them
		nm = headerLinks.length

		for (i=0; i