JavaSCRIPT中的空白錯誤

我正在練習HTML DOM，我想弄清楚爲什麼第一個腳本工作並顯示childNodes;但第二個腳本沒有。JavaSCRIPT中的空白錯誤

<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>

現在上面的代碼運行正常;但下面的一個不，我試着通過螢火蟲調試它;但我什麼也沒得到。

<!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>

有人可以請我解釋我做錯了什麼，以及什麼將空白的bug與上面的腳本有關。謝謝大家:)

來源

2014-02-05 CuriousDev

'Parent.childNodes [0]'未定義。換句話說，'Parent.childNodes.length'等於「0」 –

你爲什麼使用doucument.write（）？ – epascarello

您可以強調頂部和底部代碼之間的區別嗎？我看不出有什麼不同。我所看到的是大量的'document.write（）' – zero298

如果你聲明DOCTYPE，那麼第一個元素不是「HTML tag」，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

來源

2014-02-05 15:44:34

非常感謝兄弟，我現在明白了。我現在可以在我的網站中使用HTML DOM，而無需擔心。 – CuriousDev

也只是好奇，但爲什麼把下劃線之前Parent.childNodes [0]; – CuriousDev

這是一個錯字。請接受我的回答：http://stackoverflow.com/help/accepted-answer –

在第一個例子是document.childNodes[0]和<html>這個節點有孩子<head>。

在第二個示例中document.childNodes[0]是<!DOCTYPE html>並且此節點沒有子節點。所以Parent.childNodes[0]是未定義的，並導致一個JavaScript錯誤。

來源

2014-02-05 15:45:04 Danny

謝謝。我明白爲什麼每當我刪除「<！DOCTYPE html>」它會工作。 – CuriousDev

JavaSCRIPT中的空白錯誤

回答

相關問題