javascript：与html结合方式、类型和变量、语法、Bom和Dom对象等
1、JavaScript的简介
JavaScript是基于对象和事件驱动的语言，应用于客户端（浏览器）。
基于对象:
- 提供了很多的对象，可以直接拿来使用
事件驱动：
- html做静态的效果，JavaScript做动态的效果
客户端:专门指的是浏览器
*JavaScript的特点：
(1) 交互性
- 信息的动态交互
(2) 安全性
- JavaScript不能访问本地的磁盘的文件
(3) 跨平台性
- 只要安装了支持js的浏览器，都可以运行
*JavaScript和java的区别
(1) java是Sun公司，现在是oracle；JavaScript是网景公司
(2) JavaScript 是基于对象，java是面向对象
(3) java是强类型语言，JavaScript是弱类型的语言
- 比如java里 int i=10；不能int i = "10";
- 而JavaScript里面装什么都可以
(4) JavaScript只需要解析就可以执行，而java要先编译再执行。
*JavaScript的组成
三部分组成：
(1) ECMAScript
- ECMA:欧洲计算机协会
- 有ECMA组织制定的js的语法，语句......
(2)BOM
- broswer object model：浏览器对象模型
(3) DOM
- Document object model:文档对象模型
2、JavaScript和html的结合方式（两种）
第一种
- 使用一个标签<script type="text/Javascript">js代码</script>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
alert("这是个字符串弹窗");
</script>
</body>
</html>
第二种
- 使用script标签引入一个js的文件
-创建一个js文件
-<script type="text/javascript" src="引入的js文件的路径">
这种方式就不要在这里写js代码了，因为不会执行
</script>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="j.js">
// 这里不再写js代码
</script>
</body>
</html>
3、js的原始类型和声明变量
java的基本数据类型：byte short int float long double boolean char
js的原始类型（五个）
- String：字符串
- var str="abc";
- number：数字类型
- var n=4;
- boolean:布尔类型
- var flag=true;
- null
- 值获取对象的引用，null表示对象的引用为空，所有的对象的引用也是object
- undefined
- 定义一个变量，没有赋值
- var s;
- typeof(变量名);查看当前变量的数据类型
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
//定义一个字符串
var str="afjsdk";
alert(typeof(str));//页面弹出String
//定义数字
var n=35;
//定义boolean
var flag=true;
</script>
</body>
</html>
4、js的语句
- java里面的语句
- if
- switch
- for while do-while
- js的语句
-if 判断语句
-switch 语句
-java里面支持的数据类型。支持String吗？在jdk1.7才出现
-js里面都支持，switch和java里的一样
如：
var b = 5;
switch(b){
case 3:
break;
case 6:
break;
default:
alert("aaaa");
}
- 循环语句 for while
-while：
示例：
var n=5;
while(n>1){
alert(n);
n--;
}
-for:
示例：
for(var n = 0; n < 3; n++){
alert(n);
}
5、js的运算符
5.1 一般情况和java的基本的运算符没有区别
5.2 不一样的地方：
5.2.1 js里面不区别整数和小数
比如java里：int i = 123;
i/100的结果是12
而js里面就会是12.3
5.2.2 对于java：String str = "123";
str+1的结果是字符串1231；而var s = "123"， s+1的结果是字符串1231；
str-1在java里出现语法错误, 而s-1是真正的相减的运算得到122
但是如果是var s ="abc"，执行s-1会出现NaN的错误, 因为"abc"里面不是数字
-即js对于字符串的加碱运算是：
**相加是字符串的连接
**相减是真正的减法运算
5.2.3 boolean 类型也可以操作
true==1
false==0
5.2.4 ==和===的区别
==比较的是值
===比较的是值和类型
5.2.5 引入知识
直接向页面输出语句（可以把内容显示在页面上）
document.write("html代码、固定值、变量");
6、99乘法表的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//循环行9
document.write("<table border='1' bordercolor='blue'>");
for(var i=1; i<=9; i++) {
//循环列
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>");
document.write(j+"*"+i+"="+i*j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
7、js的数组
js数组的定义方式：
1）、var arr= [1,2,3,"abc",true];
2)、使用内置的对象Array对象
var arr1 = new Array(5);//定义一个长度为5的数组
arr1[0]="1";
arr1[1]="a";
arr1[2]="3";
3)、使用内置对象Array
var arr2 = new Array(6,7,8);
数组里面有一个属性：length：获取数组的长度
数组可以存放不同的数据类型
8、js的函数
*在java里面定义方法：
public void 方法名(参数列表){
方法体
}
如：
public int add(){
int sum = a+b;
return sum;
}
*在js里面有三种定义函数的方式：
1)、使用一个关键字 function
function 方法名(参数列表){
方法体；
返回值可有可无；
}
如何调用：方法名(参数列表);
注意：参数列表直接写参数名称,不需要写var 。如fun(a,b){}
如果设置了返回值，则调用后的结果为返回值，但是不会自动显示在页面，需要其他语句才行
2)、匿名函数：没有名字，需要调用的时候给这个函数起一个名
var add function (参数列表){
方法体和返回值；
}
调用：add(参数列表);
3)、使用内置对象 Function(用的很少)
var add = new Function("参数列表","方法体和返回值");
9、js的全局变量和局部变量
**全局变量：在script标签里面定义的变量，这个变量在页面的js中都可以使用
都可以使用：在方法内部，在方法外部，在其他script标签中都可以
**局部变量：在方法的内部定义一个变量，只能在这个方法中使用
若再方法外部使用提示出错
** ie浏览器自带了调试工具，IE8及其以上的版本中，键盘上F12，在页面下方出现一个条，选择控制台即可看到错误信息
10、script标签应该放的位置
建议将script代码放在body 标签的后面，因为如果放前面，可能会出现下面的情况：
*示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 在这里写上获取输入项的value值，就会出错，因为这里还没有执行到输入项
var input1 = document.getElementById("1");
alert(input1.value);
</script>
</head>
<body>
<input type="text" id="1" value="name1">;
</body>
</html>
11、js的重载
为什么没有重载？
二、JavaScript的对象
1、js的String对象
**创建String对象
var str = "abc";
**方法和属性
- 属性：
就需要知道length就行，如str.length;返回字符串长度
- 方法：
（1）String HTML 包装方法：
str.bold();加粗
str.fontcolor("red");设置字符串的颜色
str.fontsize(1-7);设置字符串的字体大小
等
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String HTML 包装方法</title>
</head>
<body>
<script>
var txt = "Hello World!";
document.write("<p>字体变大: " + txt.big() + "</p>");
document.write("<p>字体缩小: " + txt.small() + "</p>");
document.write("<p>字体加粗: " + txt.bold() + "</p>");
document.write("<p>斜体: " + txt.italics() + "</p>");
document.write("<p>固定定位: " + txt.fixed() + "</p>");
document.write("<p>加删除线: " + txt.strike() + "</p>");
document.write("<p>字体颜色: " + txt.fontcolor("green") + "</p>");
document.write("<p>字体大小: " + txt.fontsize(6) + "</p>");
document.write("<p>下标: " + txt.sub() + "</p>");
document.write("<p>上标: " + txt.sup() + "</p>");
document.write("<p>链接: " + txt.link("http://www.w3cschool.cc") + "</p>");
document.write("<p>闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)</p>");
</script>
</body>
</html>
（2）与java相关的方法
- concat方法：连接字符串；
如：str.concat(str1,str2,...)连接str str1 str2
- charAt():
var str="HELLO WORLD";
var n=str.charAt(str.length-1);
得到D
- indexOf()返回字符串首次出现的位置
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
得到：13
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e",5);
得到：14
- split("")切分字符串为字符串数组
如：
var str="How are you doing today?";
var n=str.split(" ");
得到：How,are,you,doing,today?
var str="How are you doing today?";
var n=str.split("");
得到：H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
var str="How are you doing today?";
var n=str.split(" ",3);
得到：How,are,you
- replace()替换字符串
-var str="Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
得到：Visit Runoob!
- substr()和substring
- string.substr(start,length)
如：
var str="Hello world!";
var n=str.substr(2,3)
得到：llo
var n=str.substr(2)
得到：llo world!
- string.substring(from, to)
substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。
<script>
var str="Hello world!";
document.write(str.substring(3)+"<br>");
document.write(str.substring(3,7));
</script>
输出: lo world!
lo w
2、js的Array对象（字符串数组）
三种创建方式：
var arr1= [1,2,3];
var arr2= new Array(3);//长度是3
var arr1= new array(1,2,3);元素是123
属性：
length 查看数组的长度
方法：
- concat(),语法：array1.concat(array2,array3,...,arrayX) 数组的连接，返回新数组
- join() ,语法：array.join(separator) 插入新的字符串，返回新的数组，
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
得到：Banana and Orange and Apple and Mango
- push(),语法：array.push(item1, item2, ..., itemX)尾部追加字符串，返回新数组的长度
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.push("Kiwi","Lemon","Pineapple")
push后的数组是:Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple
n==7
注意：若添加的是一个数组，则这个数组作为一个整体元素添加到原来的数组中
- pop()，语法array.pop()，删除数组的最后一个元素，并且返回这个元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.pop();
fruits最后一个字符串删除，n=="Mango"
- revrse(),语法：array.reverse()颠倒数组中元素的顺序，返回颠倒顺序后的数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
fruits：Mango,Apple,Orange,Banana
3、js的date对象
**js获取当前的时间：
var date=new Date();格式不是中国的习惯。
**转换为当前日期：date.toLocaleDateString();
**转换为当前时间：date.toLocaleTimeString();
**得到当前的年份：date.getFullYear();
**得到当前的月份：date.getMonth();返回的是0-11月，所以需要加1来得到准确的月份
**得到当前的星期：date.getDay();返回的是0-6，对应是星期日-星期六
**得到当前的天：date.getDate();返回1-31
**得到当前的小时：date.getHours();
**得到当前的分钟：date.getMinutes();
**得到当前的秒：date.getSeconds();
**获取毫秒数：date.getTime();获取1970年1月1日至今的毫秒数
应用场景：使用毫秒数来处理缓存的效果（不使用缓存）
4、js的math对象
*数学的运算
*静态的方法，直接类名.方法名();
*常用的方法：
- ceil():向上舍入为整数
- round():四舍五入
- floor():向下舍入为整数
- random：得到随机数，返回 0 ~ 1 之间的随机数。
如：取得介于 1 到 10 之间的一个随机数：
Math.floor((Math.random()*10)+1);
5、js的全局函数
全局函数：不属于任何一个对象
- eval：
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
evval(string);如eval（"4+5"）返回9；
- decodeURI()解码某个编码的 URI。
encodeURI() 函数可把字符串作为 URI 进行编码。
对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的： , / ? : @ & = + $ # (可以使用 encodeURIComponent() 方法分别对特殊含义的 ASCII 标点符号进行编码。).
- decodeURIComponent()解码一个编码的 URI 组件。
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
- encodeURI()把字符串编码为 URI。
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
- encodeURIComponent()把字符串编码为 URI 组件。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
- isNaN() 函数用于检查其参数是否是非数字值。如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
- parseInt() 函数可解析一个字符串，并返回一个整数。
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
6、js的重载：面试常考题，实际开发不需要
js没有重载
- 会调用最后一个方法。
- 会把参数放在一个arguments数组里面
但是可以通过其他的方式来模拟重载，通过arguments数组来模拟：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function add(){
var sum = arguments[0];
for(var i=1;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
document.write(add(1,2,3,4));
</script>
</body>
</html>
7、js的浏览器Bom对象
访问和操作浏览器窗口的模型称为浏览器对象模型BOM（Browser Object Model）。
核心是window对象；
以下有特殊双重身份：
window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；
document对象既是BOM顶级对象的一个属性，也是DOM模型中的顶级对象
location对象既是window对象的属性，同时也是document对象的属性。
BOM有哪些对象?
- navigator对象
Navigator 对象包含有关浏览器的信息。
属性：appName 返回浏览器的名称
- screen对象
Screen 对象包含有关客户端显示屏幕的信息。
- 属性：height 返回屏幕的总高度
- 属性：width 返回屏幕的总宽度
- location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
-属性：href 获取完整的url地址，设置url地址
- history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
-属性：length 返回历史列表中的网址数
- 方法：
history.back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
***** - window对象(*********重要********)
* 窗口对象
* 顶层对象（所有的BOM对象都是在window里面操作的）
** 方法：
- window.alert()：页面弹出一个框，显示内容。简写alert();
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
此方法返回true，否则返回false。
如：
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
- prompt() 显示可提示用户输入的对话框。
prompt()方法用于显示可提示用户进行输入的对话框。
这个方法返回用户输入的字符串。
window.prompt("在页面显示的内容","输入框里面的默认值")
- open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,specs,replace)四个参数都是可选的。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="百度一下" onclick="open_win()">
</body>
<script>
function open_win() {
window.open("http://www.baidu.com");
}
</script>
</html>
- close()关闭浏览器窗口。window.close() ,浏览器兼容差
window.close();
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
语法：setInterval(code, milliseconds);
- 每三秒（3000 毫秒）弹出 "Hello" :
setInterval(function(){ alert("Hello"); }, 3000);
或者：setInterval("alert('Hello')", 3000);
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
3 秒（3000 毫秒）后弹出 "Hello" :setTimeout(function(){ alert("Hello"); }, 3000);
- 只执行一次
- clearInterval() 取消由 setInterval() 设置的 timeout。
参数是setInterval时候返回的值
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
参数是setTimeout时候返回的值
如：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="clear_Interval" onclick="clear_Interval()">
<input type="button" value="clear_Timeout" onclick="clear_Timeout()">
</body>
<script>
var si = setInterval("alert('setInterval Show!!');",2000);
var st = setTimeout("alert('setTimeout Show!!');",4000);
function clear_Interval() {
window.clearInterval(si);
}
function clear_Timeout() {
window.clearTimeout(st);
}
</script>
</html>
8、js的dom对象
dom：doucment object model :文档对象模型
**文档：超文本文档（超文本标记文档） html、xml
**对象：提供了属性和方法
**模型：使用属性和方法操作超文本标记型文档
***可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记性的文档进行操作
***想要对标记型的文档进行操作，首先需要对标记型的文档里面的所有内容封装成对象
dom解析html的过程：
根据html的层级结构，在内存中分配一个属性结构，把html的每一个部分都封装成一个对象：
- document 对象：整个文档
- element 对象： 标签对象
- 属性对象：
- 文本对象
另，还有node 节点对象是这些对象的父对象，如果在对象里面找不到想要的方法，就在node对象去找
9、DHTML的简介：
是很多技术的简称：
*html:封装数据
*css：使用属性和属性值设置样式
*dom：操作html文档（标记型文档）
*JavaScript：专门指的是js的语法语句（ECMAScript）
10、document对象
浏览器载入html文件的时候就会产生一个document对象，在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点
属性和方法：
- document.getElementById(id的值) 返回对拥有指定 id 的第一个对象的引用。
语法：document.getElementById(elementID)
注意：id值是某个标签的值，返回的是该标签的引用，可以通过该引用访问、设置该元素的值
- document.getElementsByName() 返回带有指定名称的对象集合。
语法：document.getElementsByName("标签里面的name的值")
注意： Elements有一个s，集合乐意理解为数组，可以用脚标操作元素
返回的是集合，集合里是所有那么值为指定值的元素，遍历元素可以访问该元素的其他属性
- document.getElementsByTagName() 返回带有指定标签名的对象集合。
语法：document.getElementsByTagName(tagname)
注意： Elements有一个s，集合乐意理解为数组，可以用脚标操作元素
返回的是一个集合，参数是指定标签的名字
**这三个方法一定要掌握，其中，通过后两个方法获取的集合，可以直接加下标来引用对应的元素
如:
<body>
<input type="text" name="name1" value="aaa">
<script type="text/javascript">
//得到input标签的value值：aaa
document.getElementsByName("name1")[0].value;
</script>
</body>
注：本例在测试的时候犯得错误，误以为td标签有value的属性，查阅api才知道可以用abbr属性来代替。
在火狐浏览器上可以正常的测试，为什么在谷歌浏览器上不行？
因为js有一个安全性的特点，就是不允许浏览器访问本地的文件，所以操作失败。
这时候可以通过服务器来做到
11、案例：在末尾添加节点
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>add node test</title>
</head>
<body>
<!-- 使用语法来快捷创建以下的列表：ul#ulid>li{$$$}*4 -->
<ul id="ulid">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
<!-- 创建一个按钮，点击添加节点 -->
<input type="button" name="add" value="add" onclick="add()">
<script type="text/javascript">
function add(){
// 第一步，想要在ul下添加一个元素节点，先获取ul这个元素
var ul1=document.getElementById("ulid");
//第二步，创建一个li标签
var li1= document.createElement("li");
//第三步，创建一个文本节点，文本节点是没有子节点的
var text1=document.createTextNode("005");
//第四步，把文本节点添加到li标签下
li1.appendChild(text1);
//第五步，将li标签添加到ul1中
ul1.appendChild(li1);
}
</script>
</body>
</html>
<!-- 分析：在末尾添加节点的一个测试
需求：在一个列表的末尾添加一个子列 -->
总结：
第一步，想要在ul下添加一个元素节点，先获取ul这个元素
第二步，创建一个li标签
document.createElement("li");
第三步，创建一个文本节点，文本节点是没有子节点的
document.createTextNode("文本内容");
第四步，把文本节点添加到li标签下
li1.appendChild(text1);
第五步，将li标签添加到ul1中
ul1.appendChild(li1);
12、Html的DOM元素对象，element对象
再加深一下印象：
在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :
文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点
元素相当于标签
元素对象 的 子节点可以是元素节点，文本节点，注释节点。
要操作元素的的属性值，先要获取该元素
（1）element.setAttribute() 设置或者改变指定属性并指定值
（2）element.getAttribute() 返回指定元素的属性值
（3）element.removeAttribute() 从元素中删除指定的属性
如：<input type="text" id="inputid" name="inputname">
var in1=document.getElementById("inputid");
in1.setAttribute("class","haha");//增加一个属性class
in1.getAttribute("name");//获取属性name的值
in1.removeAttribute("name");//删除属性name,注意不能删除属性value
获取标签下面的子标签:
（4）element.appendChild() 为元素添加一个新的子元素
浏览器兼容性差，所以想要获取子节点的唯一有效的办法是用：
element.getElementsByTagName() 返回指定标签名的所有子元素集合。
注意区别document.getElementsByTagName()和element.getElementsByTagName()
前者是根据标签名来获得该标签的元素的数组，后者是根据标签名获得该元素的子节点的对应的集合
13、node对象的属性一：
JavaScript中所有HTML DOM节点类型都继承自Node类型，因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口，在JavaScript中Node接口被实现为Node类型。Node类型介绍
介绍3个：
1、nodeName 返回节点的名称，根据其类型。
2、nodeType 返回节点的类型。
3、nodeValue 设置或返回节点的值，根据其类型。
对元素节点、属性节点、文本节点分别测试上述三个属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span id ="s">123</span>
<br>
<script type="text/javascript">
//对于元素节点
var span1=document.getElementById("s");
document.write(span1.nodeType);//1
document.write("<br>");
document.write(span1.nodeName);//SPAN
document.write("<br>");
document.write(span1.nodeValue);//null
document.write("<br>");
//对于属性节点
var id1=span1.getAttributeNode("id");
document.write(id1.nodeType);//2
document.write("<br>");
document.write(id1.nodeName);//id
document.write("<br>");
document.write(id1.nodeValue);//s
document.write("<br>");
//对于文本节点
var text1 =span1.firstChild;
document.write(text1.nodeType);//3
document.write("<br>");
document.write(text1.nodeName);//#text
document.write("<br>");
document.write(text1.nodeValue);//123
document.write("<br>");
</script>
</body>
</html>
注：以上的示例需要注意三个获取元素的方式（函数），
以及属性节点不是元素节点的子节点，关系是从属的关系
归纳起来就是：
*标签节点对应的值：
nodeType：1
nodeName:大写的标签的名称
nodeValue:null
*标签节点对应的值：
nodeType： 2
nodeName: 属性的名称
nodeValue: 属性的值
*标签节点对应的值：
nodeType： 3
nodeName: #text
nodeValue: 文本内容
14、node对象的属性二：
子节点：
childNodes 返回节点到子节点的节点列表。兼容差
firstChild 返回节点的首个子节点。
lastChild 返回节点的最后一个子节点。
父节点：
parentNode 返回节点的父节点。
同级节点：
nextSibling 返回节点之后紧跟的同级节点。
previousSibling 返回节点之前紧跟的同级节点。
15、（Node 对象的方法）操作dom树：
插入节点：
* appendChild:
一是可以在末尾添加节点
二是可以实现类似剪切的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 200px;
height: 150px;
border: 3px solid red;
}
#div2 {
width: 200px;
height: 150px;
border: 3px dashed green;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ulid">
<li>tom</li>
<li>mary</li>
<li>jack</li>
<li>haha</li>
</ul>
</div>
<div id="div2">
</div>
<input type="button" name="add" value="add" onclick="add()">
<script type="text/javascript">
function add() {
var div22= document.getElementById("div2");
var ul1= document.getElementById("ulid");
div22.appendChild(ul1);
}
</script>
</body>
</html>
* insertBefore() 在指定的子节点前插入新的子节点。
语法：insertBefore(newchild,refchild)
如：
<ul id="ulid">
<li>tom</li>
<li>mary</li>
<li>jack</li>
<li>haha</li>
</ul>
要在Jack前面添加hehe
1、先获取jack的标签对象lij
2、创建新节点：var lih = document.createElement("li");
3、创建文本：var text=document.createTextNode("hehe");
4、将文本添加到节点后：lih.appendChild(text);
5、获取到ul：var ul1 = getElementById("ulid");
5、通过父节点来加：ul1.insertBefore(lih,lij);
注意：没有insertAfter方法
删除节点：
removeChild()
- 基本的原则，是通过父节点来删除、
- 父节点.removeChild(被删除的节点);
替换节点：
replaceChild（newNode，oldNode）
- 用要替换的节点的父节点去调用
- newNode：新的节点
- oldNode：被替换的节点
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>replaceChild</title>
</head>
<body>
<ul id="ul1">
<li id="li1">text01</li>
<li id="li2">text02</li>
<li id="li3">text03</li>
<li id="li4">text04</li>
</ul>
<input type="button" name="re" value="replace" onclick="repalce1()">
<script type="text/javascript">
function repalce1() {
var li4= document.getElementById("li4");
var li5= document.createElement("li");
var text= document.createTextNode("ReplacedText");
li5.appendChild(text);
ul1.replaceChild(li5,li4);
}
</script>
</body>
</html>
*复制节点:
cloneNode(boolean):参数Boolean是指是否复制子节点
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clone</title>
</head>
<body>
<ul id="ul1">
<li id="li1">text01</li>
<li id="li2">text02</li>
<li id="li3">text03</li>
<li id="li4">text04</li>
</ul>
<div id="divid">
</div>
<input type="button" name="re" value="copy" onclick="copy()">
<script type="text/javascript">
function copy() {
var ul1= document.getElementById("ul1");
var clonecopy= ul1.cloneNode(true);
var divv= document.getElementById("divid");
divv.appendChild(clonecopy);
}
</script>
</body>
</html>
操作dom树的总结：
-获取节点：
getElementById();
getElementsByName();
getElementsByTagName();
- 删除节点：通过父节点删除
removeNode()
- 插入节点：
insertBefore()在某个节点之前插入
appendChild()在末尾添加，剪切粘贴
- 替换节点：通过父节点替换
replaceChild()
16、innerHTML属性
* 不是dom的组成部分，但大多数浏览器都支持
* 作用一:获取文本内容
<span id="1">哈哈</span>
document.getElementById("1").innerHTML == 哈哈
* 作用二：向标签里面设置内容（可以是html代码）
实际开发中用的很多
document.getElementById("1").innerHTML == "html代码"
17、练习：写一个时间的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clock</title>
</head>
<body>
<p id="time" size="3">时钟隐藏在这里</p>
<input type="button" value="显示时间" onclick="showTime()">
</body>
<script>
function showTime() {
setInterval("printTime()",1000);
}
function printTime(){
var t = document.getElementById("time");
t.innerHTML=new Date().toLocaleString();
}
</script>
</html>
18、练习：写一个全选/全不选复选框操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selAllNo</title>
<style>
body {
font-size:120%;
color: green;
}
</style>
</head>
<body>
<!-- 写两个复选框的 -->
<input type="checkbox" id="selAllNoId" name="selAllNo" onclick="selAllNo()">全选/全不选
<br>
<!-- 写一个球类的复选框 -->
<input type="checkbox" name="love" >篮球
<br>
<input type="checkbox" name="love" >排球
<br>
<input type="checkbox" name="love" >足球
<br>
<input type="checkbox" name="love" >羽毛球
<br>
<!-- 写三个按钮，对应三个事件 -->
<input type="button" name="selAll" value="全选" onclick="selAll(true)">
<input type="button" name="selNo" value="全不选" onclick="selAll(false)">
<input type="button" name="selOther" value="反选" onclick="selOther()">
<script type="text/javascript">
// 写全选或者全不选的方法
function selAll(flag) {
//将全选全不选的复选框打上√
document.getElementById("selAllNoId").checked=flag;
// 得到要操作的复选框标签对象
var loves=document.getElementsByName("love");
// 遍历数组,将每一个复选框的属性check属性设置成相应的属性
for(var i=0;i<loves.length;i++){
loves[i].checked=flag;
}
}
// 反选
function selOther() {
//得到操作对象
var lovess= document.getElementsByName("love");
//遍历每一个复选框分别判断他的属性checked，然后改变即可
for (var i = 0; i < lovess.length; i++) {
if(lovess[i].checked)
lovess[i].checked=false;
else lovess[i].checked=true;
}
}
// 全选/全不选
function selAllNo() {
if(document.getElementById("selAllNoId").checked)
selAll(true);
else selAll(false);
}
</script>
</body>
</html>
效果图：
19、下拉列表左右选择的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s{
width: 125px;
height: 200px;
}
#divLeft{
width: 150px;
height: 200px;
padding-left: 20PX;
float: left;
}
#divRight{
width: 150px;
height: 200px;
float: left;
}
.steps{
padding: 20px;
font-style:normal;
font-size:large;
color: green;
border: 2px dashed green;
}
.needs{
padding-top: 5px;
padding-bottom: 5px;
border: 2px dashed red;
}
</style>
</head>
<body>
<div class="needs">
需求：写两个，可以多选的下拉框，下面的按钮，分别可以实现移动选项到另一个下拉框里去
</div>
<br>
<pre class="steps">
思路：
1.得到目标下拉框的元素对象：getElementsById("选择框id")
2.获取选择框下面的子元素
子元素的集合==getElementsById("选择框id").getElementsByTagName("option");
3.遍历集合，判断每一个option是否被选中：
使用option的属性
-selected==true:被选中
-selected==false:未被选中
若是被选中，则将该option添加到目标下拉框中，注意此时集合的长度已经减一
4.添加使用appendChild()方法
</pre>
<!-- 两个下拉选择框,左右分布 -->
<!-- 第一个下拉框 -->
<div id="divLeft">
<select id="select1" class="s" name="left" multiple="multiple" >
<option value="选项1" class="leftOption">选项1</option>
<option value="选项2" class="leftOption">选项2</option>
<option value="选项3" class="leftOption">选项3</option>
<option value="选项4" class="leftOption">选项4</option>
<option value="选项5" class="leftOption">选项5</option>
<option value="选项6" class="leftOption">选项6</option>
<option value="选项7" class="leftOption">选项7</option>
</select>
<br>
<input type="button" name="selToRight" value="选中添加到右边>>" onclick="selTo('select1','select2')">
<br>
<input type="button" name="allToRight" value="全部添加到右边>>" onclick="allTo('select1','select2')">
</div>
<div id="divRight">
<select id="select2" class="s" name="right" multiple="multiple" >
<option value="选项8" class="rightOption">选项8</option>
</select>
<br>
<input type="button" name="selToLeft" value="<<选中添加到左边" onclick="selTo('select2','select1')">
<br>
<input type="button" name="allToLeft" value="<<全部添加到左边" onclick="allTo('select2','select1')">
</div>
<br>
<script type="text/javascript">
function selTo(selId,pasId) {
var s2=document.getElementById(pasId);
var s1= document.getElementById(selId);
var options1=s1.getElementsByTagName("option");//重要，注意不是使用document.getElementsByTagName
for (var i = 0; i < options1.length; i++) {
var option1=options1[i];
if(option1.selected==true){
s2.appendChild(option1);
i--;//每次若该i值对应的状态为选中，则将其添加到s2中，这时候长度就会减1，而i其实已经加1，必须-1来从当前的下一个元素来开始保证每次都遍历到所有的option
}
}
}
function allTo(selId,pasId) {
var sel=document.getElementById(selId);
var pas=document.getElementById(pasId);
var opss=sel.getElementsByTagName("option");
for (var i = 0; i < opss.length; i++) {
pas.appendChild(opss[i]);
i--;
}
}
</script>
</body>
</html>
20、省市联动案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="font-size:large;color: green" >
需求：两个下拉框，第一个下拉框里存放province，第二个下拉框里存放对应的city
当选择第一个下拉框的内容的时候，第二个下拉框里出现对应的city
</div>
<pre style="color: gray">
分析：
1、利用select 的onchange属性来选择，当选择一个值后，便执行一个脚本事件
2、将this.value作为函数的参数
3、将省对应的城市的数据暂时用二维数组来模拟，即将数据存放在二维数组里
4、遍历数组，得到每一个元素也是数组，将每个数组的第一个元素与参数比对，如果是就将剩下的元素添加到city下拉框
* 先创建一个元素option
* 创建文本，内容就是该元素的值
* 将文本添加到option中去，将option添加到city下拉框（先获取下拉框）
*
5、注意每次开始前先检查city框是否有内容，若有就将其全部清空
* 注意清空的时候的参数的变化
*
</pre>
<br>
<select name="province" id="pro" onchange="proToCity(this.value)">
<option value="0">请选择省份</option>
<option value="四川">四川</option>
<option value="浙江">浙江</option>
<option value="山东">山东</option>
<option value="广东">广东</option>
</select>
<select name="city" id="cityid">
</select>
<script type="text/javascript">
// 将城市的数据放在二维数组中
var pro=new Array(4);
pro[0] = ["四川","成都","资阳","内江","攀枝花","宜宾","广安","南充","乐山","泸州","绵阳"];
// alert(pro.length);
pro[1]=["浙江","杭州","宁波","温州","嘉兴","湖州","金华","台州","丽水","绍兴","舟山"];
pro[2]=["山东","济南","青岛","烟台","威海","东营","日照","聊城"];
pro[3]=["广东","广州","佛山","深圳","珠海","汕头","江门","台山"];
function proToCity(val) {
//获取city下拉框
var citys = document.getElementById("cityid");
//先查看city下拉框里面有没有内容
var ops=citys.getElementsByTagName("option");
for (var m = 0; m < ops.length; m++) {
citys.removeChild(ops[m]);
m--;
}
//遍历每一个二维数组，把第一个值拿出来与参数对比，如果是，就将剩下的元素添加到city里面去
for (var i = 0; i < pro.length; i++) {
//如果每个数组的第一个元素是参数，对每个数组再进行循环
if(pro[i][0] == val){
for (var j = 1; j < pro[i].length; j++) {
var op = document.createElement("option");
var text = document.createTextNode(pro[i][j]);
op.appendChild(text)
citys.appendChild(op);
}
}
}
}
</script>
</body>
</html>
21、动态生成表格案例
重在理解将表格放到变量中去，使用tab +="代码"以及innerHTML来实现表格的生成以及显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成表格</title>
</head>
<body>
<!-- 需求：在两个输入框中分别输入行数和列数，点击按钮则生成对应的表格 -->
<!-- 首先，创建页面 -->
行：<input type="text" id="row">
列：<input type="text" id="column">
<br>
<input type="button" value ="create" onclick="createTable()">
<!-- 创建div，用于显示表格 -->
<div id="tb">
</div>
<script type="text/javascript">
function createTable(){
// 首先得到输入的行和列的值
var r=document.getElementById("row").value;
var c=document.getElementById("column").value;
//两个循环生成表格
// 一个重要的思想：将表格放入变量中：
var tab = "<table border='2' bordercolor='blue'>";
for (var i = 0; i < r; i++) {
tab +="<tr>";
for (var j = 0; j < c; j++) {
tab += "<td>单元格</td>"
}
tab+="</tr>";
}
tab +="</table>";
// 获取div
var divt = document.getElementById("tb");
divt.innerHTML = tab;
}
</script>
</body>
</html>
关于dom和window的操作思维导图：
BOM、DOM、Window的关系图