Handling .nodeName in different browsers
Sunday, May 27th, 2007Recently, Izual and I were experimenting with DOM in order to add some more eye-candy to Chit-Chat, and experienced a mistake that often causes browser incompatibilities, but is looked over without paying much attention:
The nodeName attribute of a DOM element is not always reported in the case that it appears in your document. According to XHTML, all tags should be in lower-case; however, Internet Explorer 7, even if your tags are in lower case, returns the nodeName in upper case. This happens even when the rendering is done in XML strict and XHTML strict mode, as close as IE7 can get to that.
Take the following example:
<html>
<head>
<title>Sample</title>
</head>
<body>
<a href="" onclick="alert(document.body.nodeName); return false;">
Click me
</a>
</body>
</html>
While in Firefox the nodeName attribute value reported is “body”, Internet Explorer 7 reports “BODY”. This causes particular problems when comparing nodeName in order to detect a particular node. While it is more common to use .getElementsByTagName, we often need to compare tags one-by-one to avoid checking indirect children. Take the following example:
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function UpdateParagraph() {
var k = document.body.childNodes;
for ( i in k ) {
if ( k[ i ].nodeType == 1
&& k[ i ].nodeName == 'p' ) {
k[ i ].childNodes[ 0 ].nodeValue = 'Altered Paragraph!';
}
}
}
</script>
</head>
<body>
<p>Some paragraph</p>
<a href="" onclick="UpdateParagraph(); return false;">Click me</a>
</body>
</html>
In this case, Internet Explorer’s approach seems utterly problematic, as it will fail to recognize the tag. This can be easily fixed by converting the reported tag name to lower case:
if ( k[ i ].nodeType == 1 && k[ i ].nodeName.toLowerCase() == 'p' ) { k[ i ].childNodes[ 0 ].nodeValue = 'Altered Paragraph!'; }
