JavaScript DOM 编程艺术 学习笔记本：美术馆
HTML代码：
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <ul id="solid"> 10 <li><a href="images/1.jpg" title="这个是图片一" onclick="showPic(this); return false;">图片一</a></li> 11 <li><a href="images/2.jpg" title="这个是图片二" onclick="showPic(this); return false;">图片二</a></li> 12 <li><a href="images/3.jpg" title="这个是图片三" onclick="showPic(this); return false;">图片三</a></li> 13 <li><a href="images/4.jpg" title="这个是图片四" onclick="showPic(this); return false;">图片四</a></li> 14 </ul> 15 16 <img src="images/p.gif" id="placeholder" alt="这是一张图片" /> 17 <p id="description">这个是文字 </p> 18 19 20 21 <script src="4.js" type="text/javascript"></script> 22 </body> 23 </html>
Javascript代码：
1 function showPic(whicpic) 2 { 3 var source = whicpic.getAttribute("href"); 4 var placeholder = document.getElementById("placeholder"); 5 placeholder.setAttribute("src",source); 6 var description = document.getElementById("description"); 7 var titleText = whicpic.getAttribute("title"); 8 description.childNodes[0].nodeValue = titleText; 9 }
笔记：
1、getElementById()方法；document.getElementById(id);
这个方法返回一个特定ID的元素节点相对于的对象。
2、getElementsByTagName()方法；element.getElementsByTagName(tag);
这个方法返回一个对象数组，对应着文档中有着给定标签的一个元素。
3、getAttribute()方法；object.getAttribute(attribute);
检索各种元素的属性。
4、setAttribute()方法；object.getAttribute(attribute,value);
检索并可以修改元素的属性节点的值。
5、childNodes属性；element.childNodes;
这个属性将返回一个数组，这个数组包含特定元素的所有子元素。
6、nodeType属性；node.nodeType;
这个属性可以让我们清楚的知道在和哪一种元素节点打交道。返回的是数字。
7、nodeValue属性；node.nodeValue;
可以检索和设置元素节点的值。
8、childNodes[0]等价于firstChild; 第一个子元素。
反之lastChild最后一个子元素。
