第四章 用javascript和DOM去建立一个图片库
把整个图片库的浏览链接集中安排在你的图片库里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给它。
代码如下：
<body>
<ul>
<li>
<a href="images/4-1.png" onclick="showPic(this);return false">图片1</a>
</li>
<li>
<a href="images/4-2.png" onclick="showPic(this);return false">图片2</a>
</li>
<li>
<a href="images/4-3.png" onclick="showPic(this);return false">图片3</a>
</li>
<li>
<a href="images/4-4.png" onclick="showPic(this);return false">图片4</a>
</li>
<img src="images/4-1.png" />
</ul>
<script type="text/javascript">
function showPic(pic){
var source = pic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</body>- 通过onclick事件处理函数去触发的动作是调用showPic()函数，想调用这个函数必须向它传递一个参数：一个带有href属性的元素节点。因此，要把那些链接本身用作参数。这里用this关键字来表示”这个<a>元素节点“，这个关键字含义是“这个对象"
- 事件处理函数的工作机制：在给某个元素添加了事件处理函数后，一旦发生预定事件，相应的javascript代码就会得到执行，那些javascript1代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。在这，返回给onclick事件处理函数的值是false，onclick事件处理函数将认为“这个链接没有被点击”
- chlidNodes属性
该属性可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。childNodes属性将返回一个数组，这个数组包含给定元素节点的全体子元素。
childNodes属性返回的数组包含着所有类型的节点。除了所有的元素节点，所有的属性节点和文本节点也包含其中。
element.childNode
- nodeType属性
利用nodeType属性来区分文档里的各个节点。这个属性返回的是一个数字。 node.nodeType
nodeType属性值总共有12种可取值。其中仅有3种具有实际价值：元素节点、属性节点和文本节点，相对的nodeType属性值分别是1,2,3
- nodeValue属性
这个属性的用途是检索和设置节点的值。 node.nodeValue
- firstChild 和 lastChild属性
node.firstChild完全等价于 node.childNodes[0]
node.lastChild完全等价于 node.childNodes[node.childNodes.length-1]
查询body元素里有多少个子元素：
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
alert(body_element.nodeType); //1
}
window.onload = countBodyChildren;- 上一篇 »JavaScript面向对象编程实战
- 下一篇 »python 各种加密加密学习
