我的打印出來為什么有7個子節點?
代碼:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ChildNodes</title>
</head>
<body>
<div>
? javascript ?
? <p>javascript</p>
? <div>jQuery</div>
? <h5>PHP</h5>
</div>
<script type="text/javascript">
?var div_child=document.getElementsByTagName("div")[0].childNodes;
?for(var i=0;i<div_child.length;i++){
document.write("第"+(i+1)+"個子節點的類型:"+div_child[i].nodeType+"<br>");
}
</script>
</body>
</html>
結果:
第1個子節點的類型:3
第2個子節點的類型:1
第3個子節點的類型:3
第4個子節點的類型:1
第5個子節點的類型:3
第6個子節點的類型:1
第7個子節點的類型:3
2016-05-11
在<div>與第一個標簽之間的內容算是第一個節點(包括空白和文本),所以<div>之后的所有空白和JavaScript以及之后的回車空白都算一個節點。即
<div>之后一個“空白+JavaScript+空白”一個節點。
接著<p>javascript</p>一個節點,然后空白節點。
<div>jQuery</div>一個元素節點,然后空白節點。?
<h5>PHP</h5>一個元素節點,然后空白節點。
總共7個。
*若把第一個文本內容JavaScript改成<p>JavaScript</p>則一共會有9個節點。即
<div>之后一個空白節點,
<p>JavaScript</p>一個元素節點,后面一個空白節點。
接著<p>javascript</p>一個節點,然后空白節點。
<div>jQuery</div>一個元素節點,然后空白節點。?
<h5>PHP</h5>一個元素節點,然后空白節點。
總共9個。
2016-05-07
<div>
? javascript ?這是第1個節點nodeType為3是#text類型
? <p>javascript</p>?<p>javascript</p>這是第2個節點nodeType為1是元素類型
?<p>和<div>兩個標簽之間雖然是空文本 但也算一個子節點 因為這里也可以插入文本 這是第3個節點nodeType為3是元素類型 , ?在下面的<div>和<h5>之間也有一個空文本子節點 ?,<h5>和</div> 之間也有
? <div>jQuery</div>
? <h5>PHP</h5>
</div>