刚接触js,在看JS DOM编程艺术,按照书上4.1节的例子编写了一个页面,测试body元素中含有多少个子元素的过程中,发现其子元素只有4个,依次为H1,UL,IMG,#test,与书上说的body有很多个子元素不相符。更奇怪的是居然出现了#test元素,请高手指教原因。
工具:IE8,VS2008
页面代码如下:(基本和书上一样)
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/Blue hills.jpg" onclick="showPic(this); return false;">Blue hills</a>
</li>
<li>
<a href="images/Sunset.jpg" onclick="showPic(this); return false;">Sunset</a>
</li>
<li>
<a href="images/Water lilies.jpg" onclick="showPic(this); return false;">Water lilies
</li>
<li>
<a href="images/Winter.jpg" onclick="showPic(this); return false;">Winter
</li>
</ul>
<p id="description">Choose an image.</p>
<img id="placeholder" src="images/placeholder.gif" alt="My image gallery" />
</body>JS代码如下:
function showPic(whichpic)
{
var source=whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
placeholder.width = "400px";
placeholder.height = "300px";
}function countBodyChildren(){
    var bodyElement = document.getElementsByTagName("body")[0];
    for (var i = 0; i < bodyElement.childNodes.length; i++){
        alert(bodyElement.childNodes[i].nodeName);//这里依次弹出H1,UL,IMG,#test
    }
}
window.onload = countBodyChildren;