HTML5: case-sensitivity and the DOM

We read from the DOM Level 2 HTML specifications:

1.3. XHTML and the HTML DOM

The DOM HTML Level 1 API were originally intended to be used only for HTML 4.01 documents. The APIs were defined well before XHTML 1.0 became a specification, or before it was worked on by the HTML Working Group. From the DOM point of view, The biggest difference between HTML 4.01 (and earlier) and XHTML 1.0 is that XHTML is case sensitive, whereas HTML 4.01 is case insensitive. The HTML case insensitivity is also reflected in the DOM HTML API. For instance, element and attribute names are exposed as all uppercase (for consistency) when used on an HTML document, regardless of the character case used in the markup. Since XHTML is based on XML, in XHTML everything is case sensitive, and element and attribute names must be lowercase in the markup. Developers need to take two things into account when writing code that works on both HTML and XHTML documents. When comparing element or attribute names to strings, the string compare needs to be case insensitive, or the element or attribute name needs to be converted into lowercase before comparing against a lowercase string. Second, when calling methods that are case insensitive when used on a HTML document (such as getElementsByTagName() and namedItem()), the string that is passed in should be lowercase.

Note: The interfaces provided in this document are only for HTML 4.01 and XHTML 1.0 documents and are not guaranteed to work with any future version of XHTML.

So I've created a simple test to check what is the actual behavior of web browsers when dealing with HTML5 that, as you know, is case-insensitive. The markup is pretty simple:

<p>Lowercase</p>
<DIV>Uppercase</DIV>

And here is the basic DOM test:

window.onload = function() {

   var p = document.getElementsByTagName('p')[0].firstChild.nodeValue;
   var div = document.getElementsByTagName('div')[0].firstChild.nodeValue;

   alert('Lowercase p is: ' + p);
   alert('Uppercase div is: ' + div);

};

As you can see, I've specified a reference to the div element using a lowercase notation, though the element itself is actually in uppercase letters. All browsers, except Firefox 3.6, execute correctly the above code. Firefox 3.6 simply returns null. So the question is: what will be the default behavior of Internet Explorer 9 for such cases? Time will tell.

Leave a Reply

Note: Only a member of this blog may post a comment.