javascript再学习

很久以前系统的学过JavaScript，但有许多细节的知识已经忘了，今天再来一个全面的学习梳理、复习。

一、JavaScript基本概念

1、js 技术用在什么地方?

地图搜索
网页游戏
对用户输入校验(email ,数字,身份证,ip...)
股市网站..

核心一句话；js可以对网页的元素进行编程控制，实现动态效果.

javascript 并不需要服务器的运行，他可以直接在浏览器上跑起来。

2、js的基本介绍

① js是一种脚本语句，不能独立运行,它往往和配合别的语言使用, 比如(html/php/jsp/asp/asp.net).

② js 有自己的函数(系统函数,自定义函数), 变量, 有编程的控制语句(顺序,分支,循环), 但是相对说,js的语法规范不是特别严格. 与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。

③ js是解释执行语言
js源码 ->直接被执行(js引擎[内嵌到浏览器])myie开源浏览器

④ js可以对网页元素编程，可以改变网页某个元素的外观，使其动起来
⑤ js是用于bs开发.
⑥ js是客户端技术，它运行在客户端的浏览器

java 和 javascript 没有任何关系

请注意: 因为浏览器的差异，可能有这样问题，在ie中运行正常的js脚本，在ff(firefox)中运行不正常.[应当在不同的浏览器中去测试是否ok 浏览器兼容.] 解决这个问题的简单方法是: 尽量使用js通用的函数.

二、javascript变量标识符规范

1、如何理解js是事件驱动的脚本语言

事件发生(用户做某个操作)---[驱动]---->函数的调用

2、第一个程序

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script language="javascript">//js 中   对象名.方法//window是js语句的内置dom对象,无需创建，可以直接使用 有点类似于php中的超全局数组，不需要定义，window.alert("hellow,wrold1");
</script>
</head><body>
<script language="javascript">//js 中   对象名.方法//window是js语句的dom对象,无需创建，可以直接使用 window.alert("hellow,wrold2");
</script></body>

总结: js码可以放在 html/php 页面的任何地方，js码是从上到下依次执行.

3、Window 对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

js的变量类型是由js引擎决定，如果要查看某个变量的类型，则可以使用 typeof运算符

//js变量的类型是由js引擎来决定的.var name="Corwien";//可以通过 typeof 来查看window.alert("name的类型是"+ typeof  name);name=123;//可以通过 typeof 来查看window.alert("name的类型是"+ typeof name);

js是弱数据类型的语言，在定义变量时，不需要指明该变量的类型（由js引擎来决定）

var name=“Corwien”; //name是字符串
var kk=2  //kk是数
var yy //yy是undefined如果name=234;//这时name自动变成数.不声明变量直接使用x=345; //亦可

js的变量是区分大小写的
如果一个方法是属于window 对象，则可以不带window.而直接使用

三、javascript数据类型三大类型

1、js的基本数据类型

① 整数

<script type="text/javascript">var n1=0x8a;        0x  十六进制var n2=0010123;=83  0开头为八进制var n3=1234;alert(n2);
</script>

② 实数

实数就是小数，这个就不举例说明

特殊的数值

NaN = not a number 如果提示错误说明，你的js代码中把一个变量错误的当做一个数值来使用.
Infinity = 无穷大

var s="abc";//parseInt() 函数是js的全局函数，可以直接使用//在哪里查询alert(parseInt(s));var r=7/0;alert(r);

输出：会报错，无穷大

在js中提供了两个函数来判断是不是一个NaN 和 intinity

isNaN(判断是不是一个数) isIninity

//正则表达式var s="000.000123";if(isNaN(s)){alert("不是数");}else{alert("是数");}

③ 布尔类型

布尔类型表示真和假
在js中表示假有如下:

false, 0, “”, null  , undefined、NaN、空数组假

其它的表示真

代码:

var a=100;    var a=0; (假)if(a){alert("真");//php  echo();}else{alert("假");}ajaxvar obj1=获取对象;if(!obj1){alert(“对象创建失败”);
}

④ 字符型

字符串的基本用法:

var str=”aaaaaaa”;
var str2=’aakflaskf;lsakf;lsa’;

如果我们希望在字符串中有包含特殊字符，比如 ’ ” 换行。。。考虑使用转义符\, 用于转义的还有:

字符串中的特殊字符，需要以反斜杠（）后跟一个普通字符来表示，例如：r、n、t、b、'、 " 、\xxx

2、js的复合数据类型

① 数组

//创建一个数组var arr1=[3,5,10,34.8,50,10];//说明，数组的下标是从[0]//window.alert(typeof arr1);//通过对象名.constructor 可以显示该对象的构造方法是什么?//window.alert(arr1.constructor);//遍历我们的数组var total_weight=0;for(var i=0;i<arr1.length;i++){//document.write("<br/>"+arr1[i]);//遍历total_weight+=arr1[i];}
document.write("总体重是="+total_weight+" 平均体重="+total_weight/arr1.length);

数组的基本使用

① 如何创建数组

方法1
var arr=[元素1,元素2......] 其实也可以这样创建空数组 var arr=[];

元素的个数可以任意，元素的类型可以任意

方法2.

var arr=new Array();

② 如何访问数组的数据

指定访问某个元素

数组名[下标号], 下标号默认是从0 开始编号.

遍历数组

for(var i=0;i<数组.lenght;i++){数组[i];
}

☞ 如果下标越界会怎样?

报 undefine

☞ js的数组是否能够动态的增长

  var a=[2,3];a[2]=56;alert(a[2]);输出： 56

说明js的数组可以动态增长.

③ 数组在内存中怎样存在..

php程序中，通过一个函数传递数组，是值传递，还是引用传递?

结论是默认是值传递(拷贝.)

js代码中，通过一个函数传递数组，是引用传递

function test2(val){//val[0] 访问第一个元素.val[0]=900;}arr=[1,2,3];//调用函数test2(arr);for(var i=0;i<arr.length;i++){document.write("*****"+arr[i]);}

输出是 900*23

画图说明;

通过下面的代码，我们来说明js的数组是怎样存在内存的:

function test2(val){//val[0] 访问第一个元素.  val=null;没有改变数组内的数，故不会改变val[0]=900;}arr=[1,2,3];【1】 //调用函数test2(arr);for(var i=0;i<arr.length;i++){document.write("*****"+arr[i]);}

④ js数组的几个重要应用
(1)使用 数组名.length 可以得到数组大小
(2)拆分字符串 字符串.split(拆分标准) 可以得到一个数组。
(3)其它..

① length 属性可以返回该数组的大小(遍历)
② split 函数，可以拆分字符串.

var str="abc hello boy";
var arr=str.split(" ");
document.write(arr1);

数组小结:
①数组可存放任意类型的数据
②数组大小不必事先指定,可以动态增长
③数组名可以理解为指向数组首地址的引用.
④数组元素默认从0开始编号的.

② 对象

3、js的特殊数据类型

① null 空
② undefined 未定义

4、数据类型的强制转换

js中提供了两个函数可以把字符串强制转成数
parseInt parseFloat
parseInt() 函数可解析一个字符串，并返回一个整数。

案例如下: 让用户输入两个数，并计算和.

var num1=window.prompt("请输入一个数");// 10
var num2=window.prompt("请输第二个数");// 20
//var res=num1+num2;   结果是：1020  js中会把+当做拼接符，而不会是运算符，因此得用parseInt将字符串转换为数
var res=parseFloat(num1)+parseFloat(num2);//php  . 字符串拼接 + 表示运算alert("结果是="+res);var num3=123;var str="hello"+num3;alert(str);

4、其他

运算保留精度

    var num1=7;var num2=3;var res=num1/num2;res=res+"";//window.alert(typeof res);//alert(res);//看出 小数保留精度是17位.如果你要到第二位.//把res当做一个字符串，看找到小数点在第几位.var index=res.indexOf(".");//检索字符串window.alert("保留小数两位是"+res.substring(0,index+3));

我们为了更好的管理js文件，可以把js文件写在一个独立的文件中，然后再需要的使用引入即可

<script src=”js文件路径”></script>

四、javascript面向对象编程

js面向（基于）对象编程---类（原型对象）与对象（实例）
js面向（基于）对象编程---构造方法和this

基于对象编程(object-based)和面向对象编程叫法区分

js 中我们可以认为这个叫法一致.

js的面对对象编程的介绍
js是一种支持面向对象编程的脚本语句, 它有继承，封装，多态的特点.

因为javascript中没有class（类），所以有人也把类也称为原型对象，因为这两个概念从在编程中发挥的作用看都是一个意思，为了统一叫法，我这里统一叫类。

课程中 基于对象==面向对象类==原型对象

 面向对象编程的引入
一个问题?
张老太养了两只猫猫:一只名字叫小白,今年3岁,白色。还有一只叫小花,今年10岁,花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用户输入的小猫名错误，则显示张老太没有这只猫猫。

面向过程：

我们的一个解决方法是：（js面向对象编程的快速入门）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/><script type="text/javascript">//定义了一个猫类，//php中定义一个类为 class cat(){},而js则用构造函数function来定义function Cat(){}//创建一只猫 [js对象的属性可以动态增加]var cat1=new Cat(); //cat1就是一个对象实例cat1.name="小白";  //name属性是公开的cat1.age=3;cat1.color="白色"document.write(cat1.name+"--"+cat1.age+"--"+cat1.color+cat1[‘name’]);//特别说明// var cat1=new Cat(); //当做类（原型对象使用）// Cat(); //当做函数
</script></html>

对象公开属性的访问方式有
对象名.属性名; cat1.name
对象名[’属性名’]; cat1[‘name’]

js中自定义类(原型对象)的五种方法

工厂方法---使用new Object创建对象并添加相关性
通过构造函数来定义类(最多)
通过prototype 来定义（原型方式）
构造函数和 prototype混合
动态创建对象模式

js中一起都是对象

可用通过 instanceof 来判断某个对象实例是不是某个类的对象实例,
案例:
//如何判断一个对象实例是不是某个类的(原型对象)

    if(p1 instanceof Dog){window.alert("p1是Person一个对象实例");}else{window.alert("p1是Dog一个对象实例");}

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<script language="javascript" type="text/javascript">function Person(name,age,salary){this.name=name;//公开this.age=age;//公开var salary=salary;//私有//特权函数this.showInfo=function showInfo(){document.write(this.name+this.age+salary);//这里salary是私有};}var p1=new Person("宋江",23,100000);//window.alert(p1.name+p1.age+p1.salary);//p1.showInfo=showInfo;p1.showInfo();
</script>
</head>
<body>
</body>
</html>

输出：宋江23100000

一个类中可以有公开的函数

this.属性=funciton (){};//属性是公开的也必然造成这个函数时公开的

一个类中也可以有私有的函数

代码:

function Person(){this.name="abc";var salary=900;this.fun1=function (){//公开的属性、函数//代码sayHello();}this.fun2=function(){sayHello();}this.fun3=function(){sayHello();}function sayHello(){   //私有函数，只能在函数内部使用document.write("hello,资源打开"+this.name+" "+salary);}}var p1=new Person();p1.fun2();
//p1.sayHello();  这样调会报错

输出：hello，资源打开abc 900

小结: 通过代码我们可以看出.私有函数可以被该类的其它方法(公开)调用，同时私有函数可以去访问该对象的公开或者私有的属性.

五、js内部类string、array

1、String类

String是动态类,提供了对字符串的各种操作，在这里介绍几个最常用的函数，其它的请大家参考javascript帮助文档。

indexOf() 返回某个字符串值在该字符串中首次出现的位置
split() 把字符串分割为字符串数组
substr() 提取取从start下标开始的指定数目的字符
substring() 提取字符串中介于两个指定下标之间的子串
charAt() 返回指定位置的字符
length 属性,可以得到字符串的长度
toString() js中所有内部对象的成员方法,作用是将对象中的数据转成某个格式的字符串，我们在实际运用中在详细介绍
match()/replace()/search() 用的很多，涉及正则表达式

示例：

<script type="text/javascript">var txt="hello中国";// document.write(txt.indexOf("worldr"));// var arr=txt.split("");//把字符串分割按什么标准// document.write(arr);//substring(start,length) 从start开始取，取出lenght个字符,如果不够取，则尽量的取// var sub=txt.substr(0,3);//下标从0开始取，取出3个字符//stringObject.substring(start,stop) 从start开始取，取到stop-1//var sub=txt.substring(0,2);//charAt(index) 表示取出第几个字符//var sub=txt.charAt(3);//window.alert(sub);//练习 输入文件全路径 获取文件名和后缀?var file_path="c:/abc/abc北京/helo/广州.exe";//思路  找出 一个字符串最后出现的位置var last_index=file_path.lastIndexOf("/");window.alert(file_path.substr(last_index+1));
</script>

2、Array类

concat() 连接两个或更多的数组，并返回结果。
sort() 对数组的元素进行排序
toString() 把数组转换为字符串，并返回结果
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度
splice() 方法用于插入、删除或替换数组的元素
length 属性

示例：

<script language="javascript">//数组的创建var arr=new Array();//静态设置数据arr[0]=23;arr[1]="小红";arr[2]="老王";/*// 动态的添加for(var i=0; i<3; i++){arr[i]=window.prompt("请输入第"+(i+1)+"数");document.write(arr);}*///如何删除数组的某个元素 //删除第2个元素->下标为1arr.splice(1,1); //第一个1 表示删除第几个元素, 第二个1表示删除1个document.write(arr);//修改第二个 "小红"-> "小明"arr.splice(1,1,"小明");//更新//把一个新的数据"北京"，添加到第1元素后面//arr.splice(1,0,"北京");//遍历数组document.write("***********<br/>");for(var key in arr){document.write(arr[key]+"<br/>");}</script>

打印：

23,老王***********
23
小明

这里我们需要注意: splice() 函数，他把删除，修改，添加都可以完成,根据传入的参数的个数和值，不同来决定进行怎样的操作.

3、常用系统函数

js的函数间传递数据时候，按照什么来传递
基本数据类型： number boolean string 是按照值传递
数组和对象： 引用传递.

eval() //可以把一个字符串当做脚本来运行,用处很大
parseInt() //把字符串转成整数
parseFloat() //把字符串转成小数
isNaN() //判断某个值是不是数(该函数不是特别完美)
typeof() // 变量类型
encodeURI() // 编码某个编码的 URI
decodeURI() // 解码

六、js事件事件驱动机制

概述 : js是采用事件驱动(event-driven)的机制来响应用户操作的，也就是说当用户对某个html元素进行某个操作时，会产生一个事件,该事件会驱动某些函数来处理,
由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event-Driver）。
对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）

快速入门案例:

<script type="text/javascript">//事件处理函数function test1(event){window.alert("ok");window.alert(event.clientX);//横坐标的信息}</script><input type="button" value="tesing" onclick="test1(event)"/>//事件源，时间发生的地方，附带产生事件对象event，它的作用是封装改事件的一些信息

事件源: 就是产生事件的地方(html元素)
事件: 点击/鼠标移动/键按下..
事件对象: 当某个事件发生时，可能会产生一个事件对象，这个事件对象会封装该事件的信息(比如点击的x,y. keycode),传递给事件处理程序
事件处理程序: 响应用户的事件.

快速入门：
获取鼠标点击出的坐标

<html>
<head>
<script type="text/javascript">
function show_coords(event) {
x=event.clientX;
y=event.clientY;
alert(event+"X coords: " + x + ", Y coords: " + y)
}
</script>
</head>
<!--body元素响应onmousedown事件 -->
<body onmousedown="show_coords(event)">
<p>Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.</p>
</body>
</html>

事件的分类

1、如何绑定事件监听

直接在某个html控件上指定
getElementById(‘’) 获取控件后，再绑定.
通过 addEventListener() 或者是 attachEvent() 来绑定
一个事件可以有多个事件监听者(函数)

给某个html元素(控件), 绑定事件的三种方法
1、静态绑定

<input type="button" onclick="函数" vlaue="xx值"/>

2、动态绑定

// 获取某个对象再绑定
getElementById("htmlid").事件=方法

实例：

<script type="text/javascript">function test1(){window.alert("test1");//这句话的意思就是把but2 的onclick 和 test2函数绑定//document.getElementById('but2').onclick=test2;//  第一种方式//but2.onclick=test2;//第二种方式$('but2').onclick=test2;//第三种方式}function $(id){return document.getElementById(id);}function test2(){window.alert("test2");}
</script><input type="button" id="but1" onclick="test1()" value="测试">
<input type="button" id="but2" value="测试2"><script language="javascript" type="text/javascript">//动态的创建一个新按钮function creNewButton(){var mybut=document.createElement("input");mybut.type="button";mybut.onclick=abc;//按钮产生后就会和这个事件动态绑定}function abc(){window.alert("ok");}
</script

点击按钮1后，会给but2绑定一个时间，如果再点击but2就会有信息弹出

3、通过 attachEvent 和 detachEvent 方法来（动态）绑定事件和（动态）解除事件绑定

<input type="button" id="but1"  value="投布什一票">
<script type="text/javascript">//动态绑定var but1 = document.getElementById("but1");// 第一个参数是事件名，也可以是其他事件,只有微软的IE浏览器支持该写法// but1.attachEvent("onclick",vote);// 第二种方式(火狐和其他浏览器)but1.addEventListener("click", vote, false);function vote(){window.alert("你投了布什一票，以后不能再投");//解除绑定but1.detachEvent("onclick",vote);}</script>

七、js dom编程

我们在前面把js的基础知识都了解完了，可是如果你认为js只能做类似点击一个按钮，显示当前时间，那你就太小看js,实际上js更重要的作用是可以让用户对网页元素进行交互操作，这才是学习js的精华之所在。

1、dom的介绍

DOM = Document Object Model(文档对象模型)，根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件dom的来源:

DOM的简单映射图：

js把浏览器,网页文档和网页文档中的 html 元素都用相应的内置对象来表示，这些对象与对象间的层次关系构成dom模型,针对网页(html,jsp,php,aspx.net)的dom就是html dom。我们这讲的就是html dom。

这里有几个特别重要的概念要说清楚:
①上面说的内置对象就是dom 对象,准确的说是html dom对象。
②因为我目前讲的是 html dom 编程，所以我提到的dom 编程,dom 对象都是说的 html dom 编程和 html dom对象，请大家不要犯迷糊。
③dom 编程时，会把html文档看做是一颗dom 树(首先要画出html dom图)
④dom 编程的核心就是各个dom 对象.

Dom 为一种模型，他的思想是 可以把里边的任何东西看为对象。

2、dom树

在进行 html dom 编程时，我们把html文件看成是一个dom树，该dom树在内存中有层级关系，通过操作dom树，就可以改变html页面的显示效果。

从上图可以看出：从html dom的角度看，每个html文件的元素都会被当做一个Node节点对象来看待，就可以使用它的方法，同时对于html dom说，因为元素本身就可能是img/button/form同时有看成 Button ImageForm,内置对象。

示例说明：
html文件

<img id=’myimg’ src=”a.jpg”/>
<script>
var myimg=document.getElementById(‘myimg’);
// myimg被看成是Node对象同时也可以看成img对象
</script>

myimg被看成是Node对象同时也可以看成img对象。

xml文件

<class>
<stu id=”mystu”>
恺易
</stu>
</class>

var mystu=document.getElementById(“mystu”);
这时mystu就是Node对象

3、dom层次关系dom对象

bom
bom 的全称是浏览器对象模型 (bowser object model), 它规定所有的浏览器在设计时，要考虑支持 bom提出的规范,这样才能正常浏览网页。

dom 和 bom 的关系
bom 是一个纲领性，dom 就是具体的.( dom 对象、属性、方法.)

bom包括浏览器所有对象
dom 主要是 bom（document 对象的扩展）

dom的层级关系

这里,我只列举了常用的dom对象。从左图我们可以看出:
dom对象本身也有层次，比如document对象是window对象的一个成员属性，而body对象又是document对象的一个成员属性。

重要核心思想：
在进行dom编程时，每个html的元素被看成一个Node节点(对象)。

Dom的节点和属性

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<title>文档标题 </title>
<script language="javascript" type="text/javascript">function test(obj){var div1=document.getElementById("div1");window.alert(div1.nodeName); //获取此元素的对象,node为一个对象,输出元素 div}
</script>
</head>
<body>
<a href="blank">my link</a>
<h1>my title</h1>
<div id="div1">乌龟</div><input type="button" value="test" onclick="test(this)"/>
</body>
</html>

4、window对象

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来用。

4.1 window对象常用的函数和属性

alert() 显示消息和一个确认按钮的警告框
confirm() 显示消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达

② setInterval("函数名()",调用该函数的间隔时间) 定时器和 clearInterval定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

简单时钟

<html>
<head>
<title>文档标题</title></head>
<body>
当前时间是, <!--读10秒自动停止,并弹出一句话"hello.wrold"-->
<span id="myspan">???</span>
</body>
<script type="text/javascript">var i=0;var myspan=document.getElementById("myspan");function abc(){//window.alert(++i);var mytime=new Date()    ;        //对象.innterText表示在该对象对应标签的中间放入文本myspan.innerText=mytime.toLocaleString();if(++i==10){window.clearInterval(mytime2);window.alert("hello,world,不走了");}}//做了一个定时器
var mytime2=window.setInterval("abc()",1000);    //每隔1秒调用一次abc函数</script>
</html>

5、document对象

Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
Document对象是Window对象的一个成员属性,通过window.document来访问,当然也可以直接使用 document

write() 向文档写文本或HTML表达式或JavaScript 代码
writeln() 等同于write()方法,不同的是在每个表达式之后写一个换行符
open() 打开一个新文档,并删除当前文档内容
close() 关闭open()文档流
getElementById() 通过html控件的id 得到该控件.如果有相同的id则只取第一个,返回对拥有指定id的第一个对象的引用
getElementsByName() 通过html控件的名字返回带有指定名称的对象集合
getElementsByTagName() 通过html的标签名返回带有指定标签名的对象集合
createElement() 创建一个指定标签名的元素[比如:动态创建超链接]
（注：此处对象集合与数组是有区别的）

案例：

<script type="text/javascript">//通过id获取对象function test(){var a1=document.getElementById("a1");//把a1这个标签拿到，既获取了其所有内容//如果要取出某个属性//a1.innerText可以取到 连接到sinawindow.alert(a1.id+" "+a1.href+" "+a1.innerText);
//可以改变其内容a1.innerText="连接到百度";a1.href="http://www.baidu.com";}//通过name来获取.对象function test2(){//使用var hobbies=document.getElementsByName("hobby");
// window.hobbies(hobbies.length);//将四个hobby全部拿到，不能区分是否选了//遍历这个集合for(var i=0;i<hobbies.length;i++){//判断选中的为false 、true//window.alert(i+ " "+hobbies[i].checked);if(hobbies[i].checked){window.alert("你的爱好是"+hobbies[i].value);}}}//通过标签名function test3(){var inputs=document.getElementsByTagName("input");window.alert(inputs.length);}</script>
<body>
<a id="a1" href="http://www.sina.com">连接到sina</a><br/>
<a id="a1" href="http://www.sohu.com">连接到sohu</a><br/>
<a id="a3" href="http://www.baidu.com">连接到baidu</a><br/>
<input type="button" value="测试" onclick="test()"/><br/>
请选择你的爱好:
<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="音乐">音乐
<input type="checkbox" name="hobby" value="体育">体育
<input type="checkbox" name="hobby" value="电影">电影
<input type="button" value="看看你的爱好" onclick="test2()"/><br/>
<input type="button" value="通过tagname来获取元素" onclick="test3()"/><br/>
</body>

我们综合运用一下前面学习到的各种知识

动态的创建元素(节点)/添加元素(节点)/删除元素(节点)

<html>
<head>
<title>Dom 节点操作</title>
</head>
<script type="text/javascript">
function test1(){// 1.创建 a 元素，createElement(标签名);var myhref = document.createElement("a"); // <a></a>myhref.innerText = "连接到百度";myhref.href = "http://www.baidu.com";myhref.id = "myhref";// 将创建的元素挂载到document.body下// document.body.appendChild(myhref);// 挂载到 div1 节点下div1.appendChild(myhref)}// 删除节点function test2(){//document.getElementById('div1').removeChild(document.getElementById('myhref'));//上面的方法太笨，可以用下面的方法，直接对其操作var node=document.getElementById('myhref');// 删除单个节点node.parentNode.removeChild(node);   }// 删除全部a节点function test3(){//document.getElementById('div1').removeChild(document.getElementById('myhref'));//上面的方法太笨，可以用下面的方法，直接对其操作var node=document.getElementById('myhref');// var p = node.parentNode;// 删除单个节点// node.parentNode.removeChild(node);   // console.log(p);// 删除所有子节点var p = node.parentNode;var childs = p.childNodes; console.log(childs);for(var i = childs.length - 1; i >= 0; i--){ // alert(childs[i].nodeName); p.removeChild(childs[i]); }}// 删除所有option元素function delOption(){var selParent=document.getElementById('hobby');var childs = selParent.childNodes;console.log(childs);for(var i = childs.length - 1; i >= 0; i--){ // alert(childs[i].nodeName); if(i >= 3){selParent.removeChild(childs[i]); }}console.log(selParent);   // 打印：<select name="hobby" id="hobby"></select>}// 将上面的删除option 封装为一个函数
function delOptionFunc(eleId)
{var selParent=document.getElementById(eleId);var childs = selParent.childNodes;for(var i = childs.length - 1; i >= 0; i--){// 这里暂写死if(i >= 3){selParent.removeChild(childs[i]);}}
}</script><body>
<input type="button" value="创建一个a标签" onclick="test1()"/><br/>
<input type="button" value="删除单个a标签" onclick="test2()"/><br/>
<input type="button" value="删除全部a标签" onclick="test3()"/><br/>
<input type="button" value="删除select 子元素" onclick="delOption()"/><br/>
<!--引入 css id  class  [dom如何去操作一个外表css]-->
<div id="div1" style="width:200px;height:200px;background-color:green">div1</div><select name="hobby" id="hobby"><option value=''>请选择</option><option value='bas'>篮球</option><option value="football">足球</option><option value="pai">排球</option>
</select>
</body></html>

为什么添加的东西在原码中看不到呢？因为在 内存中，浏览器真正显示的东西不完全是在原码，它第一次是看原码，后边就会看节点树，首先它先把原码加载到内存中，它会以树为标准。

6、body对象

body 对象代表文档的主体 (HTML body)。
body对象是document对象的一个成员属性,通过document.body来访问.

使用body对象，要求文档的主体创建后才能使用,也就是说不能再文档的body体还没有创建就去访问body,这个后面会举例说明.

body对象常用的函数和属性，其它的参考帮助文档：

appendChild() 添加元素
removeChild() 删除元素
getElementsByTagName() 通过html元素名称,得到对象数组.
bgColor 文档背景色
backgorund 文档背景图
innerText 某个元素间的文本
innerHtml 某个元素间的html代码
onload事件文档加载时触发
onunload事件文档关闭时触发
onbeforeunload事件文档关闭前触发
onselectstart事件用户选中文档body体的内容时触发
onscroll事件用户拉动滚动条时触发

7、style对象

style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的重点是style对象,styleSheets不是重点。

style对象定义:即表示当前元素的样式设置

style对象不是针对某一个html元素,而是对所有的html元素而言的,也就是说,我们可以通过 document.getElementById(“id”).style.property=“值” ,来控制网页文档的任何一个元素(对象)的样式,当然这个很重要的.

对象方法：

backgroundRepeat 设置是否及如何重复背景图像
border 在一行设置四个边框的所有属性
display 设置元素显示方式
width 设置元素的宽度
height 设置元素的高度
visibility 属性设置元素是否可见

实战：
仿搜狐广告栏：

<!--特别说明 doctype html 4.0 或者不写均可，但是用 xhtml 1.0不行因为 document.body.clientHeight为0-->
<html >
<meta http-equiv="content-type" content="text/html;charset=utf-8"/><head><link href="my.css" type="text/css" rel="stylesheet"/><title>无标题页6</title><style>
body
{font-size:12px;margin:0;/*把body的边距清零*/
}.div1{width:132px;/*width:128px;*/height:160px;/*background-color:pink;*/
}
.navi{height:160px;width:22px;/*background-color:green;*/float:left;
}
.navi ul{padding:0px;margin-left:0px;
}
.navi ul li{height:50px;width:22px;background-color:#E8E8E8;float:left;list-style-type :none;margin-top:3px;text-align:center;padding-top:5px;
}
.content3,.content1,.content2{height:160px;width:104px;margin-left:2px;/*background-color:blue;*/float:left;
}
.content2 ul,.content3 ul,.content1 ul{padding:0px;margin-left:4px;margin-top:2px;/*background-color:green;*/
}
.content2 ul li,.content3 ul li,.content1 ul li{float:left;list-style-type :none;font-size:12px;line-height:20px;}
.content2{display:none;}
.content3{
display:none;}</style><script language="javascript" type="text/javascript"><!--function change(obj,obj2){//因为style在外边css,所以这样获取不到，但是设置后，就可以在本页获取了//window.alert(content1.style.display);//window.alert(obj.innerText.length+"="+"出国".length);//obj2代表你当前选择的这个li,设置背景为黄色obj2.style.backgroundColor="#FFC63D";if(obj=="zs"){//window.alert('招生');可选状态，另外两个位不可选content1.style.display="block";content2.style.display="none";content3.style.display="none";}else if(obj=="rz"){//window.alert('热招');content1.style.display="none";content2.style.display="block";content3.style.display="none";}else if(obj=="cg"){//window.alert('出国');content1.style.display="none";content2.style.display="none";content3.style.display="block";}}function change2(obj){obj.style.backgroundColor="#E8E8E8";}//--></script>
</head>
<body><div class="div1"><div class="navi"><ul><li onmouseover="change('zs',this)" onmouseout="change2(this)">招生</li><li onmouseover="change('rz',this)" onmouseout="change2(this)">热招</li><li onmouseover="change('cg',this)" onmouseout="change2(this)">出国</li></ul></div><div id="content2" class="content2"><ul><li><a href='#'>热招热招热招月!</a></li><li><a href='#'>热招热招热招月!</a></li><li><a href='#'>热招热招热招月!</a></li><li><a href='#'>热招热招热招月!</a></li><li><a href='#'>热招热招热招月!</a></li><li><a href='#'>热招热招热招月!</a></li><li><a href='#'>热招热招热招月!</a></li><li><a href='#'>热招热招热招月!</a></li></ul></div><div id="content3" class="content3"><ul><li><a href='#'>出国出国出国月!</a></li><li><a href='#'>出国出国出国月!</a></li><li><a href='#'>出国出国出国月!</a></li><li><a href='#'>出国出国出国月!</a></li><li><a href='#'>出国出国出国月!</a></li><li><a href='#'>出国出国出国月!</a></li><li><a href='#'>出国出国出国月!</a></li><li><a href='#'>出国出国出国月!</a></li></ul></div><div id="content1" class="content1"><ul><li><a href='#'>澳洲留学高中月!</a></li><li><a href='#'>澳洲留学高中月!</a></li><li><a href='#'>澳洲留学高中月!</a></li><li><a href='#'>澳洲留学高中月!</a></li><li><a href='#'>澳洲留学高中月!</a></li><li><a href='#'>澳洲留学高中月!</a></li><li><a href='#'>澳洲留学高中月!</a></li><li><a href='#'>澳洲留学高中月!</a></li></ul></div></div>
</body>
</html>

display 和 visiability 区别
这两个属性都可以用于设置某个区域或者控件，显示不显示, display 设置 none; 它不显示同时让出自己占用的空间 ；
visiability 这个属性设置成 hidden 就不显示, 但是它不让这个空间.

style对象的案例:

<body>
<span id="myspan"  onclick="test(this);" style="border: 3px solid red;cursor:hand;
">+</span> 我的家庭
<ul id="myul" style="display:none">
<li>爸爸</li>
<li>妈妈</li>
<li>哥哥</li>
</ul></body>
<script type="text/javascript">
<!--function test(obj){//myspanif(obj.innerText=="+"){//显示成员myul.style.display="block";obj.innerText="-";}else if(obj.innerText=="-"){myul.style.display="none";obj.innerText="+";}}//--></script>

8、form对象

forms常用的函数和属性
1.lenght 设置或得到集合大小。
2.item() 取第几个表单

<body><form action="a.php" method="post">
u:<input type="text" name="username" value="hello"/><br/>
p:<input type="password" name="password" value="xxx"/><br/>
<input type="submit" value="提交"/></form><form action="b.php" method="post">
u:<input type="text" name="username"/>
</form><input type="button" onclick="mysubmit()" value="提交"/>
</body>
<script type="text/javascript"><!--//window.alert(document.forms.length);//可以得到表单的数量//window.alert(document.forms.item(1).action);//可以得到第一个表单的action下的值：a.php//取出第一个fromfunction mysubmit(){var form1=document.forms.item(1);//window.alert(form1.username.value);//此方法可以获得表单里的任何属性和值//window.alert(form1.password.value);form1.submit();}//--></script>

9、table对象

概述，table 对象代表一个 html 表格。在HTML文档中<table>标签每出现一次，一个table对象就会被创建

table常用的属性:

id 设置或得到该表格的id
name 设置或得到该表格name
border 设置或得到该表格的边框
width 设置或得到该表格的宽度
height 设置或得到该表格的高度
cellpadding 设置或返回单元格内容和单元格边框之间的空白量
cellspacing 设置或返回在表格中的单元格之间的空白量
style 设置或得到该表格的style对象

我们看看table常用的属性(对象集合):

rows[] 表格中所有行的一个数组(针对表格)
cells[] 表格中所有单元格的一个数组(针对一行)

table常用的方法 :
1．deleteRow() 删除一行
2．insertRow() 插入一行

tableRow和tableCell
TableRow 对象
TableRow 对象代表一个 HTML 表格行。
在 HTML 文档中 <tr> 标签每出现一次，一个 TableRow 对象就会被创建。

TableCell 对象
TableCell 对象代表一个 HTML 表格单元格。
在HTML 文档中 <td> 标签每出现一次，一个TableCell 对象就会被创建。
[其方法和属性参看文档]

table对象中的集合对象有两个
rows[] 还有一个 cells[]

rows[] 表示所有行的一个集合
cells[] 表示一行的所有列

实例：

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<title>梁山好汉108将</title>
<script language="javascript" type="text/javascript">function test(){//通过id获取宋江,在此如果不能用id，而要用table属性来获取//window.alert(document.getElementById("name").innerText);var mytable=document.getElementById("mytab");//mytable就是一个table对象// window.alert(mytable.rows[1].innerHTML);//上面的innerHTML代码取出全部一行HTML的东西：<td>1</td><td id="name">宋江</td><td>及时雨</td>//window.alert(mytable.rows[1].innerText);//而innerText取出的为一行文本里的东西：1宋江及时雨window.alert(mytable.rows[2].cells[2].innerHTML);//取出宋江  innerHTML=innerText两者都可以// innerHTML=innerText  一个是按html文件取，一个是按文本取}//添加一个英雄function addHero(){//创建一个//document.createElement("<tr>");//第一种方法  可以，但是太慢//第二种方法  添加一行var mytable=document.getElementById("mytab");//3表示添加到表格的第几行//tableRow表示一个新行，它的类型是TableRowvar tableRow=mytable.insertRow(3);//拿到空的行<tr></tr>，但是没有<td></td>//通过tableRow添加新列,tableCell类型是TableCell var tableCell=tableRow.insertCell(0);//相当于<tr><td></td></tr>tableCell.innerHTML="3";//<tr><td>3</td></tr>var tableCell=tableRow.insertCell(1);tableCell.innerHTML="吴用";//<tr><td>3</td><td>吴用</td></tr>var tableCell=tableRow.insertCell(2);tableCell.innerHTML="智多星";//<tr><td>3</td><td>吴用</td><td>智多星</td></tr>}//删除function deleteHero(){//删除一个英雄var mytable=document.getElementById("mytab");mytable.deleteRow(3);}//修改function updateHero(){//找到宋江的外号这个对象<td></td> TableCellvar mytable=document.getElementById("mytab");mytable.rows[1].cells[2].innerText="黑三郎";}</script>
</head>
<body>
<table id="mytab" border="1">
<tr><th>排名</th><th>姓名</th><th>外号</th></tr>
<tr><td>1</td><td id="name">宋江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<input type="button" value="testing" onclick="test()"/>
<input type="button" value="添加" onclick="addHero()"/>
<input type="button" value="删除" onclick="deleteHero()"/>
<input type="button" value="修改" onclick="updateHero()"/>
</body>
</html>