此例子是实现一个图片库,虽然网页标记代码没有多大,但加上几张图片后用户要下载的数据量就相当可观了。所以
此例中做了以下几件事:
1.保持图片清单list在当前页面
2.保持点击文字链接时不要转到新的窗口(即文字链接加一个onclick事件)
3.添加一个placeholder img来作为图片的显示替换,以此减少图片全部一起显示造成的下载数据量大的问题,做到按需显示
每个链接加上onclick事件属性,onclick = “showPic(this);” this代表的就是此元素节点对象
链接点击事件的实现就是:
function showPic(whichpic){
var source = whichpic.getAttribute(“href”);
//也可以不用setAttribute直接用.src 但尽量使用setAttribute~~~~~
document.getElementById(“placeholder”).setAttribute(“src”,source);
}
但是加了onclick事件后,点击链接既会出发onclick方法也会执行其默认行为即转到其href所指向的那个链接,走到下一个窗口。如何防止浏览器转到下个链接中去呢?答案是在onclick的事件中返回false
可参考:http://www.cnblogs.com/caishuhua226/archive/2012/03/20/2408165.html
这篇文章的说法。
刚才的例子是页面加载出来后点击链接才执行js方法,如果是页面加载中我就需要执行一些方法去做一些事情,应该放到哪个函数里呢?
答案是onload
onload是window对象的方法
window.onload = init(); 即页面加载时调用init方法
下面讲几个属性
1.childNodes:一个元素的所有子元素数组(错)应该是所有子节点节点不只包括元素节点,还有文字节点和属性节点~!
2.nodeType:节点类型元素节点为1 属性节点为2 文本节点为3
3.nodeValue: <p id = “description”>choose an image.</p>
通过id拿到p元素,由于p元素无子元素节点无属性节点 只有一个文本节点 所以获取到其文本节点的nodeValue就用description.childNodes[0].nodeValue即可
var description = document.getElementById(“description”);
alert(description.childNodes[0].nodeValue);//因为p元素本身的nodeValue是个空值,其文本节点是其第一个字节点,这样的到的才是我们想要的choose an image.文本
descrition.firstChild.nodeType=3
4.firstChild lastChild 即是childNodes数组的第一个和最后一个元素