第四章 案列研究: JavaScript图片库

利用JavaScript来创建图片库将是最佳的选择:把整个图片库的浏览链接集中安排在图片库主页里,只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他.

时间处理函数(event handler)的作用是,在特定时间发生时调用特定的JavaScript代码.例如,如果想在鼠标指针悬停在某个元素上时触发一个动作,就需要使用onmouseover事件处理函数;如果想在鼠标指针离开某个元素时触发一个动作,就需要使用onmouseout事件处理函数.用户点击某个链接时触发一个动作,就需要onclick事件处理函数.

4.4.1 childNodes属性
在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组:

element.childNodes
例:
var body_element = document.getElementByTagName("body")[0];
body_element.childNodes

4.4.2 nodeType属性
由childNodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点.

用下面的语法获取节点的nodeType属性:

node.nodeType
nodeType的值是一个数字而不是像"element"或"attribute"那样的英文字符串.

nodeType属性总共有12种可取值,但其中仅有3种具有实用价值.

元素节点的nodeType属性值是1.

属性节点的nodeType属性值是2.

文本节点的nodeType属性值是3.

4.4.5 nodeValue属性
如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,它用来得到(和设置)一个节点的值:

node.nodeValue
<p>元素本身的nodeValue属性是一个空值,包含在<p>元素里的文本是另一种节点,它是<p>元素的第一个子节点.如果需要获取<p>元素所包含的文本的值,其实想它的第一个子节点的nodeValue属性值.

var description = document.getElementById("description");
alert(description.childNodes[0].nodeValue);

4.4.6 firstChild和lastChild属性
node.firstChild     childNodes数组的第一个元素,等价于node.childNodes[0];

node.lastChild      childNodes数组的最后一个元素,等价于node.childNodes[node.childNodes.length-1];