Enumerating Attributes for an Element in Java

Maker Data Matrix 2d barcode in Java 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 <li> but has an index of 1, not 0, in Firefox: var arrayOfAttrNodes = document.getElementById("twitter").attributes; arrayOfAttrNodes[1].name; // "id"

But a NamedNodeMap is called a NamedNodeMap for a reason. You can, you know, query members by name, with an identifier and the . operator or with a string and the [] operator. Try both ways, verifying your work with Figure 7 15: var arrayOfAttrNodes = document.getElementById("twitter").attributes; arrayOfAttrNodes.id.value; // "twitter" var arrayOfAttrNodes = document.getElementById("twitter").attributes; arrayOfAttrNodes["class"].value; // "sprite"

Figure 7 15. Querying attributes with refinement operators In regard to Node.attributes, Internet Explorer again says, I ll be on my own side. By myself. Prior to version 8, Internet Explorer put every default attribute from the DTD in an element s attributes member. So, there might be like 100 in there. Yipes! Internet Explorer 8 does not have the bug. Let s take a moment to sigh ruefully over this Internet Explorer bug. Then find a workaround for Internet Explorer 7 and earlier. Hmm. Why don t we... No, that won t work. I know, filter the Attr nodes in attributes by their specified member. Just throw away the ones with a value of false. Click Clear in both Firebug panels, and then define a helper function named filterDefaultAttrNodes() like so: function filterDefaultAttrNodes(elem) { var filtered = []; for (var i = 0, j = elem.attributes.length; i < j; i ++) { if (elem.attributes[i].specified) { filtered.push(elem.attributes[i]); } } return filtered; }

Note that the NamedNodeMap object in Node.attributes is a live DOM query just like a NodeList object is. To improve performance, you save the length member to a loop variable named j. In this way, you query the DOM one time for length rather than maybe 100 times for Internet Explorer. Now pass the Twitter <li> as the parameter to filterDefaultAttrNodes(). function filterDefaultAttrNodes(elem) { var filtered = []; for (var i = 0, j = elem.attributes.length; i < j; i ++) { if (elem.attributes[i].specified) { filtered.push(elem.attributes[i]); } } return filtered; } filterDefaultAttrNodes(document.getElementById("twitter")); // [Attr, Attr] Verify your work with Figure 7 16.

Figure 7 16. Filtering maybe 100 default Attr nodes for Internet Explorer Two Attr nodes are in there. Note that, for Firefox, Safari, Opera, and Internet Explorer 8, elem.attributes[i].specified will always be true. So, this function does nothing for nonbuggy browsers. But for Internet Explorer 7 and older, it eliminates about 100 unwanted default Attr nodes. As an added benefit, the return value is a real array. Thus, unlike the arraylike attributes object, this one has all the array methods. You can manipulate the Attr nodes with those methods. Moreover, Node.attributes is a live DOM query and is memory intensive. On the other hand, the filtered array is not live, so it is very fast in comparison. From an Internet Explorer lemon, we made lemonade!