初学JavaScript的笔记

来源：互联网发布：手机添加网络什么意思编辑：程序博客网时间：2024/05/21 20:38

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" onclick="showPic(this);return false;" title="a picture" >a pictur</a></li><li><a href="images/2.jpg" onclick="showPic(this);return false;" title="another picture" >another picture</a></li><li><a href="images/3.jpg" onclick="showPic(this);return false;" title="picture3">picture3</a></li><li><a href="images/4.jpg" onclick="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。 onclick="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。

1 0