JavaScript是一种描述性语言，也是一种基于对象(Object)和事件驱动(Event Driven)的、并具有安全性能的脚本语言。它与HTML(超文本编辑语言)一起，在一个Web页面中链接多个对象，与Web客户实现交互。无论在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担。
总结其特点如下。
1.JavaScript主要用来向HTML页面中添加交互行为。
2.JavaScript是一种脚本语言，语法和Java类似。
3.一般用来编写客户端的脚本。
4.JavaScript是一种解释性语言，边执行边解释。
JavaScript的组成。
1.ECMASScript标准
2.浏览器对象模型（Browser Object Model，简：BOM）
3.文档对象模型（Document Object Model，简：DOM）
1.JavaScript：对事件作出反应 ---onclick 事件
1 <button type="button" onclick="alert('Welcome!')">点击这里</button>
alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
onclick 事件是众多事件之一。
2.JavaScript：改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
1 x=document.getElementById("demo") //查找元素 2 x.innerHTML="Hello JavaScript"; //改变内容
您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。
示例代码：（改变图片 改变样式用法类似）
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>我的第一段 JavaScript</h1> 6 7 <p id="demo"> //JavaScript 能改变 HTML 元素的内容。 9 </p> 10 11 <script> 12 function myFunction() 13 { 14 x=document.getElementById("demo"); // 找到元素 15 x.innerHTML="Hello JavaScript!"; // 改变内容 16 } 17 </script> 18 19 <button type="button" onclick="myFunction()">点击这里</button> 20 21 </body> 22 </html>
3.JavaScript：验证输入
1 if isNaN(x) {alert("Not Numeric")};
注：isNaN() 函数用于检查其参数是否是非数字值。
如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。返回值
isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。
如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。正因为如此，isNaN() 函数是必需的。
实现：
4.<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript：
<body> 中的 JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
实例
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 document.write("<h1>This is a heading</h1>"); 7 document.write("<p>This is a paragraph</p>"); 8 </script> 9 10 </body> 11 </html>
5.<head> 或 <body> 中的 JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
6.外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
实例
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <script src="myScript.js"></script> 5 </body> 6 </html>
7.操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素：
例子
通过指定的 id 来访问 HTML 元素，并改变其内容：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>My First Web Page</h1> 6 <p id="demo">My First Paragraph</p> 7 8 <script> 9 document.getElementById("demo").innerHTML="My First JavaScript"; 10 </script> 11 12 </body> 13 </html>
一、输出：
8.写到文档输出
下面的例子直接把 <p> 元素写到 HTML 文档输出中：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>My First Web Page</h1> 6 7 <script> 8 document.write("<p>My First JavaScript</p>"); 9 </script> 10 11 </body> 12 </html>
但是使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
实例
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>My First Web Page</h1> 6 7 <p>My First Paragraph.</p> 8 9 <button onclick="myFunction()">点击这里</button> 10 11 <script> 12 function myFunction() 13 { 14 document.write("呃！文档消失了。"); 15 } 16 </script> 17 18 </body> 19 </html>
点击按钮后运行结果：呃！文档消失了。
二、语句：
1.JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World"：
1 document.getElementById("demo").innerHTML="Hello World";
1）同样用分号来结束语句
2) 对大小写敏感
3）添加空格提高可读性
4）您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
1 document.write("Hello 2 World!");
不过，您不能像这样折行：
1 document.write 2 ("Hello World!");
5）JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
2.JavaScript 代码
JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。
浏览器会按照编写顺序来执行每条语句。
本例将操作两个 HTML 元素：
1 document.getElementById("demo").innerHTML="Hello World"; 2 document.getElementById("myDIV").innerHTML="How are you?";
三、JavaScript 变量
1.JavaScript 数据类型
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
例子
1 var pi=3.14; 2 var name="Bill Gates"; 3 var answer='Yes I am!';
1）我们使用 var 关键词来声明变量，变量声明之后，该变量是空的（它没有值）。
2）一条语句，多个变量---您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
1 var name="Gates", age=56, job="CEO";
声明也可横跨多行：
1 var name="Gates", 2 age=56, 3 job="CEO";
3）Value = undefined 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined
在执行过以下语句后，变量 carname 的值将是 undefined： var carname;但是：如果重新声明 JavaScript 变 量，该变量的值不会丢失：在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
1 var carname="Volvo"; 2 var carname;
2.JavaScript 数据类型--字符串、数字、布尔、数组、对象、Null、Undefined
1）JavaScript 拥有动态类型
这意味着相同的变量可用作不同的类型：
1 var x // x 为 undefined 2 var x = 6; // x 为数字 3 var x = "Bill"; // x 为字符串
2）JavaScript 字符串
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
1 var carname="Bill Gates"; 2 var carname='Bill Gates';
您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
实例
1 var answer="Nice to meet you!"; 2 var answer="He is called 'Bill'"; 3 var answer='He is called "Bill"';
3）JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
1 var x1=34.00; //使用小数点来写 2 var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
1 var y=123e5; // 12300000 2 var z=123e-5; // 0.00123
4）JavaScript 布尔 布尔（逻辑）只能有两个值：true 或 false5）JavaScript 数组
下面的代码创建名为 cars 的数组：
1 var cars=new Array(); 2 cars[0]="Audi"; 3 cars[1]="BMW"; 4 cars[2]="Volvo"; 5 6 // 或者 (condensed array): 7 var cars=new Array("Audi","BMW","Volvo"); 8 9 //或者 (literal array): 10 var cars=["Audi","BMW","Volvo"];
6)JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号 分隔：
1 var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
1 var person={ 2 firstname : "Bill", 3 lastname : "Gates", 4 id : 5566 5 };
对象属性有两种寻址方式：
1 name=person.lastname; 2 name=person["lastname"];
7）Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
1 cars=null; 2 person=null;
8）声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
1 var carname=new String; 2 var x= new Number; 3 var y= new Boolean; 4 var cars= new Array; 5 var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
3.属性和方法
1） 举例：汽车就是现实生活中的对象。
汽车的属性：
1 car.name=Fiat 2 3 car.model=500
汽车的方法：
1 car.start() 2 3 car.drive()
对象创建实例：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 person=new Object(); 7 person.firstname="Bill"; 8 person.lastname="Gates"; 9 person.age=56; 10 person.eyecolor="blue"; 11 document.write(person.firstname + " is " + person.age + " years old."); 12 </script> 13 14 </body> 15 </html>
2）访问对象的属性
访问对象属性的语法是：
1 objectName.propertyName
本例使用 String 对象的 length 属性来查找字符串的长度：
1 var message="Hello World!"; 2 var x=message.length;
在以上代码执行后，x 的值是：
12
3）访问对象的方法
您可以通过下面的语法调用方法：
1 objectName.methodName()
这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写：
1 var message="Hello world!"; 2 var x=message.toUpperCase();
在以上代码执行后，x 的值是：
HELLO WORLD!
4）javaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
1 function functionname() 2 { 3 //这里是要执行的代码 4 }
当调用该函数时，会执行函数内的代码。
5）JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
6）向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行
四、JavaScript 运算符
1.用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
1 txt1="What a very"; 2 txt2="nice day"; 3 txt3=txt1+" "+txt2;
对字符串和数字进行加法运算--如果把数字与字符串相加，结果将成为字符串
例子：
1 <html> 2 3 <body> 4 5 <script type="text/javascript"> 6 x=5+5; 7 document.write(x); 8 document.write("<br />"); 9 x="5"+"5"; 10 document.write(x); 11 document.write("<br />"); 12 x=5+"5"; 13 document.write(x); 14 document.write("<br />"); 15 x="5"+5; 16 document.write(x); 17 document.write("<br />"); 18 </script> 19 20 <h3>规则是：</h3> 21 22 <p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p> 23 24 </body> 25 </html>
2.比较和逻辑运算符用于测试 true 或 false。（无特别之处）
3.if else while for 用法不再赘述。
五、JavaScript 错误 - Throw、Try 和 Catch
1.JavaScript 测试和捕捉
1）
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
语法
1 try 2 { 3 //在这里运行代码 4 } 5 catch(err) 6 { 7 //在这里处理错误 8 }
实例
在下面的例子中，我们故意在 try 块的代码中写了一个错字。
catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 var txt=""; 6 function message() 7 { 8 try 9 { 10 adddlert("Welcome guest!"); 11 } 12 catch(err) 13 { 14 txt="There was an error on this page. "; 15 txt+="Error description: " + err.message + " "; 16 txt+="Click OK to continue. "; 17 alert(txt); 18 } 19 } 20 </script> 21 </head> 22 23 <body> 24 <input type="button" value="View message" onclick="message()"> 25 </body> 26 27 </html>
2）Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
实例
本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：
1 <script> 2 function myFunction() 3 { 4 try 5 { 6 var x=document.getElementById("demo").value; 7 if(x=="") throw "empty"; 8 if(isNaN(x)) throw "not a number"; 9 if(x>10) throw "too high"; 10 if(x<5) throw "too low"; 11 } 12 catch(err) 13 { 14 var y=document.getElementById("mess"); 15 y.innerHTML="Error: " + err + "."; 16 } 17 } 18 </script> 19 20 <h1>My First JavaScript</h1> 21 <p>Please input a number between 5 and 10:</p> 22 <input id="demo" type="text"> 23 <button type="button" onclick="myFunction()">Test Input</button> 24 <p id="mess"></p>
六、JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
- 用户是否已填写表单中的必填项目？
- 用户输入的邮件地址是否合法？
- 用户是否已输入合法的日期？
- 用户是否在数据域 (numeric field) 中输入了文本？
1）必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
1 function validate_required(field,alerttxt) 2 { 3 with (field) 4 { 5 if (value==null||value=="") 6 {alert(alerttxt);return false} 7 else {return true} 8 } 9 }
2）E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
1 function validate_email(field,alerttxt) 2 { 3 with (field)//索引“@” 与 “.”的位置 4 { 5 apos=value.indexOf("@") 6 dotpos=value.lastIndexOf(".") 7 if (apos<1||dotpos-apos<2) 8 {alert(alerttxt);return false} 9 else {return true} 10 } 11 }
七、JavaScript HTML DOM
1.HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
下面有一张图片，放大了自己看！（y老师曾说过：自己要有动手能力和搜索能力）
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
1.查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
1）通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
本例查找 id="intro" 元素：
1 <script> 2 x=document.getElementById("intro"); 3 document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>'); 4 </script>
结果：id="intro" 的段落中的文本是：Hello World!
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
2）通过标签名查找 HTML 元素
实例
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
1 var x=document.getElementById("main"); 2 var y=x.getElementsByTagName("p"); 3 document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
2.JavaScript HTML DOM - 改变 HTML
1）改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
今天的日期是： Thu Aug 15 2013 14:47:02 GMT+0800 (CST)
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
实例
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 document.write(Date()); 7 </script> 8 9 </body> 10 </html>
提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
2）改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
本例改变了 <h1> 元素的内容：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1 id="header">Old Header</h1> 6 7 <script> 8 var element=document.getElementById("header"); 9 element.innerHTML="New Header"; 10 </script> 11 12 </body> 13 </html>
例子解释：
- 上面的 HTML 文档含有 id="header" 的 <h1> 元素
- 我们使用 HTML DOM 来获得 id="header" 的元素
- JavaScript 更改此元素的内容 (innerHTML)
3）改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
本例改变了 <img> 元素的 src 属性：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <img id="image" src="smiley.gif"> 6 7 <script> 8 document.getElementById("image").src="landscape.jpg"; 9 </script> 10 11 </body> 12 </html>
例子解释：
- 上面的 HTML 文档含有 id="image" 的 <img> 元素
- 我们使用 HTML DOM 来获得 id="image" 的元素
- JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"
3.JavaScript HTML DOM - 改变 CSS
1）改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
例子
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
1 <h1 id="id1">My Heading 1</h1> 2 3 <button type="button" onclick="document.getElementById('id1').style.color='red'"> 4 点击这里 5 </button>
2）HTML DOM Style 对象参考手册 http://www.w3school.com.cn/htmldom/dom_obj_style.asp
4.JavaScript HTML DOM - 事件
1)对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
例子 1
在本例中，当用户在 <h1> 元素上点击时，会改变其内容：
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
例子 2
本例从事件处理器调用一个函数：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function changetext(id) 6 { 7 id.innerHTML="谢谢!"; 8 } 9 </script> 10 </head> 11 <body> 12 <h1 onclick="changetext(this)">请点击该文本</h1> 13 </body> 14 </html>
2）HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点击这里</button>
点击按钮就可以执行 displayDate() 函数。
3） 使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：
1 <script> 2 document.getElementById("myBtn").onclick=function(){displayDate()}; 3 </script>
在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
4）onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
实例：
1 <!DOCTYPE html> 2 <html> 3 <body onload="checkCookies()"> 4 5 <script> 6 function checkCookies() 7 { 8 if (navigator.cookieEnabled==true) 9 { 10 alert("已启用 cookie") 11 } 12 else 13 { 14 alert("未启用 cookie") 15 } 16 } 17 </script> 18 19 <p>提示框会告诉你，浏览器是否已启用 cookie。</p> 20 </body> 21 </html>
5）onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function myFunction() 6 { 7 var x=document.getElementById("fname"); 8 x.value=x.value.toUpperCase(); 9 } 10 </script> 11 </head> 12 <body> 13 14 请输入英文字符：<input type="text" id="fname" onchange="myFunction()"> 15 <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p> 16 17 </body> 18 </html> 19 20 6）onmouseover 和 onmouseout 事件 21 22 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 23 24 实例： 25 26 <!DOCTYPE html> 27 <html> 28 <body> 29 30 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background- color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> 31 32 <script> 33 function mOver(obj) 34 { 35 obj.innerHTML="谢谢" 36 } 37 38 function mOut(obj) 39 { 40 obj.innerHTML="把鼠标移到上面" 41 } 42 </script> 43 44 </body> 45 </html>
7）onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
八、JavaScript HTML DOM 元素（节点）
1.创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
实例
1 <div id="div1"> 2 <p id="p1">这是一个段落</p> 3 <p id="p2">这是另一个段落</p> 4 </div> 5 6 <script> 7 var para=document.createElement("p"); 8 var node=document.createTextNode("这是新段落。"); 9 para.appendChild(node); 10 11 var element=document.getElementById("div1"); 12 element.appendChild(para); 13 </script>
例子解释：
这段代码创建新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素：
element.appendChild(para);
2.删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
实例
1 <div id="div1"> 2 <p id="p1">这是一个段落。</p> 3 <p id="p2">这是另一个段落。</p> 4 </div> 5 6 <script> 7 var parent=document.getElementById("div1"); 8 var child=document.getElementById("p1"); 9 parent.removeChild(child); 10 </script>
例子解释：
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
九、JavaScript Window - 浏览器对象模型
1.Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");
1）Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
1 var w=window.innerWidth 2 || document.documentElement.clientWidth 3 || document.body.clientWidth; 4 5 var h=window.innerHeight 6 || document.documentElement.clientHeight 7 || document.body.clientHeight;
2）其他 Window 方法
一些其他方法：
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
2.JavaScript Window Screen
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
1）Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
实例
返回您的屏幕的可用高度：
<script>
document.write("可用高度：" + screen.availHeight);
</script>
以上代码输出为：可用高度：1058
JavaScript到此结束 谢谢你的观看！
生命不息，编码不止。
爱自己 爱生活 爱代码 爱音乐 爱文字 爱交友
作者：微冷的风出处：http://www.cnblogs.com/smbk/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。