JavaScript DOM编程艺术 学习笔记（四）JavaScript 图片库

此例子是实现一个图片库，虽然网页标记代码没有多大，但加上几张图片后用户要下载的数据量就相当可观了。所以

此例中做了以下几件事：

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数组的第一个和最后一个元素