Я пытаюсь включить (эффективно) статические данные XML в файл HTML, а затем проанализировать их с помощью JavaScript. Приведенный ниже тестовый пример отлично работает в Firefox, Opera и Chrome (я получаю ожидаемый список узлов и глубин), но не удается в IE8 (все узлы находятся на одной глубине, а конечные теги включены в список узлов).
Вопрос: Как мне исправить код, чтобы он работал как положено в IE?
код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Odd Ie behavior - test case</title>
<script type="text/javascript">
function p(text) {
var out = document.getElementById("output");
out.innerHTML += text + "<br>";
}
function walkDom(node, depth) {
var i, il;
if (node.nodeType === 1) {
p("Node( " + depth + "): " + node.nodeName);
if (node.childNodes && node.childNodes.length > 0) {
for (i = 0; i < node.childNodes.length; i += 1) {
il = node.childNodes[i];
walkDom(il, depth + 1);
}
}
}
}
function init() {
var data = document.getElementById("data");
walkDom(data, 0);
}
</script>
</head>
<body onload="init()" id="body">
<div id="data" style="display: none"><data><ele><foo>Foo</foo><bar></bar></ele></data></div>
<div id="output"></div>
</body>
</html>
«Правильный» вывод
Node( 0): DIV
Node( 1): DATA
Node( 2): ELE
Node( 3): FOO
Node( 3): BAR
IE вывод
Node( 0): DIV
Node( 1): DATA
Node( 1): ELE
Node( 1): FOO
Node( 1): /FOO
Node( 1): BAR
Node( 1): /BAR
Node( 1): /ELE
Node( 1): /DATA