Professional JavaScript For Web Developers

DOM Basics
To access the element with the ID “div1”, you can use the getElementsByTagName() like this:
var oDivs = document.getElementsByTagName(“div”);
var oDiv1 = null;
for (var i=0; i < oDivs.length; i++){
if (oDivs[i].getAttribute(“id”) == “div1”) {
oDiv1 = oDivs[i];
break;
}
}
Or, you could use getElementById() like this:
var oDiv1 = document.getElementById(“div1”);
As you can see, this is a much more streamlined way to get a reference to a specific element.
Internet Explorer 6.0 also returns an element if the given ID matches the name
attribute of an element. This is a bug, and one that you should be very careful of.
Creating and manipulating nodes
So far, you’ve learned how to access various nodes inside of a document, but that’s just the beginning of
what can be done using the DOM. You can also add, remove, replace, and otherwise manipulate nodes
within a DOM document. This functionality is what makes the DOM truly dynamic.
Creating new nodes
The DOM Document has a number of methods designed to create various types of nodes, even though
the browser document object doesn’t necessarily support each of these methods in all browsers. The following
table lists the methods included in DOM Level 1 and which browsers support each one.
Method Description IE MOZ OP SAF
createAttribute Creates an attribute node with X X X –
(name)
the given name
createCDATASection Creates a CDATA Section with a – X – –
(text)
text child node containing tex
createComment Creates a comment node X X X X
(text)
containing text
createDocument Creates a document fragment X X X X
Fragment()
node
createElement Creates an element with a tag X X X X
(tagname)
name of tagname
Table continued on following page
173