Question

我正在练习使用HTML DOM，我想弄清楚为什么第一个脚本会工作并显示childNodes;但第二个脚本没有。

<html><head><title>The Nodes</title>
<style>
p{font-size: x-large; color:darkblue;font-style:bold;
}
</style>
</head>
<body>
<h1>Walking with Nodes</h1>
<p>Who knows what node?</p>
<p>
<script type="text/javascript">

var Parent=document.childNodes[0];  // First childnode is HTML
var Child=Parent.childNodes[0];// Parent’s first child is HEAD

document.write("The parent node is: ");
document.write(Parent.nodeName+"<br />"); //Get the name parent node
document.write("The first child of the parent node is: ");
document.write(Child.nodeName+"<br />");
document.write("The node below the child is: ");
document.write(Child.childNodes[0].nodeName+"<br />");
document.write("The text node below title is: ");
document.write(Child.childNodes[0].childNodes[0].nodeName +"<br />");
document.write("The value of the text node is: ")
document.write(Child.childNodes[0].childNodes[0].nodeValue+"<br/>");
document.write("The first child of the parent is: ");
document.write(Parent.firstChild.nodeName+"<br />");
document.write("The last child of the parent is: ");
document.write(Parent.lastChild.nodeName+"<br />");
document.write("The node below the body is: ");
document.write(Parent.lastChild.childNodes[0].nodeName+"<br />");
document.write("The next sibling of the h1 element is: ");
document.write(Parent.lastChild.childNodes[0].nextSibling.nodeName+"<br/>");
document.write("It's value is " +
Parent.lastChild.childNodes[0].nextSibling.nodeValue);
document.write("<br>The last child's type is: ");
document.write(Parent.lastChild.nodeType);
</script>
</p>
</body>
</html>

现在上面的代码运行正常;但下面的那个没有，我尝试通过firebug进行调试;但我一无所获。

<!DOCTYPE html>
<html lang="en-US">
<head><title>the Nodes</title>
<style type="text/css">
p {
font-size: x-large;color:darkblue;font-style:bold;
}
</style>
<meta charset="utf-8">
</head> 
<body>
<h1>Practicing with nodes</h1>
<p>Who knows what node?</p>
<p>
<script type="text/javascript">
//<![CDATA[
var Parent = document.childNodes[0]; // documents child is HTML
var Child = Parent.childNodes[0]; // first child node of HTML is head 

document.write("The parent node is: ");
document.write(Parent.nodeName+"<br>");
document.write("The first child of the parent node is: ");
document.write(Child.nodeName+"<br>");
document.write("The parent node is: ");
document.write(Parent.nodeName+"<br />"); //Get the name parent node
document.write("The first child of the parent node is: ");
document.write(Child.nodeName+"<br />");
document.write("The node below the child is: ");
document.write(Child.childNodes[0].nodeName+"<br />");
document.write("The text node below title is: ");
document.write(Child.childNodes[0].childNodes[0].nodeName +"<br />");
document.write("The value of the text node is: ")
document.write(Child.childNodes[0].childNodes[0].nodeValue+"<br/>");
document.write("The first child of the parent is: ");
document.write(Parent.firstChild.nodeName+"<br />");
document.write("The last child of the parent is: ");
document.write(Parent.lastChild.nodeName+"<br />");
document.write("The node below the body is: ");
document.write(Parent.lastChild.childNodes[0].nodeName+"<br />");
document.write("The next sibling of the h1 element is: ");
document.write(Parent.lastChild.childNodes[0].nextSibling.nodeName+"<br/>");
document.write("It's value is " +
Parent.lastChild.childNodes[0].nextSibling.nodeValue);
document.write("<br>The last child's type is: ");
document.write(Parent.lastChild.nodeType);

//]]>
</script>
</p>
</body>
</html>

有人可以向我解释我做错了什么，以及空白错误与上述脚本有什么关系。谢谢大家：）

Answer 1

如果您声明DOCTYPE，那么第一个元素不是“HTML标记”，document.childNodes[0]将返回DOCTYPE而不是HTML。

Parent.nodeName返回HTML字符串。因为这意味着文档类型是HTML。

使用document.documentElement，请参见示例：

<script type="text/javascript">
//<![CDATA[
var Parent = document.documentElement; // documents child is HTML
var Child = Parent.childNodes[0]; // first child node of HTML is head

或使用getElementsByTagName，请参阅示例：

<script type="text/javascript">
//<![CDATA[
var Parent = (document.getElementsByTagName("html"))[0]; // documents child is HTML
var Child = Parent.childNodes[0]; // first child node of HTML is head

Answer 2

在第一个示例中，document.childNodes[0]为<html>，此节点包含子<head>。

在第二个示例中，document.childNodes[0]是<!DOCTYPE html>，此节点没有子节点。所以Parent.childNodes[0]未定义并导致javascript错误。

JavaSCRIPT中的空白错误

2 个答案: