首页 > 代码库 > JS DOM---Chapter 1-4

JS DOM---Chapter 1-4

1.JavaScript是一种解释型语言,Web浏览器负责解释&执行;

2.JavaScript是弱类型语言,不需要进行类型声明;

   JS变量(var)可以直接赋值而无需事先声明;

   a.数组的声明var cc = Array();

   b. 对象的声明var cc = Obiect();

        创建对象 var cc1 = {name="cc", age=22}; //属性键值对

3.DOM

一份文档Document就是一颗节点树,节点分为不同的类型,如元素节点、属性节点以及文本节点;

1)文档中的每一个节点node都是一个对象object

2)getElementById将返回一个对象,对应着文档中的特定元素节点

3)getElementByTagName和getElementByClassName将返回一个对象数组,对应着文档里的一组特定的元素节点

DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。对页面内容进行刷新却不需要在浏览器里刷新页面。

4. JS图片库 Demo

在学习Demo的过程中,遇到一个小问题:

<a href="http://www.mamicode.com/images/flower.png" title="Flower display" onclick="showPic(this);">Flower</a>

触发图片链接时,不仅showPic函数被调用,链接点击的默认行为也会被调用。这样的话,用户还是会被带到新窗口,我们希望阻止这一行为。

在这里,我们需要了解事件处理函数的工作机制:在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会被执行,被调用的JavaScript代码可以返回一个值,这个值将被传递给那个事件处理函数。

<a href="http://www.mamicode.com/images/flower.png" title="Flower display" onclick="showPic(this); return false;">Flower</a>

 我们加上一个return false;这样onclick事件处理函数所触发的JS代码返回false,onclick事件处理函数就会认为这个链接没有被点击,这个链接的默认行为就没有被触发,用户就不会被带到目标链接窗口。

JS DOM---Chapter 1-4