javascript

CHAPTER 7 ■ TRAVERSING AND MODIFYING THE DOM TREE
286
Now query some members from the Node interface. Remember to stop and click Run prior to each
comment in order to verify the return value:
myAttrNode.nodeType;
// 11
myAttrNode.nodeName;
// "class"
myAttrNode.nodeValue;
// "sprite"
Now query some members the Attr node received by way of the Attr interface:
myAttrNode.name;
// "class"
myAttrNode.value;
// "sprite"
myAttrNode.value = "sprout";
myAttrNode.value;
// "sprout"
myAttrNode.specified;
// true
So for an Attr node, Node.nodeName and Attr.name contain the same value, a string indicating the
name of the attribute. Similarly, both Node.nodeValue and Attr.value contain the value of the attribute
as a string. So, the first two members, name and value, are redundant. On the other hand, Attr.specified
contains a boolean: true if you explicitly set the attribute in your markup or by JavaScript and false if
not. So, false means the attribute value is a default from the document’s DTD. With those things in
mind, querying Attr.specified will likely be the only time you work with an attribute through the Attr
interface (as a node) rather than the Element interface (as a string).
Enumerating Attributes for an Element
For 11 of the 12 node types, the Node.attributes member simply contains null. But not for Element
nodes. For those, Node.attributes contains a NamedNodeMap, which is an arraylike object. Remember that
those contain numerically indexed members and a length member just like a genuine array but none of
the handy array methods like Array.splice().
What does Node.attributes contain? For every attribute explicitly set in your markup or by script,
Node.attributes contains a corresponding Attr node. So, no default Attr nodes in there.
Alrighty then, click Clear in both Firebug panels, and let’s explore Node.attributes:
var arrayOfAttrNodes = document.getElementById("twitter").attributes;
arrayOfAttrNodes.length;
// 2
So two Attr nodes appear, one for id and one for class. But there are no default ones like style or
dir. Now then, the numerical indexes in a NamedNodeMap are there just for enumeration purposes. That is
to say, DOM does not specify whether those should be ordered relative to source code, alphabetically, or
by any other pattern. So, browsers will vary in their numbering. For example, id appears first in the
Twitter but has an index of 1, not 0, in Firefox:
var arrayOfAttrNodes = document.getElementById("twitter").attributes;
arrayOfAttrNodes[1].name;
// "id"