《Javascript_DOM编程艺术》学习笔记（二）

今天主要以一个小例子来记录学到的知识点。

项目名称：我的美术馆

项目简介：页面中列出一系列图片的链接，点击链接，会在链接组的下面切换到对应的图片，并且在图片的上方更改对应图片的简介信息

效果展示：

点击第一个链接后：

下面讲讲具体实现代码：

在HTML页面中，用到的一个很重要的JS知识就是：onclick事件，该事件会在元素被鼠标点击时发生，触发JS事件

• 这条语句表示当onclick事件发生时，会调用showPic()这个函数（对这个函数定义写在JS文件中）；
• showPic(this)其中的this参数是一个关键字，他表示的是“当前这个对象”，具体到当前的例子来说，this表示当前的a元素对象
• οnclick=“javascript statement”，引号里面包含的JS代码，我们可以把任意数量的JS代码放在这个引号里，只要把各条语句用分号分开就好了
  
• 关于“return false”，先了解以下事件处理函数的工作机制：当给某一个元素添加了事件处理函数后，一旦预定的事件发生，相应的JS代码就会得到执行，JS代码执行完毕之后可以返回一个结果，并将它传递到事件处理函数。这里的“return false”在这里的作用是，当链接被点击，JS代码执行完毕之后，给事件处理函数返回false ，事件处理函数会认为“这个链接没有被点击”，这样就可以阻止链接被点击时的默认行为（链接中的那张图片将以一个新的窗口的形式展现出来，完全覆盖了之前的链接组和文字）

现在来详细了解下事件处理函数：

   事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。HTML文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应，主要分为浏览器事件和HTML元素事件两大类。在了解这两类事件之前，先来了解事件捆绑的概念。HTML文档将元素的常用事件（如onclick、onmouseover等）当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。如果在javaScript中分配事件处理函数、则需要首先获得要处理的对象的引用、然后将函数赋值给对应的事件处理函数属性。

一些常用的HTML DOM事件：

• 当用户点击鼠标时(onclick)
• 当网页已加载时(onload)
• 当图像已加载时（onload）
• 当鼠标移动到元素上时(onmouseover)
• 当鼠标离开时（onmouseout）
• 当输入的字段被改变时(onchange)
• 当提交HTML表单时(onsubmit)
• 当用户触发按键时(onsubmit)

 

现在看看JS实现代码：

这里的主要知识点有：

• whichpic.getAttribute("title");  获得对应元素的title属性的值
  
• whichpic.setAttribute("src",source);  设置对应元素的属性的值
  
• childNodes 属性让我们可以从给定文档的节点数里把任何一个元素的所有子元素检索出来；返回一个数组，这个数组包含给定元素节点的全体子元素；

• getElementsByTagName("标签名")，返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。就是你输入标签名，这个方法会返回文档中所有的这个标签的对象
• nodeTyp属性：这个属性可以让我们来区分文档里的各个节点，它的返回值是数字：

      1：代表元素节点

      2：代表属性节点

      3：代表文本节点

      这就意味着，可以让我们只对某种特定类型的节点进行处理

• nodeValue属性：这个属性可以用来设置和检索节点的值

以上两句话是等价的，一个p元素内包含的文本相当于p元素的子节点

下面两句话也是等价的：