JavaScript DOM与事件基础及面向对象入门

DOM与事件回顾

一、回顾：DOM与事件 首先回顾DOM（文档对象模型）和事件机制。DOM在JavaScript开发中应用极为广泛，绝大多数Web开发语言都提供了相应的实现，为开发者提供了统一的接口标准。

 <html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  </head> <body> <ul> <li>李老师-英语</li> <li>张老师-数学</li> <li>刘老师-物理</li> </ul> </body> </html> 

示例代码在页面内容完全加载后，通过getElementsByTagName()方法获取页面中所有的li元素，随后通过循环遍历，将这些li元素的颜色统一修改为红色。

接下来看第二个DOM操作示例，该示例演示如何从页面中移除第二个li元素。

 <html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  </head> <body> <ul> <li>李老师-英语</li> <li>张老师-数学</li> <li>刘老师-物理</li> </ul> </body> </html> 

代码首先获取li元素的父节点ul元素，然后利用removeChild()方法删除ul节点下指定的li子元素。

此外，也可以直接使用parentNode属性直接获取li元素的父节点，代码如下：

 
window.onload = function(){
//给Dom元素添加颜色
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].style.color = "red";
} 
//删除第二个li元素
//var ul = document.getElementsByTagName("ul")[0]; //索引从0开始
//ul.removeChild( li[1] ); //索引从0开始
li[1].parentNode.removeChild( li[1] ); //索引从0开始，直接使用parentNode来获取li元素的父节点
} 

事件处理机制

事件是黏合应用程序中所有用户交互的胶水。DOM和事件的是JavaScript中的黄金搭档（呵呵，来句广告词），它们决定着现代Web应用程序形态的根本所在。

看下面的例子：

 <html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  </head> <body> <ul> <li>李老师-英语</li> <li>张老师-数学</li> <li>刘老师-物理</li> </ul> </body> </html> 

本例中，获取li元素后，通过循环为每个元素添加事件监听，具体包括onmouseover和onmouseout事件。当鼠标滑入时，元素颜色改变；当鼠标滑出时，颜色恢复原状。

事件机制复杂多变，上述例子仅为最简单的演示，因此未遇到复杂问题。在后续学习中，我们将遇到如事件冒泡、事件传递、取消事件等问题。

3，DOM和事件

在DOM与事件交互的基础上产生了DHTML（动态HTML），其实质是JavaScript事件与DOM元素上CSS属性之间的交互。DHTML的存在意义在于组合这两项技术，从而实现动态网页效果。

简单的面向对象开发

我们先来感受一下JavaScript面向对象的基本写法。下面代码展示了学校中课程名和老师的信息。

最终运行结果会输出“李老师 是教 英语 的。”

在此例子的基础上，我们再定义个函数，用来输出所有的课程信息。代码如下所示：

最终结果会输出：

本例中， 数组的值都调用了 display()方法。

改进如下：

在

AllLecture.prototype.display=function(){
var str = "";
for(var i=0;i<this.lec.length;i++){
str += this.lec[i] + "\n";
} 
return str;
} 

中的this.lec[i] 处，统一调用display()方法。然后去掉数组的值调用display()。修改后的代码如下：

同样也可以输出跟上例一样的结果。

这是一个简单的面向对象开发的例子，随着JavaScript逐渐被程序员所接受，设计良好的面向对象代码也日益普及。在后面的笔记中，你将会看到更多的面向对象程序代码。

本章回顾了DOM和事件，然后通过例子简单的讲解了面向对象的开发。