I’m having a problem getting simple HTML5 DOM processing to work on MSIE 9. It works without a DOCTYPE tag. But with the inclusion of DOCTYPE html (indicating html5), MSIE 9 doesn’t process it. Is there another way that I can do this so that it works as html5?
The code attempts to create a nodeList by getting a DOM node and getting elements from that by tag name. The simple test is to display the nodeList.length. This is a small sample of what I see as a larger problem in the application I’m building. But this small bit of code is better to present here, I think, than trying to show you my whole application.
The following code works on Chrome, Firefox, Opera and likely more … but not on MSIE 9. I also have it online, so you can just click this link (as long as I’m running) and try it; then copy the address to try it in other browsers. I’ve also removed “<!DOCTYPE html>” and it then works in MSIE. But then no browser will know that it’s html5 (if I understand it correctly).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function setOptions () {
var ndiv = document.getElementById("products");
var OptionList = ndiv.getElementsByTagName("option");
document.getElementById("dump").innerHTML = "OptionList.length " + OptionList.length;
}
</script>
</head>
<body onload="setOptions()">
<br/><br/><br/>
<div id="dump"></div>
<div id="products" style="display:none">
<option>MOTOR</option>
<option>CHASSI</option>
<option>ELECTRIC</option>
<option>BRAKES</option>
<option>TIRES</option>
</div>
</body>
</html>
You’re using invalid markup. Option elements should not be children of div elements. If you change the div element with ID of products to be a select element instead, it will work as expected.
As IE9 doesn’t have an HTML5 parser, you can not guarantee what will happen with invalid markup, and unexpected results like this may happen. IE10 has an HTML5 parser, so handles the error case in line with other browsers.