JavaWeb——JavaScript基础（三）

一、javascript的简介

二、js和html的结合方式（两种）

三、js的原始类型和声明变量

四、js的语句

五、js的运算符

六、实现99乘法表（输出到页面上）

七、js的数组

八、js的函数

九、js的全局变量和局部变量

十、script标签放在的位置

十一、js的String对象

十二、js的Array对象

十三、js的Date对象

十四、js的Math对象

十五、js的全局函数

十六、js的函数的重载

十七、js的bom对象

十八、js的dom对象（****）

十九、document对象

二十、案例：window弹窗案例

二十一、案例一：在末尾添加节点

二十二、元素对象（element对象）

二十三、Node对象属性一

二十四、Node对象的属性二

二十五、操作dom树

二十六、innerHTML属性（重点）

二十七、案例二：动态显示时间

二十八、案例三：全选练习

二十九、案例四：下拉列表左右选择

三十、案例五：省市联动

三十一、案例六：动态生成表格

一、javascript的简介

1、javascript是基于对象和事件驱动的语言，应用与客户端。
基于对象：提供好了很多对象，可以直接拿过来使用
事件驱动：html做网站静态效果，javascript动态效果
客户端：专门指的是浏览器
2、 js的特点
（1）交互性：信息的动态交互
（2）安全性： js不能访问本地磁盘的文件
（3）跨平台性：
java里面跨平台性，虚拟机
只有能够支持js的浏览器，都可以运行
3、javascript和java的区别（雷锋和雷峰塔）
（1）java是sun公司，现在oracle；js是网景公司
（2）JavaScript 是基于对象的，java是面向对象
（3）java是强类型的语言，js是弱类型的语言
- 比如java里面 int i = "10";
- js: var i = 10; var m = "10";
（4）JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。
4、javascript的组成：三部分组成
（1）ECMAScript
- ECMA : 欧洲计算机协会
- 有ECMA组织制定的js的语法，语句.....
（2）BOM
- broswer object model: 浏览器对象模型
（3）DOM
- document object model：文档对象模型

二、js和html的结合方式（两种）

第一种：使用一个标签

<script type="text/javascript">js代码;
</script>

第二种：使用script标签，引入一个外部的js文件
*** 创建一个js文件，写js代码

<script type="text/javascript" src="1.js"></script>

注：使用第二种方式时候，就不要在script标签里面写js代码了，不会执行。

三、js的原始类型和声明变量

1、 java的基本数据类型 byte short int long float double char boolean
2、 js定义变量都使用关键字 var
3、 js的原始类型（五个）
- string: 字符串
*** var str = "abc";
- number：数字类型
*** var m = 123;
- boolean：true和false
*** var flag = true;
- null
*** var date = new Date();
*** 获取对象的引用，null表示对象引用为空，所有对象的引用也是object
- undefined
*** 定义一个变量，没有赋值
*** var aa;
4、typeof()：查看当前变量的数据类型

四、js的语句

1、 java里面的语句：
** if判断
** switch语句
** 循环 for while do-while

2、js里面的这些语句
① if判断语句
**** =:表示赋值
**** ==：表示判断
② switch语句
- java里面支持数据类型 string支持吗？在jdk1.7开始支持
- js里面都支持

switch(a) {case 5:break;case 6:break;default:......
}

③ 循环语句 for while do-while
- while循环

var i = 5;
while(i>1) {alert(i);i--;
}

- for循环

for(var mm=0;mm<=3;mm++) {alert(mm);
}

五、js的运算符

1、 += ： x+=y; ===> x=x+y;
2、 js里面不区分整数和小数
var j = 123;
alert(j/1000*1000);
// j/1000*1000 在java里面得到结果是 0
// 在js里面不区分整数和小数，123/1000=0.123 * 1000 = 123
3、字符串的相加和相减的操作
var str = "123";
** 如果相加时候，做是字符串连接
** 如果相减，做的是相减的运算
* //字符串的操作
var str = "456";
//alert(str+1); //在java里面操作的结果是 4561 ，在js里面还是 4561
alert(str-1); //相减时候，执行减法的运算
* 提示NaN:表示不是一个数字
4、 boolean类型也可以操作
*** 如果设置成true，相当于这个值是1
*** 如果设置成false，相当于这个值是0
5、 == 和 === 区别
** 做判断
** == 比较的只是值
** === 比较的是值和类型
6、引入知识
直接向页面输出的语句（可以把内容显示在页面上）
* document.write("aaa");
document.wirte("<hr/>");
** 可以向页面输出变量，固定值和html代码

六、实现99乘法表（输出到页面上）

<html><head><title>99乘法表</title><style type="text/css"></style></head><body><script type="text/javascript">document.write("<table border='1' bordercolor='red'>");for(var i = 1;i<=9;i++){//循环行document.write("<tr>");for(var j = 1;j<=i;j++){//循环列document.write("<td>");document.write(j+"*"+i+"="+j*i);document.write("</td>");}document.write("</tr>");}document.write("</table>");</script></body></html>

注： document.write里面是双引号，如果设置标签的属性需要使用单引号
document.write可以输出变量，还可以输出html代码

七、js的数组

1、什么是数组？
- 使用变量，var m = 10;
- java里面的数组定义 int[] arr = {1,2,3};
2、定义方式（三种）
第一种： var arr = [1,2,3]; var arr = [1,"4",true];
第二种：使用内置对象 Array
var arr1 = new Array(5); //定义一个数组，数组的长度是5
arr1[0] = "1";
第三种：使用内置对象 Array
var arr2 = new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5
3、数组里面有一个属性 length：获取到数组的长度
4、数组可以存放不同的数据类型的数据

八、js的函数

1、在java里面定义方法
public 返回类型void /int 方法名(参数列表) {
方法体;
返回值;
}
public int add(int a,int b) {
int sum = a+b;
return sum;
}
2、在js里面定义函数（方法）有三种方式
**** 函数的参数列表里面，不需要写var，直接写参数名称
第一种方式：
**** 使用到一个关键字 function
**** function 方法名(参数列表) {
方法体;
返回值可有可无（根据实际需要）;
}

代码：

//使用第一种方式创建函数
function test() {alert("qqqqq");
}
//调用方法
test();//定义一个有参数的方法  实现两个数的相加
function add1(a,b) {var sum = a+b;alert(sum);
}
//调用方法
add1(2,3);//有返回值的效果
function add2(a,b,c) {var sum1 = a+b+c;return sum1;
}
//调用方法
alert(add2(3,4,5));

第二种方式：
**** 匿名函数（掌握）
var add = function(参数列表) {
方法体和返回值;
}
**** 代码

//第二种方式创建函数
var add3 = function(m,n) {alert(m+n);
}
//调用方法
add3(5,6);

第三种方式：（用的少，了解）
*** 动态函数
*** 使用到js里面的一个内置对象 Function
var add = new Function("参数列表","方法体和返回值");

代码：

//第三种方式创建函数
var add4 = new Function("a,b","var sum;sum=a+b;return sum;");
//调用方法
alert(add4(5,6));

九、js的全局变量和局部变量

1、全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
- 在方法外部使用，在方法内部使用，在另外一个script标签使用

<html><head><title>HTML示例</title></head><body><script type="text/javascript">var a = 10;function test(){alert("在方法内部调用a："+a);}test();alert("在方法外部调用a："+a);</script><script type="text/javascript">alert("在另外的script调用a："+a);</script></body>
</html>

2、局部变量：在方法内部定义一个变量，只能在方法内部使用
- 如果在方法的外部调用这个变量，提示出错

十、script标签放在的位置

1、建议把script标签放到 </body>后面
2、如果现在有这样一个需求：
在js里面需要获取到input里面的值，如果把script标签放到head里面
会出现问题。
html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值，
因为页面还没有解析到input那一行，肯定取不到。

十一、js的String对象

1、创建String对象
*** var str = "abc";
2、方法和属性（文档）
*** 属性 length：字符串的长度

*** 方法
       （1）与html相关的方法
           - bold()：加粗
           - fontcolor(): 设置字符串的颜色
           - fontsize(): 设置字体的大小

- link(): 将字符串显示成超链接
**** str4.link("hello.html")
- sub() sup(): 下标和上标

（2）与java相似的方法
- concat(): 连接字符串

//concat方法
var str1 = "abc";
var str2 = "dfg";
document.write(str1.concat(str2));

- charAt():返回指定指定位置的字符串

var str3 = "abcdefg";
document.write(str3.charAt(20)); //字符位置不存在，返回空字符串

- indexOf()：返回字符串位置

var str4 = "poiuyt";
document.write(str4.indexOf("w")); //字符不存在，返回-1

- split()：切分字符串成数组

var str5 = "a-b-c-d";
var arr1 = str5.split("-");
document.write("length: "+arr1.length);

- replace() ：替换字符串
               * 传递两个参数：
                   -- 第一个参数是原始字符
                   -- 要替换成的字符

var str6 = "abcd";
document.write(str6);
document.write("<br/>");
document.write(str6.replace("a","Q"));

- substr()和substring()

var str7 = "abcdefghuiop";//document.write(str7.substr(5,5));  //fghui  从第五位开始，向后截取五个字符
*** 从第几位开始，向后截取几位document.write("<br/>");document.write(str7.substring(3,5)); //de  从第几位开始到第几位结束  [3,5)
*** 从第几位开始，到第几位结束，但是不包含最后哪一位

十二、js的Array对象

1、创建数组（三种）
       - var arr1 = [1,2,3];
       - var arr2 = new Array(3); //长度是3
       - var arr3 = new Array(1,2,3); //数组中的元素是1 2 3

- var arr = []; //创建一个空数组

2、属性：length：查看数组的长度

3、方法
- concat()：数组的连接

var arr11 = [1,2,3];
var arr12 = [4,5,6];
document.write(arr11.concat(arr12));//1,2,3,4,5,6

- join()：根据指定的字符分割数组

var arr13 = new Array(3);
arr13[0] = "a";
arr13[1] = "b";
arr13[2] = "c";document.write(arr13);//a,b,c     默认用逗号分开
document.write("<br/>");
document.write(arr13.join("-"));//a-b-c

- push():向数组末尾添加元素，返回数组的新的长度
** 如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去

//push方法
var arr14 = new Array(3);
arr14[0] = "tom";
arr14[1] = "lucy";
arr14[2] = "jack";
document.write("old array: "+arr14);//tom,lucy,jackdocument.write("<br/>");
document.write("old length:"+arr14.length);//3document.write("<br/>");
document.write("new length: "+arr14.push("zhangsan"));//4document.write("<br/>");
document.write("new array: "+arr14);//tom,lucy,jack,zhangsan

var arr15 = ["aaa","bbb","ccc"];
var arr16 = ["www","qqq"];document.write("old array:"+arr15);//aaa,bbb,ccc
document.write("<br/>");
document.write("old length:"+arr15.length);//3document.write("<br/>");
document.write("new length:"+arr15.push(arr16));//4
document.write("<br/>");
document.write("new array: "+arr15);//aaa,bbb,ccc,www,qqq
for(var i=0;i<arr15.length;i++) {alert(arr15[i]);    //aaa bbb ccc www,qqq
}

- pop()：表示删除最后一个元素，返回删除的那个元素

var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
document.write("old array: "+arr17);//zhangsan,lisi,wangwu,zhaoliu
document.write("<br/>");document.write("return: "+arr17.pop());//zhaoliu
document.write("<br/>");
document.write("new array: "+arr17);//zhangsan,lisi,wangwu

- reverse():颠倒数组中的元素的顺序

//reverse方法
document.write("<hr/>");
var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
document.write("old array: "+arr18);//zhangsan1,lisi1,zhaoliu1,niuqi1
document.write("<br/>");
document.write("new array:"+arr18.reverse());//niuqi1,zhaoliu1,lisi1,zhangsan1

十三、js的Date对象

1、在java里面获取当前时间

Date date = new Date();
//格式化
//toLocaleString()   //2015年4月17日 11:17:12

2、 js里面获取当前时间

var date = new Date();
//获取当前时间
var date = new Date();
document.write(date);  // Fri Apr 17 10:47:46 UTC+0800 2015 //转换成习惯的格式
document.write("<hr/>");
document.write(date.toLocaleString());

3、获取当前的年方法

getFullYear()：得到当前的年
document.write("year: "+date.getFullYear());

4、获取当前的月方法

getMonth()：获取当前的月
//返回的是 0-11月，如果想要得到准确的值，加1
var date1 = date.getMonth()+1;
document.write("month: "+date1);

5、获取当前的星期

getDay()：星期,返回的是 (0 ~ 6)
** 外国朋友，把星期日作为一周的第一天，星期日返回的是 0而星期一到星期六 返回的是 1-6
document.write("week: "+date.getDay());

6、获取当前的日

getDate()：得到当前的天 1-31
document.write("day: "+date.getDate());

7、获取当前的小时

getHours()：获取小时
document.write("hour: "+date.getHours());

8、获取当前的分钟

getMinutes()：分钟
document.write("minute: "+date.getMinutes());

9、获取当前的秒

getSeconds(): 秒
document.write("second: "+date.getSeconds());

10、获取毫秒数

getTime()
返回的是1970-1-1 至今的毫秒数
应用场景：
使用毫秒数处理缓存的效果（不有缓存）
http://www.baidu.com?毫秒数

十四、js的Math对象

1、数学的运算
** 里面的都是静态方法，使用可以直接使用 Math.方法()

** ceil(x): 上取整

** floor(x)：下取整

** round(x)：四舍五入

** random()：得到随机数0.0~1.0（伪随机数）

* 得到0-9的随机数
Math.random()*10
Math.floor(Math.random()*10));

十五、js的全局函数

1、由于不属于任何一个对象，直接写名称使用

2、eval() ：执行js代码（如果字符串是一个js代码，可以使用该方法直接执行）

var str = "alert('1234');";
//alert(str);
eval(str);

3、encodeURI() ：对字符进行编码
       - %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234

   decodeURI() ：对字符进行解码

encodeURIComponent() 和 decodeURIComponent()

4、isNaN():判断当前字符串是否是数字

var str2 = "aaaa";
alert(isNaN(str2));//true

*** 如果是数字，返回false
*** 如果不是数字，返回true

5、parseInt()：类型转换

var str3 = "123";
document.write(parseInt(str3)+1);//124

十六、js的函数的重载

1、什么是重载？方法名相同，参数不同

2、js的重载是否存在？不存在
** 调用最后一个方法
** 把传递的参数保存到 arguments数组里面

3、js里面是否存在重载？(面试题目)
（1）js里面不存在重载。

<script type="text/javascript">/*默认执行最近的方法也就是4个参数的add*/function add(a,b){return a+b;}function add(a,b,c){return a+b+c;}function add(a,b,c,d){return a+b+c+d;}alert(add(1,2));//NaNalert(add(1,2,3));//NaNalert(add(1,2,3,4));//10
</script>

（2）但是可以通过其他方式模拟重载的效果（通过aruguments数组来实现）

function add1() {//比如传递的是两个参数，arguments是每个js都有的一个数组if(arguments.length == 2) {return arguments[0]+arguments[1];} else if (arguments.length == 3) {return arguments[0]+arguments[1]+arguments[2];} else if (arguments.length == 4) {return arguments[0]+arguments[1]+arguments[2]+arguments[3];} else {return 0;}
}

十七、js的bom对象

1、bom：browser object model: 浏览器对象模型

2、有哪些对象？
① navigator：获取客户机的信息（浏览器的信息）
- navigator.appName

document.write(navigator.appName);

② screen: 获取屏幕的信息

document.write(screen.width);
document.write("<br/>");
document.write(screen.height);

③ location: 请求url地址
- href属性
**** 获取到请求的url地址

document.write(location.href);

**** 设置url地址
- 页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面

location.href = "hello.html";

**** <input type="button" value="tiaozhuan" οnclick="href1();"/>
           - 鼠标点击事件 οnclick="js的方法;"

   ④ history：请求的url的历史记录
       - 创建三个页面
           1、创建第一个页面 a.html 写一个超链接到 b.html
           2、创建b.html 超链接到 c.html
           3、创建c.html

- 到访问的上一个页面
history.back();
history.go(-1);

- 到访问的下一个页面
history.forward();
history.go(1);

⑤ window（重点）
* 窗口对象
* 顶层对象（所用的bom对象都是在window里面操作的）

** 方法
           - window.alert() : 页面弹出一个框，显示内容
               ** 简写alert()

           - confirm()：确认框
               - var flag = window.confirm("显示的内容");

           - prompt()：输入的对话框
               - window.prompt("please input : ","0");
               - window.prompt("在显示的内容","输入框里面的默认值");

           - open() :　打开一个新的窗口
               ** open("打开的新窗口的地址url","","窗口特征，比如窗口宽度和高度")
               - 创建一个按钮，点击这个按钮，打开一个新的窗口
               - window.open("hello.html","","width=200,height=100");

           - close(): 关闭窗口(浏览器兼容性比较差)
               - window.close();

           - 做定时器
           ** setInterval("js代码",毫秒数) 1秒=1000毫秒
               - 表示每三秒，执行一次alert方法
               window.setInterval("alert('123');",3000);

           ** setTimeout("js代码",毫秒数)
               - 表示在毫秒数之后执行，但是只会执行一次

- 表示四秒之后执行js代码，只会执行一次
               window.setTimeout("alert('abc');",4000);

           ** clearInterval(): 清除setInterval设置的定时器
               var id1 = setInterval("alert('123');",3000);//通过setInterval会有一个返回值
               clearInterval(id1);

** clearTimeout() : 清除setTimeout设置的定时器
var id2 = setTimeout("alert('abc');",4000);
clearTimeout(id2);

十八、js的dom对象（****）

1、dom：document object model: 文档对象模型
   ** 文档：
       超文本文档（超文本标记文档） html 、xml
   ** 对象：
       提供了属性和方法
   ** 模型：使用属性和方法操作超文本标记型文档

2、可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

3、想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象
       -- 需要把html里面的标签、属性、文本内容都封装成对象

4、要想对标记型文档进行操作，解析标记型文档
       - 画图分析，如何使用dom解析html

5、解析过程（重点）
       根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，
       - document对象：整个文档
       - element对象：标签对象
       - 属性对象
       - 文本对象

-- Node节点对象：这个对象是这些对象的父对象
           *** 如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

6、DOM模型有三种（了解）：
       DOM level 1：将html文档封装成对象。
       DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
       DOM level 3：支持xml1.0的一些新特性。

7、DHTML：是很多技术的简称
       ** html: 封装数据
       ** css：使用属性和属性值设置样式
       ** dom：操作html文档（标记型文档）
       ** javascript：专门指的是js的语法语句（ECMAScript）

十九、document对象

1、document对象表示整个HTML的文档

2、常用方法
       **** write()方法：
           （1）向页面输出变量（值）
           （2）向页面输出html代码

var str = "abc";
document.write(str);
document.write("<hr/>");

**** getElementById();
- 通过id得到元素（标签）

//使用getElementById得到input标签
var input1 = document.getElementById("nameid");  //传递的参数是标签里面的id的值，返回的是一个对象
//得到input里面的value值
alert(input1.name);   //标签对象.属性名称
//向input里面设置一个值value
input1.value = "bbbbb";

**** getElementsByName();
- 通过标签的name的属性值得到标签
- 返回的是一个集合（数组）

//使用getElementsByName得到input标签
var inputs = document.getElementsByName("name1");  //传递的参数是 标签里面的name的值，返回的是集合
//alert(inputs.length);
//遍历数组
for(var i=0;i<inputs.length;i++) {   //通过遍历数组，得到每个标签里面的具体的值var input1 = inputs[i];  //每次循环得到input对象，赋值到input1里面alert(input1.value);    //得到每个input标签里面的value值
}

**** getElementsByTagName("标签名称");
- 通过标签名称得到元素

- 返回的是一个集合（数组）

//演示getElementsByTagName
var inputs1 = document.getElementsByTagName("input");  //传递的参数，是标签名称
//alert(inputs1.length);
//遍历数组，得到每个input标签
for(var m=0;m<inputs1.length;m++) {//得到每个input标签var input1 = inputs1[m];//得到value值alert(input1.value);
}

3、注意地方
**** 只有一个标签，这个标签只能使用name获取到，这个时候，使用getElementsByName返回的是一个数组，
但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值

//通过name得到input标签
var inputs2 = document.getElementsByName("name11")[0];
alert(inputs2.value);var inputss = document.getElementsByTagName("input")[0];
alert(inputss.value);

二十、案例：window弹窗案例

- 实现过程
       1、创建一个页面window.html
           ** 有两个输入项和一个按钮
           ** 按钮上面有一个事件：弹出一个新窗口 open

<html><head><title>HTML示例</title><style type="text/css"></style></head><body>编号：<input type="text" id="numid"/><br/>姓名：<input type="text" id="nameid"/><br/><input type="button" value="选择" onclick="open1()"/><script type="text/javascript">//实现弹出窗口的方法function open1() {//open方法window.open("user.html","","width=250,height=150");}</script></body>
</html>

2、创建弹出页面
           ** 表格
           ** 每一行有一个按钮和编号和姓名
           ** 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置

<html><head><title>HTML示例</title><style type="text/css"></style></head><body><table border="1" bordercolor="blue"><tr><td>操作</td><td>编号</td><td>姓名</td></tr><tr><td><input type="button" value="选择" onclick="s1('100','东方不败');"/></td><td>100</td><td>东方不败</td></tr><tr><td><input type="button" value="选择" onclick="s1('101','岳不群');"/></td><td>101</td><td>岳不群</td></tr><tr><td><input type="button" value="选择" onclick="s1('102','林平之');"/></td><td>102</td><td>林平之</td></tr></table><script type="text/javascript">//实现s1方法function s1(num1,name1) {//需要把num1和name1赋值到window页面//跨页面的操作  opener：得到创建这个窗口的窗口 得到window页面var pwin = window.opener; //得到window页面pwin.document.getElementById("numid").value = num1;pwin.document.getElementById("nameid").value = name1;//关闭窗口window.close();}</script></body>
</html>

－　opener:属性，获取创建当前窗口的窗口

- 做这个案例时候会有一个问题
       *** 由于我们现在访问的是本地文件，js安全性，谷歌浏览器安全级别很高，不允许访问本地文件
       *** 在实际开发中，没有这样的问题，实际中不可能访问本地的文件。
       *** http://www.baidu.com

二十一、案例一：在末尾添加节点

第一步：获取到ul标签
   第二步：创建li标签
       document.createElement("标签名称")方法
   第三步：创建文本
       document.createTextNode("文本内容");
   第四步：把文本添加到li下面
       使用 appendChild方法
   第五步：把里添加到ul末尾
       使用 appendChild方法

<html><head><title>HTML示例</title><style type="text/css">div{width:200px;height:200px;border:2px solid red;}</style></head><body><div><ul id="ulid"><li>111</li><li>222</li><li>333</li><li>444</li></ul>
</div>
<div id="div1"></div><br/><input type="button" value="add" onclick="add2();"/><script type="text/javascript">function add2() {var div1 = document.getElementById("div1");var ul1 = document.getElementById("ulid");div1.appendChild(ul1);}//在末尾添加节点function add1() {//获取到ul标签var ul1 = document.getElementById("ulid");//创建标签var li1 = document.createElement("li");//创建文本var tex1 = document.createTextNode("5555");//把文本加入到li下面li1.appendChild(tex1);//把li加入到ul下面ul1.appendChild(li1);}</script></body>
</html>

二十二、元素对象（element对象）

1、要操作element对象，首先必须要获取到element，
       - 使用document里面相应的方法获取

   ** 方法
       *** 获取属性里面的值
           getAttribute("属性名称")

var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));

*** 设置属性的值

input1.setAttribute("class","haha");

*** 删除属性

input1.removeAttribute("name");
** 不能删除value

2、想要获取标签下面的子标签
** 使用属性 childNodes，但是这个属性兼容性很差，不建议使用。
** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法

var ul11 = document.getElementById("ulid1");
//获取ul下面的子标签
//var lis = ul11.childNodes;
//t(lis.length);
var lis = ul11.getElementsByTagName("li");
alert(lis.length);

二十三、Node对象属性一

* nodeName
* nodeType
* nodeValue

* 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象，每一个都对应有上面三个值。

* 标签节点对应的值
       nodeType： 1
       nodeName：大写标签名称比如SPAN
       nodeValue: null
   * 属性节点对应的值
       nodeType： 2
       nodeName：属性名称
       nodeValue: 属性的值
   * 文本节点对应的值
       nodeType： 3
       nodeName： #text
       nodeValue: 文本内容

二十四、Node对象的属性二

<ul>
       <li>qqqqq</li>
       <li>wwww</li>
   </ul>

1、父节点
- ul是li的父节点
- parentNode

//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);

2、子节点
- li是ul的子节点
- childNodes：得到所有子节点，但是兼容性很差

- firstChild：获取第一个子节点

//获取ul的第一个子节点 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一个子节点
var li1 = ul1.firstChild;
alert(li1.id);

- lastChild：获取最后一个子节点

//得到最后一个子节点
var li4 = ul1.lastChild;
alert(li4.id);

3、同辈节点
       - li直接关系是同辈节点
       - nextSibling: 返回一个给定节点的下一个兄弟节点。
       previousSibling：返回一个给定节点的上一个兄弟节点。

//获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);
alert(li3.previousSibling.id);

二十五、操作dom树

1、appendChild方法
       - 添加子节点到末尾
       - 特点：类似于剪切黏贴的效果

2、 insertBefore(newNode,oldNode)方法
       - 在某个节点之前插入一个新的节点
       - 两个参数
           * 要插入的节点
           * 在谁之前插入
       - 插入一个节点，节点不存在，创建
           1、创建标签
           2、创建文本
           3、把文本添加到标签下面
       - 代码

 /*1、获取到li13标签2、创建li3、创建文本4、把文本添加到li下面5、获取到ul6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）        *///获取li3 标签var li13 = document.getElementById("li13");//创建livar li15 = document.createElement("li");//创建文本var text15 = document.createTextNode("董小宛");//把文本添加到li下面 appendChildli15.appendChild(text15);//获取到ulvar ul21 = document.getElementById("ulid21");//在<li>貂蝉</li>之前添加 <li>董小宛</li> //insertBefore(newNode,oldNode)ul21.insertBefore(li15,li13);

*** 不存在没有insertAfter()方法

3、removeChild方法：删除节点
- 通过父节点删除，不能自己删除自己

        - /*1、获取到li24标签2、获取父节点ul标签3、执行删除（通过父节点删除）*///获取li标签var li24 = document.getElementById("li24");//获取父节点//两种方式  1、通过id获取 ； 2、通过属性 parentNode获取var ul31 = document.getElementById("ulid31");//删除（通过父节点）ul31.removeChild(li24);

4、replaceChild(newNode,oldNode)方法: 替换节点
       - 不能自己替换自己，通过父节点替换
       - 两个参数
       ** 第一个参数：新的节点（替换成的节点）
       ** 第二个参数：旧的节点（被替换的节点）
       - 代码

        /*1、获取到li342、创建标签li3、创建文本4、把文本添加到li下面5、获取ul标签（父节点）6、执行替换操作 （replaceChild(newNode,oldNode)）*///获取li34var li34 = document.getElementById("li34");//创建livar li35 = document.createElement("li");//创建文本var text35 = document.createTextNode("张无忌");//把文本添加到li下面li35.appendChild(text35);//获取ulvar ul41 = document.getElementById("ulid41");//替换节点ul41.replaceChild(li35,li34);

5、cloneNode(boolean): 复制节点

        - //把ul列表复制到另外一个div里面/*1、获取到ul2、执行复制方法 cloneNode方法复制 true3、把复制之后的内容放到div里面去** 获取到div** appendChild方法*///获取ulvar ul41 = document.getElementById("ulid41");//复制ul，放到类似剪切板里面var ulcopy = ul41.cloneNode(true)//获取到divvar divv = document.getElementById("divv");//把副本放到div里面去divv.appendChild(ulcopy);

6、操作dom总结
       * 获取节点使用方法
           getElementById()：通过节点的id属性，查找对应节点。
           getElementsByName()：通过节点的name属性，查找对应节点。
           getElementsByTagName()：通过节点名称，查找对应节点
       * 插入节点的方法
           insertBefore方法：在某个节点之前插入
           appendChild方法：在末尾添加，剪切黏贴
       * 删除节点方法
           removeChild方法：通过父节点删除
       * 替换节点方法
           replaceChild方法：通过父节点替换

二十六、innerHTML属性（重点）

1、这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

第一个作用：获取文本内容
       *** //获取span标签
       var span1 = document.getElementById("sid");
       alert(span1.innerHTML);

第二个作用：向标签里面设置内容（可以是html代码）
       *** //向div里面设置内容 <h1>AAAAA</h1>
       //获取到div
       var div11 = document.getElementById("div11");
       //设置内容
       div11.innerHTML = "<h1>AAAAA</h1>";

2、练习：向div里面添加一个表格

//向div里面添加一个表格
//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";var tab = "<table>";
tab += "</table>";//相当于 var tab = "<table></table>";div11.innerHTML = tab;

二十七、案例二：动态显示时间

* 得到当前的时间
       var date = new Date(); //得到不是常规的格式
       var d1 = date.toLocaleString(); //格式化
   * 需要让页面每一秒获取时间
       setInterval方法定时器
   * 显示到页面上
       每一秒向div里面写一次时间
       * 使用innerHTML属性
   * 代码

<html><head><title>HTML示例</title><style type="text/css"></style></head><body><div id="times"></div><script type="text/javascript">function getD1() {//当前时间var date = new Date();//格式化var d1 = date.toLocaleString();//获取divvar div1 = document.getElementById("times");div1.innerHTML = d1;}//使用定时器实现每一秒写一次时间setInterval("getD1();",1000);</script></body>
</html>

二十八、案例三：全选练习

** 使用复选框上面一个属性判断是否选中
       - checked属性
       - checked=true：选中
       - checked=false：不选中

* 创建一个页面
       ** 复选框和按钮
           - 四个复选框表示爱好
           - 还有一个复选框操作全选和选不选，也有一个事件

** 三个按钮，分别有事件
           - 全选
           - 全不选
           - 反选

代码：

<html><head><title>HTML示例</title><style type="text/css"></style></head><body><input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选<br/><input type="checkbox" name="love"/>篮球<input type="checkbox" name="love"/>排球<input type="checkbox" name="love"/>羽毛球<input type="checkbox" name="love"/>乒乓球<br/><input type="button" value="全选" onclick="selAll();"/><input type="button" value="全不选" onclick="selNo();"/><input type="button" value="反选" onclick="selOther();"/><script type="text/javascript">//实现全选和全不选function selAllNo() {/*1、得到上面那个复选框- 通过id获取到2、判断这个复选框是否是选中- if条件，checked==true3、如果是选中，下面是全选4、如果不是选中，下面是全不选*///得到上面复选框var box1 = document.getElementById("boxid");//判断这个复选框是否是选择if(box1.checked == true) { //是选择状态//调用全选方法selAll();} else { //不是选中状态//调用全不选方法selNo();}}//实现反选的操作function selOther() {/*1、获取到要操作的复选框2、返回数组，遍历数组3、得到每一个复选框4、判断当前的复选框是选中还是不选中- if(love1.checked == true) {}5、如果选中，属性checked设置成false，否则，设置成true*///获取要操作的复选框var loves11 = document.getElementsByName("love");//遍历数组for(var a=0;a<loves11.length;a++) {//得到每一个复选框var love11 = loves11[a];//判断当前这个复选框是什么状态if(love11.checked == true) { //是选中的状态//设置checked=falselove11.checked = false;} else { //是不选中的状态//把checked=truelove11.checked = true;}}}//实现全不选的操作function selNo() {/*1、获取到要操作的复选框2、返回的是数组，遍历数组3、得到每一个复选框4、设置复选框的属性 checked=false*///得到要操作的复选框var loves1 = document.getElementsByName("love");//遍历数组for(var j=0;j<loves1.length;j++) {//得到每一个复选框var love1 = loves1[j];//设置属性的值checked = false;love1.checked = false;}}//实现全选的操作function selAll() {/*1、获取要操作的复选框 - 使用getElementsByName()2、返回是数组，- 属性 checked判断复选框是否选中*** checked = true; //表示选中*** checked = false;//表示不选中- 遍历数组，得到的是每一个checkbox* 把每一个checkbox属性checked=true                    *///获取要操作的复选框var loves = document.getElementsByName("love");//遍历数组，得到每一个复选框for(var i=0;i<loves.length;i++) {var love1 = loves[i]; //得到每一个复选框//设置属性是truelove1.checked = true;}}</script></body>
</html>

二十九、案例四：下拉列表左右选择

* 下拉选择框
       <select>
           <option>111</option>
           <option>111</option>
       </select>

* 创建一个页面
       ** 两个下拉选择框
           - 设置属性 multiple属性
       ** 四个按钮，有事件

<html><head><title>HTML示例</title><style type="text/css"></style></head><body><div id="s1" style="float:left;"><div><select id="select1" multiple="multiple" style="width:100px;height:100px;"><option>AAAAAAAA</option><option>BBBBBBBB</option><option>CCCCCCCC</option><option>DDDDDDDD</option><option>EEEEEEEE</option></select></div><div><input type="button" value="选中添加到右边" onclick="selToRight();"/><br/><input type="button" value="全部添加到右边" onclick="allToRight();"/></div>
</div><div id="s2"><div><select id="select2" multiple="multiple" style="width:100px;height:100px;"><option>QQQQQQQQ</option></select></div><div><input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/><input type="button" value="全部添加到左边" onclick="allToLeft();"/></div>
</div><script type="text/javascript">//实现全部添加到左边function allToLeft() {/*1、获取select2里面的option对象2、返回是数组，遍历数组3、得到每一个option对象4、获取到select15、添加到select1里面- 使用appendChild方法*///获取select2var select2 = document.getElementById("select2");//获取select1var select1 = document.getElementById("select1");//获取select2里面的optionvar options1 = select2.getElementsByTagName("option");//遍历数组for(var m=0;m<options1.length;m++){//得到每一个optionvar op11 = options1[m];//添加到select1里面select1.appendChild(op11);m--;}}//选择添加到左边function selToLeft() {/*1、获取select2里面的option对象2、返回是数组，遍历数组3、得到每一个option对象4、判断option是否被选中- if条件 属性 selected == true：选择5、获取select16、添加到select1里面- 使用appendChild方法*///获取select1var s1 = document.getElementById("select1");//获取到select2var s2 = document.getElementById("select2");//得到s1里面的option对象var opss = s2.getElementsByTagName("option");//遍历数组for(var aa=0;aa<opss.length;aa++) {//得到每一个optionvar op = opss[aa];//判断是否被选中if(op.selected == true) { //被选中//添加到select1里面s1.appendChild(op);aa--;}}}//全部添加到右边function allToRight() {/*1、获取第一个select下面的option对象2、返回数组，遍历数组3、得到每一个option对象4、得到select25、添加到select2下面- appendChild方法*///得到select2var s2 = document.getElementById("select2");//得到select下面的option对象var s1 = document.getElementById("select1");var ops = s1.getElementsByTagName("option");//返回的是数组//遍历数组for(var j=0;j<ops.length;j++) {//得到每一个option对象var op1 = ops[j];//添加option到s2下面s2.appendChild(op1);j--;}}//实现选中添加到右边function selToRight() {/*1、获取select1里面的option- getElementsByTagName()返回是数组- 遍历数组，得到每一个option2、判断option是否被选中- 属性 selected，判断是否被选中** selected= true: 选中** selected= false：没有选择3、如果是选中，把选择的添加到右边去4、得到select24、添加选择的部分- appendChild方法*///获取select1里面的option//获取select2var select2 = document.getElementById("select2");//得到select1var select1 = document.getElementById("select1");//得到optionvar options1 = select1.getElementsByTagName("option");//遍历数组for(var i=0;i<options1.length;i++) {//alert(i);//第一次循环 i=0  length：5   //第二次循环 i=0  length：4   //           i=0  length: 3var option1 = options1[i];//得到每一个option对象//判断是否被选中if(option1.selected == true) {//添加到select2里面select2.appendChild(option1);i--;}}}</script></body>
</html>

三十、案例五：省市联动

* 创建一个页面，有两个下拉选择框
   * 在第一个下拉框里面有一个事件：改变事件 onchange事件
       - 方法add1(this.value);表示当前改变的option里面的value值
   * 创建一个二维数组，存储数据
       * 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

<html><head><title>HTML示例</title><style type="text/css"></style></head><body><select id="countryid" onchange="add1(this.value);"><option value="0">--请选择--</option><option value="中国">中国</option><option value="美国">美国</option><option value="德国">德国</option><option value="日本">日本</option></select><select id="cityid"></select></body><script type="text/javascript">//创建一个数组存储数据//二维数组var arr = new Array(4);arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];function add1(val) {//alert(val);/*1、遍历二维数组2、得到也是一个数组（国家对于关系）3、拿到数组中的第一个值和传递过来的值做比较4、如果相同，获取到第一个值后面的元素5、得到city的select6、添加过去（使用）appendChild方法- 创建option（三步）*//*由于每次都要想city里面添加option第二次添加，追加* 每次添加之前，判断一下city里面是否有option，如果有，删除*///获取city的selectvar city1 = document.getElementById("cityid");//得到city里面的optionvar options1 = city1.getElementsByTagName("option");//遍历数组for(var m=0;m<options1.length;m++) {//得到每一个optionvar op = options1[m];//删除这个option 通过父节点删除city1.removeChild(op);m--;}//遍历二维数组for(var i=0;i<arr.length;i++) {//得到二维数组里面的每一个数组var arr1 = arr[i];//得到遍历之后的数组的第一个值var firstvalue = arr1[0];//判断传递过来的值和第一个值是否相同if(firstvalue == val) { //相同//得到第一个值后面的元素//遍历arr1for(var j=1;j<arr1.length;j++) {var value1 = arr1[j]; //得到城市的名称//alert(value1);//创建optionvar option1 = document.createElement("option");//创建文本var text1 = document.createTextNode(value1);//把文本添加到option1里面option1.appendChild(text1);//添加值到city1里面city1.appendChild(option1);}}}}</script>
</html>

三十一、案例六：动态生成表格

*创建一个页面：两个输入框和一个按钮

*代码和步骤
   /*
       1、得到输入的行和列的值
       2、生成表格
           ** 循环行
           ** 在行里面循环单元格
       3、显示到页面上
           - 把表格的代码设置到div里面
           - 使用innerHTML属性
   */

<html><head><title>HTML示例</title><style type="text/css"></style></head><body>行：<input type="text" id="h" />列：<input type="text" id="l" /><br/><input type="button" value="生成" onclick="add2();"/><div id="divv"></div><script type="text/javascript">function add2() {/*1、得到输入的行和列的值2、生成表格** 循环行** 在行里面循环单元格3、显示到页面上- 把表格的代码设置到div里面- 使用innerHTML属性*///获取输入的行和列var h = document.getElementById("h").value;var l = document.getElementById("l").value;//把表格代码放到一个变量里面var tab = "<table border='1' bordercolor='blue'>";//循环行for(var i=1;i<=h;i++) {tab += "<tr>";//循环单元格for(var j=1;j<=l;j++) {tab += "<td>aaaaaaa</td>"}tab += "</tr>";}tab += "</table>";//alert(tab);//得到div标签var divv = document.getElementById("divv");//把table的代码设置到div里面去divv.innerHTML = tab;}</script></body>
</html>