刚接触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;
工具: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;
解决方案 »
- 在google map上点击图标显示信息窗口:
- 把一个JS图片切换效果改成兼容主流浏览器的!
- JS设置图片路径,火狐中该怎么设置?
- 怎么判断js中一个变量是有效的数字
- 想问一下这几个javascript函数的作用,谢谢
- 加65535是什么意思?关于表格排序。
- 如果取得父节点下第N个子节点?
- 唉。我的帖子结早了。害的我连提了三个问题,还是找孟子、请进,还是behavior:url(#default#savehistory);
- 小问题,解决后立刻给分!!!
- 使用bootstrap table 无法获取controller的数据
- jquery 中extend中的用法
- 在一个html中加入一些字怎么做。
firefox下空格,回车换行字符都是属于其子节点的(#text).
可以用firefox测试一下,看和书上的是否一致。