JavaScript学习笔记（一）
刚刚接触JavaScript，这是我对一些基本DOM方法的理解。
JavaScript DOM
DOM(document object model)即文档对象模型
getElementById()方法：通过元素ID属性值获得元素（将返回一个对象）
getElementByTagname()方法：它的参数是一个标签，将返回一个对象数组
getAttribute()方法：使用方法：object.getAttribute(attribute),它不能直接通过对象调用，需要通过元素节点调用它
setAttribute()方法;object.setAttribute(attribute,value),对属性信息作出修改
基于上述四个DOM方法，我跟随JavaScript编程艺术这本书中做了一个图片库，我这个图片库是由一张占位图片和一些链接组成的，我们不希望点击链接之后调到一个新的浏览器窗口中查看图片，所以要通过JavaScript部分的代码控制图片，当点击链接这个事件发生时，会触发函数，从而实现点击的图片出现在占位图片处，而不是重新打开一个窗口。
部分代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/layout.css">
</head>
<body>
<div class="und">
<ul id="igegallery">
<li>
<a href="images/1.jpg" οnclick="showPic(this);return false;" title="a picture" >a pictur</a>
</li>
<li>
<a href="images/2.jpg" οnclick="showPic(this);return false;" title="another picture" >another picture</a>
</li>
<li>
<a href="images/3.jpg" οnclick="showPic(this);return false;" title="picture3">picture3</a>
</li>
<li>
<a href="images/4.jpg" οnclick="showPic(this);return false;" title="picture4">picture4</a>
</li>
</ul>
</div>
<div class="bottom">
<p id="description"> choose a image </p><!--包含在p元素内的内容是p的子节点，要检索他需要用到nodeValue-->
<img src="images/gg.jpg" id="placeholder" alt="xiaogg"/>
</div>
<script type="text/javascript" >
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");//document.getElementById是获取HTML页面元素的方法
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");//getAttribute用作检索元素的属性值
var description=document.getElementById("description");
description.firstChild.nodeValue=text;//firstChild 第一个子节点，包含在p元素里的文本内容 nodeValue的作用是检索和设置属性的值
}
</script>
</body>
</html> 我还通过CSS使调用图片库的链接排列的更美观一些，这里主要研究DOM获取HTML页面元素，获取元素属性和改变这些属性的基本基本方法的使用，对CSS部分代码不做讨论。
其中，whichpic就代表了元素节点，通过getElementById()，获取HTML页面元素一张图片，而setAttribute()和getAttribute()不能通过对象直接调用，而是需要通过元素节点来调用，这个whichpic就是上述两个方法的元素节点，我创建了两个必要的变量，source和placeholder，这里我觉得通过var创建一些必要的变量可以使代码变得简洁易读，var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source);要比document.getElementById("placeholder").setAttribute("src",source);更加明了，同时要注意不要使用关键字命名，也要使变量名尽量贴合它的本来意义。shoePic这个函数里的前三行代码是对图片置换的操作，他通过获取HTML页面的图片元素，在改变元素的属性值来实现，在JavaScript中，我们实现了图片的调换实现，但是，在HTML中，还需要一个触发这段函数的事件，图片库是通过点击对应描述他的链接而呈现在大家的眼前的，所以，这个触发函数的事件就是点击链接——onclick。 οnclick="showPic(this);return false;"这样一条语句的作用就是点击链接触发shoePic这个函数，同时返回false避免跳转到一个新的浏览器窗口。同理，下面的一些语句，是在我们调换图片的同时，描述图片的语句即<input></input>标签里的title属性对应的值也随之变化。要改变文本元素的值，需要用到一个新的DOM属性nodeValue,但是<p>标签的No的value属性值是空值，因为我们所要寻找的是<p>里面包含的文本的值，包含在<p>里面的文本也是他的第一个子节点，所以我们可以通过description.childNodes[0].nodeValue来获取这段文本，在代码里出现的firstChild就代表了childNodes[0]（lastChild代表childNodes[length-1]），只不过这种表示方法更加直观。
在浏览器里，我的JavaScript图片库是这样的
点击你想查看的图片
是这样的，描述图片的文字取代了choose a picture，图片取代了最开始的placeholder。
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
