目录
8.1.1 浏览器对象模型（Browser Object Model (BOM)）
五，javaScript内置对象与DOM操作
JavaScript中的对象分为3种:内置对象，浏览器对象、自定义对象。
1，JavaScript对象定义和使用
创建对象的方式：
- 原始方式创建对象；
- 工厂模式创建对象；
- 自定义构造函数创建对象；
- 直接创建自定义对象；
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1.使用原始的方式创建对象
var obj = new Object();
obj.name = "zhangsan"; //为obj对象添加属性
obj.age = 20;
obj.say = function(){ //添加功能（函数/方法）
console.log(this.name,":",this.age);
}
//测试
console.log(obj.name);
console.log(obj.age);
obj.say()
//2.使用工厂模式创建对象
function createObject(name,age){
var obj = new Object();
obj.name = name; //为obj对象添加属性
obj.age = age;
obj.say = function(){ //添加功能（函数/方法）
console.log(this.name,":",this.age);
}
return obj;
}
//测试
var ob1 = createObject("lisi",20);
console.log(ob1.name);
ob1.say();
var ob2 = createObject("wangwu",25);
console.log(ob2.name);
ob2.say();
console.log("=============================");
//3.使用自定义构造函数创建对象
function Stu(name,age){
this.name = name;
this.age = age;
this.say = function(){
console.log(this.name,":",this.age);
}
}
//测试
var s1 = new Stu("zhaoliu",28);
var s2 = new Stu("xiaoli",21);
s1.say()
s2.say()
console.log("=============================");
//4.直接创建自定义对象
var ob = {name:"qq",age:26};
console.log(ob.name);
console.log(ob.age);
var obj={};
obj.name="小白";
obj.say=function () {
console.log("我叫: "+this.name);
};
obj.say();
var obj2={
name:"小明",
age:20,
say:function () {
console.log("我叫: "+this.name+"; 年龄: "+this.age);
},
};
obj2.say();
var a = [10,20,30];
console.log(typeof(a));// 类型显示的是Object
console.log(a.constructor == Array);// 用此方法可以判断a的具体类型
console.log(s1 instanceof Stu);
</script>
</head>
<body>
<h1>JavaScript语言实例--对象的定义和使用</h1>
</body>
</html>2，JavaScript内置对象
2.1 Array数组
2.1.1 创建方式
- var a= new Array(); //创建一个空数组
- a = new Array(10); //创建一 个数组单元为10个的数组。
- a=new Array(18, 20, 38);//创建一 个指定数组单元的数组。
- a=["a","b","c","d"]; //快捷定义数组
2.1.2 常用属性：
- length：获取长度
2.1.3 常用方法：
- tostring()：把数组转换为字符串，并返回结果。
- sort()：对数组的元素进行排序
- join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
- pop()：删除并返回数组的最后-一个元素
- push()：向数组的末尾添加一个或更多元素，并返回新的长度。
- shift()：取出数组中的第一个元素， 修改length属性
- unshift()：在数组最前面插入项，返回数组的长度
- reverse()：反转数组
- concat()：把参数拼接到当前数组
2.1.4 清空数组:
- arr=[]; // 方式1推荐
- arr.length = 0; // 方式2
- arr.splice(0, arr.length); // 方式3
2.1.5 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//内置对象--Array数组
var a1 = new Array(); //定义一个空数组
var a2 = new Array(10); //定义一个长度为10数组（值：undefined）
var a3 = new Array(10,20,30); //定义一个指定数值的数组
console.log(a1.length);
console.log(a2.length);
console.log(a3.length);
var a4 = [10,20,30,40,50]; //快捷定义数组
//数组的遍历
for(var i=0; i<a4.length;i++){
console.log(i,"=>",a4[i]);
}
for(var i=a4.length-1; i>=0;i--){
console.log(i,"=>",a4[i]);
}
for(var i in a4){
console.log(i,"=>",a4[i]);
}
a4.forEach(function(v){
console.log(v);
});
//数组的方法：
console.log(a4.toString());
console.log(a4.join(":"));
var aa = [1,2,3];
console.log(aa.concat(4,5));
var b = [10,50,30,20,70,40];
console.log(b.join(":"));
console.log(b.sort().join(":"));
console.log(b.reverse().join(":"));
var aa = new Array(10,20,30);
console.log(aa.join(":"));
aa.push(50);
aa.push(40);
console.log(aa.join(":"));
aa.pop();
console.log(aa.join(":"));
//清空
console.log(b.join(":"));
b.length = 3;
console.log(b.join(":"));
b = [];
console.log(b.join(":"));
</script>
</head>
<body>
<h1>JavaScript语言实例--内置对象</h1>
</body>
</html>2.2 基本包装类型
基本包装类型
为了方便操作基本数据类型，JavaScript还提供了 三个特殊的引用类型: String/Number/Boolean
下面代码的问题?
s1是基本类型，基本类型是没有方法的
var s1 = 'zhangsan' ;
var s2 = s1. substring(5);当调用s1. substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法， 最后销毁临时对象
var s1 = new String( ' zhangsan');
var s2 = s1. substring(5);
s1 = null;创建基本包装类型的对象
var num =18;//数值，基本类型
var num = Number('18');//类型转换
var num = new Number(18);//基本包装类型，对象Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如:
var b1 = new Boolean(false);
var b2 = b1 && true;//结果是什么
2.3 Date日期
2.3.1 常用方法
var dd = new Date();
- getDate()：从Date对象返回一个月中的某一天(1 ~ 31)。
- getDay()：从Date对象返回一周中的某一天(0 ~ 6)。
- getMonth()：从Date对象返回月份(0 ~ 11)。
- getFullYear()：从Date对象以四位数字返回年份。
- getYear()：请使用getFullvear() 方法代替。
- getHours()：返回Date对象的小时(0~23)。
- getMinutes()：返回Date对象的分钟(0~59)。
- getseconds()：返回 Date对象的秒数(0~59)。
- getMilliseconds()：返回 Date 对象的毫秒(0~999)。
- getTime()：返回 1970年1月1日至今的毫秒数。
同上还有很多set方法用来设置。
2.3.2 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
//内置对象--Date日期对象
function formatDate(dd){
if(!dd instanceof Date){
return;
}
var y = dd.getFullYear(),
m = dd.getMonth()+1,
d = dd.getDate(),
hh = dd.getHours(),
mm = dd.getMinutes(),
ss = dd.getSeconds();
//判断单位数字前补零操作
hh = hh<10?'0'+hh:hh;
mm = mm<10?'0'+mm:mm;
ss = ss<10?'0'+ss:ss;
return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
}
var dd = new Date();
//从1970年1月1日零时零分0秒至今的毫秒数
document.write("时间戳："+dd.valueOf());
document.write("<h2>"+formatDate(dd)+"</h2>");
</script>
</html>2.4 String字符串
2.4.1 常用方法
- anchor()：创建HTHL锚。
- *charAt()：返回在指定位置的字符。
- charCodeAt()：返回在指定的位置的字符的Unicode 编码。
- *index0f()：检索字符串。
- *lastIndexOf()：从后向前搜索字符串。
- match()：找到一个或多个正在表达式的匹配。
- *replace()：替换与正则表达式匹配的子串。
- search()：检索与正则表达式相匹配的值。
- slice()：提职字符串的片断，并在新的字符串中返回被提取的部分。
- split()：把字符串分割为字符串数组。
- substr()：从起始索引号提取字符串中指定数目的字符。
- *substring()：提取字符串中两个指定的索引号之间的字符。
- tolocaleLowerCase()：把字符串转换为小写。
- tolocaleUpperCase()：把字符串转换为大写。
- *toLowerCase()：把字符申转换为小写。
- *toupperCase()：把字符串转换为大写。
2.4.2 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
//内置对象--String字符串对象
var s1 = "ZhangSanFeng";
document.write(s1+"<br/>");
document.write(s1[5]+"<br/>");
document.write(s1.charAt(5)+"<br/>");
document.write(s1.substr(5,3)+"<br/>");
document.write(s1.substring(5,8)+"<br/>");
document.write("小写："+s1.toLowerCase()+"<br/>");
document.write("大写："+s1.toUpperCase()+"<br/>");
//子串查找
document.write(s1.indexOf("an")+"<br/>");
document.write(s1.lastIndexOf("an")+"<br/>");
//替换
document.write(s1.replace("SanFeng","WuJi")+"<br/>");
//全部替换
document.write("10,20,30,40".replace(/,/g,":")+"<br/>");
var str = "10:23:45:67:87:65";
console.log(str);
console.log(str.split(":"));
var s2 = " zhangsan ";
console.log("#"+s2+"#");
console.log("#"+s2.trim()+"#");
</script>
</html>
2.5 Math对象
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
2.5.1 常用方法
- abs(x)：返回数的绝对值。
- ceil(x)：对数进行上舍入。
- floor(x)：对数进行下舍入。
- random()：返回0~1之间的随机数。
- round(x)：把数四舍 五入为最接近的整数。
- max(x,y)：返回x和y中的最高值。
- min(x,y)：返回x和y中的最低值。
2.5.2 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
//内置对象--Math对象
console.log(Math.abs(-20));
console.log(Math.ceil(10.000000001)); //进一取整
console.log(Math.floor(10.9999999)); //舍去取整
console.log(Math.round(10.5)); //四舍五入取整
console.log(Math.max(10,20)); //最大
console.log(Math.min(10,20)); //最小
console.log(Math.random()) //0~1的随机数
console.log(Math.ceil(Math.random()*1000000)%10+1) //1~10的随机数
</script>
</html>
2.6 Global
- escape(string)：可对字符串进行编码
- unescape(string)：函数可对通过escape() 编码的字符串进行解码。
- encodeURI(URIstring)：函数可把字符串作为URI 进行编码。
- decodeURI(URIstring)：函数可对encodeURI() 函数编码过的urI进行解码。
- peval(string)：函数可计算某个字符串，并执行其中的的JavaScript 代码。
- getClass(javaobj)：函数可返回一个Javaobject的JavaClass
- *isNaN(x)：函数用于检查其参数是否是非数字值。
- Number(object)：函数把对象的值转换为数字。
- *parsef loat(string)：还数可解析 一个字符串，并返回一个浮点数。
- *parseInt(string, radix)
3，JavaScript单击事件与元素标签操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--单击事件</h1>
<button onclick="fun()">点击我</button>
<ul id="uid">
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
<ol>
<li>1111111</li>
<li>2222222</li>
</ol>
</body>
<script>
function fun(){
console.log('hello js');
//获取id属性值为hid的元素标签
var hid = document.getElementById("hid");
//输出元素标签之间的文本内容
console.log(hid.innerHTML);
//修改标签之间的内容
hid.innerHTML = "JavaScript语言实例--元素操作";
//改变 HTML 元素的样式
hid.style.color = "red";
// hid.style.background-color = "#ddd";由于命名冲突 此代码报错时 可改为下面的代码
hid.style.backgroundColor = "#ddd";// 去掉-，并将-后的小写字母改为大写
}
//获取当前网页中的所有li元素标签
//var mlist = document.getElementsByTagName("li");
var mlist = document.getElementById("uid").getElementsByTagName("li");
//遍历输出
for(var i in mlist){
if(!isNaN(i)){
console.log(mlist[i].innerHTML);
mlist[i].style.color="red";
}
}
</script>
</html>4，JavaScript中的Timing定时事件
4.1 Timing事件
4.2 如何停止？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--定时器</h1>
<h2 id="hid">计数器：0</h2>
<button onclick="doStop()">停止</button>
</body>
<script>
var m=0,mytime=null;
function doRun(){
m++;
document.getElementById("hid").innerHTML = "计数器："+m;
mytime = setTimeout(doRun,1000);
}
doRun();
function doStop(){
clearTimeout(mytime);
}
/*
m = 0;
var mytime = setInterval(function(){
m++;
document.getElementById("hid").innerHTML = "计数器："+m;
},1000)
function doStop(){
clearInterval(mytime);
}
*/
/*
//定义时3秒后执行参数中的函数
setTimeout(function(){
console.log("Hello JS!");
},3000);
//定时每隔1秒执行参数回调函数一次
var m = 0;
setInterval(function(){
m++;
console.log("Hello "+m);
},1000)
*/
</script>
</html>5，JavaScript实现简单计算器实例
通过javascript进行简单的数据获取、计算、显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--简单计算器</h1>
<form action="" name="myform" method="get">
数值1：<input type="text" name="num1" size="10"/><br/><br/>
数值2：<input type="text" name="num2" size="10"/><br/><br/>
结 果：<input type="text" name="res" readonly style="border:0px;" size="10"/><br/><br/>
<input type="button" onclick="doFun(1)" value="加"/>
<input type="button" onclick="doFun(2)" value="减"/>
<input type="button" onclick="doFun(3)" value="乘"/>
<input type="button" onclick="doFun(4)" value="除"/>
</form>
</body>
<script>
//处理函数
function doFun(c){
var m1 = parseInt(document.myform.num1.value);
var m2 = parseInt(document.myform.num2.value);
//console.log(m1,m2);
switch(c){
case 1: var res = m1+"+"+m2+"="+(m1+m2); break;
case 2: var res = m1+"-"+m2+"="+(m1-m2); break;
case 3: var res = m1+"*"+m2+"="+(m1*m2); break;
case 4: var res = m1+"/"+m2+"="+(m1/m2); break;
}
//将结果放置到第三个输入框中
document.myform.res.value = res;
}
</script>
</html>6，JavaScript简单操作元素标签实例
通过JavaScript控制HTML元素大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--js操作元素标签属性（放大和缩小）</h1>
<button onclick="dofun(1)">放大</button>
<button onclick="dofun(2)">缩小</button>
<button onclick="dofun(3)">隐藏</button>
<br/><br/>
<div style="width:200px;height:200px;background-color:#ddd;" id="did"></div>
</body>
<script>
var width=200,height=200;
var did = document.getElementById("did");// 获取div节点
function dofun(m){
switch(m){
case 1:
width += 10;
height += 10;
did.style.width = width+"px";
did.style.height = height+"px";
break;
case 2:
width -= 10;
height -= 10;
did.style.width = width+"px";
did.style.height = height+"px";
break;
case 3:
did.style.display = "none";
break;
}
}
</script>
</html>7，JS事件处理
参考文档：HTML DOM Event 对象
7.1 事件绑定方式
事件源，事件，事件处理程序
举例介绍两种事件绑定方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1>JavaScript语言实例--事件处理(事件绑定方式)</h1>
<button onclick="fun()">按钮1</button>
<button id="bid">按钮2</button>
</body>
<script>
// 方式一
function fun(){
console.log("按钮1被点击了");
}
// 方式二
document.getElementById("bid").onclick = function(){
console.log("按钮2被点击了");
}
</script>
</html>7.2 获取事件源对象
两种事件绑定方式对应两种获取事件源对象的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1>JavaScript语言实例--获取事件源对象</h1>
<h2 onclick="fun(this)">2级标题1</h2>
<h2 id="hid">2级标题2</h2>
</body>
<script>
// function fun(){
// console.log("aaaaaaaaaa");
// //此种事件绑定方式，this表示外层对象，无法获取当前事件源对象
// console.log(this);
// }
// 方式一
function fun(ob){
console.log("aaaaaaaaaa");
console.log(ob);
ob.style.color = "green";
}
// 方式二
document.getElementById("hid").onclick = function(){
console.log("bbbbbbbbbbb");
//此种事件绑定方式，this就表示当前事件源对象
//console.log(this);
this.style.color = "red";
}
</script>
</html>7.3 bclick双击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
ul,li{margin:0px;padding:0px;}
ul{list-style:none;}
ul li{height:30px;margin-top:4px;background-color:#ddd;}
ul li:hover{background-color:#fc0;}
</style>
</head>
<body>
<h1>JavaScript语言实例--dblclick双击事件</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//获取上面所有的li元素节点
var mlist = document.getElementsByTagName("li");
//遍历绑定事件
for(var i=0;i<mlist.length;i++){
mlist[i].ondblclick = function(){
//设置背景颜色
this.style.backgroundColor = "#f0c";
}
}
</script>
</html>7.4 contextmenu右击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
ul,li{margin:0px;padding:0px;}
ul{list-style:none;width:100px;text-align:center;position:absolute;display:none;}
ul li{height:30px;line-height:30px;margin-top:4px;background-color:#ddd;}
ul li:hover{background-color:#fc0;}
</style>
</head>
<body>
<h1>JavaScript语言实例--contextmenu鼠标右击事件</h1>
<ul id="uid">
<li>剪切</li>
<li>复制</li>
<li>粘贴</li>
</ul>
</body>
<script>
document.oncontextmenu = function(ent){
// 获取兼容的事件对象
var event = ent || window.event;
// 获取鼠标在网页中的点击位置
var x = event.clientX;
var y = event.clientY;
console.log(x,y);
// 修改元素样式
var uid = document.getElementById("uid");
uid.style.top = y+"px";// 定位
uid.style.left = x+"px";
uid.style.display = "block";// 表示可见
// 设置为假，表示取消右键功能（有的网页这样做，这样也就无法进行右键复制了）
return false;
}
</script>
</html>7.5 mouse鼠标移入移出事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:384px;height:240px;}
#did img{display:none;}
#did img:first-child{display:block}
</style>
</head>
<body>
<h1>JavaScript语言实例--mouse鼠标移入和移出事件</h1>
<div id="did" onmouseover="doStop()" onmouseout="doStart()">
<img src="./images/11.jpg" width="384"/>
<img src="./images/22.jpg" width="384"/>
<img src="./images/33.jpg" width="384"/>
<img src="./images/44.jpg" width="384"/>
</div>
</body>
<script>
var m = 1;
var mytime = null;
//定义函数展示 指定的 图片
function show(x){
// 获取所有图片信息
var mlist = document.getElementById("did").getElementsByTagName("img");
// 遍历找到需要展示的图片
for(var i=0; i<mlist.length; i++){
if(x == i+1){
mlist[i].style.display = "block"; // 展示
}else{
mlist[i].style.display = "none"; // 隐藏
}
}
}
// 开启定时轮播图片
function doStart(){
if(mytime == null){
mytime = setInterval(function(){
m++;
show(m);
if(m>=4){
m = 0;
}
}, 2000);
}
}
// 停止轮播图片
function doStop(){
if(mytime != null){
clearInterval(mytime);
mytime = null;
}
}
// 初始时默认启动
doStart();
</script>
</html>7.6 图片切换
实际应用场景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:384px;height:240px;}
#list img{width:85px;border:2px solid #fff;margin-right:2px;}
#list img:hover{border:2px solid red;}
</style>
</head>
<body>
<h1>JavaScript语言实例--onmouseover鼠标移入事件</h1>
<div id="did">
<img id="mid" src="./images/11.jpg" width="384"/>
</div>
<div id="list">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
</body>
<script>
//获取所有小图列表
var mlist = document.getElementById("list").getElementsByTagName("img");
//遍历这些图片
for(var i=0; i<mlist.length; i++){
mlist[i].onmouseover = function(){
document.getElementById("mid").src = this.src;
}
}
</script>
</html>
7.7 放大镜效果
实际应用场景
所谓放大，其实并没有真实的放大（会变模糊），而是采用两张图片，当鼠标在小图片上移动时，大图根据鼠标位置进行相应的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
/* 设置原图为超出隐藏，这样就可以通过移动移动滚动条实现部分区域放大显示 */
#did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}
</style>
</head>
<body>
<h1>JavaScript语言实例--图片的放大镜效果</h1>
<br/><br/><br/>
<!-- 缩小版的图片 -->
<img id="mid" src="./images/33.jpg" width="384" height="240"/>
<!-- 原图 -->
<div id="did">
<img src="./images/33.jpg"/>
</div>
</body>
<script>
//获取被放大图片和放大镜图片对象
var mid = document.getElementById("mid");
var did = document.getElementById("did");
//为图片添加鼠标移入和移出事件
mid.onmouseover = function(){
//对放大镜进行定位
// 上对齐
did.style.top = this.offsetTop+"px";// 获取当前图片（小图）位置，由于只有尺寸，所以需要添加单位
// 定位到图片右侧
did.style.left = this.offsetLeft+this.offsetWidth+10+"px";
did.style.display = "block";
}
mid.onmouseout = function(){
did.style.display = "none";
}
//添加鼠标移动事件
mid.onmousemove = function(ent){
//获取兼容的鼠标事件对象
var event = ent || window.event;
//获取鼠标在图片上的位置
var x = event.clientX - this.offsetLeft;
var y = event.clientY -this.offsetTop;
//定位放大镜位置
did.scrollTop = y*5-150;// 不减的话，鼠标所在位置为放大区域的左上角，而通常做法是放在正中间
did.scrollLeft = x*5-150;// 由于放大区域是300*300，这里就进行减半，调整150即可
}
</script>
</html> 
7.8 拖动效果
重点是解决定位的问题：
- 1，一般图层的定位是根据其左上角顶点的位置+尺寸，进行确定；
- 2，当鼠标按下时，可以获取鼠标的当前位置。由于图层的大小及定位已知，这样就可以知道鼠标位置与图层左上角顶点的距离（x轴和y轴两个方向）；
- 3，当鼠标移动到新的位置时，根据鼠标的当前位置和已经计算好的鼠标与图层左上角的相对位置，就可以实时更新图层位置；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div{margin:0px;padding:0px;}
#did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}
</style>
</head>
<body>
<h1>JavaScript语言实例--拖动效果</h1>
<div id="did"></div>
</body>
<script>
//获取div层对象
var did = document.getElementById("did");
//绑定鼠标按下事件
did.onmousedown = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//获取鼠标在div层上的位置
var x = event.clientX-this.offsetLeft;
var y = event.clientY-this.offsetTop;
this.style.backgroundColor = "blue";
//绑定鼠标移动事件（使用document而不是did，可以避免滑动时丢失位置）
document.onmousemove = function(e){
var myevent = e || window.event;
//定位
did.style.top = myevent.clientY-y+"px";
did.style.left = myevent.clientX-x+"px";
}
}
//绑定鼠标松开事件
did.onmouseup = function(){
this.style.backgroundColor = "#ddd";
//取消移动事件
// did.onmousemove = null; 这样滑动时容易丢失位置，故采用document
document.onmousemove = null;
}
</script>
</html>7.9 keydown键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1>JavaScript语言实例--键盘事件onkeydown</h1>
</body>
<script>
window.document.onkeydown = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//输出键盘值
console.log(event.keyCode);
}
</script>
</html>7.10 load事件
1）由于一般程序是自上而下顺序运行的，所以当把JavaScript代码放在body前时，可能会报错。所以习惯将其放在body之后
2）但是可以通过onload，来实现把JavaScript代码放在body前，表示当页面加载完成后自动执行的程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<script>
//当页面加载完成后才自动执行的程序
window.onload = function(){
var hid = document.getElementById("hid");
hid.style.color="red";
}
</script>
</head>
<body>
<h1 id="hid">JavaScript语言实例--onload事件</h1>
</body>
</html>7.11 表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--表单事件</h1>
<form action="js10.html" name="myform" method="post" onsubmit="return doSubmit()">
账号：<input type="text" name="uname" onblur="checkUname()"/><br/><br/>
密码：<input type="password" name="upass" onblur="checkUpass()" /><br/><br/>
邮箱：<input type="text" name="email"/><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
<script>
//表单提交事件处理程序
function doSubmit(){
return checkUname() && checkUpass();
}
//验证账号
function checkUname(){
var name = document.myform.uname.value;
if(name.length<=0){
alert("账号不可以为空");
return false;
}
return true;
}
//验证密码
function checkUpass(){
var pass = document.myform.upass.value;
if(pass.length<6){
alert("密码必须大于等于6位");
return false;
}
return true;
}
</script>
</html>7.12 change事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--change事件</h1>
<select name="sid" id="sid">
<option value="">-请选择-</option>
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">天津</option>
<option value="4">河南</option>
<option value="5">山西</option>
</select>
<select id="cid"></select>
</body>
<script>
var data = new Array();
data[1] = ["海淀区","朝阳区","丰台区","昌平区"];
data[2] = ["石家庄","保定","邯郸","邢台"];
data[3] = ["河东区","河西区","河北区","南开区"];
data[4] = ["郑州","洛阳","开封","驻马店"];
data[5] = ["太原","大同","吕梁","运城"];
//获取两个下拉框元素对象
var sid = document.getElementById("sid");
var cid = document.getElementById("cid");
//绑定change事件
sid.onchange = function(){
//获取下拉框中的值
var v = this.value;
cid.length = 0; //删除cid的下拉项
//判断并循环对应城市信息
if(v != ""){
for(var i=0; i<data[v].length; i++){
//创建一个下拉项并添加到cid下拉框中
cid.add(new Option(data[v][i],i));
}
}
}
</script>
</html>
7.13 scroll滚动事件
应用场景：以京东商店为例，只有向下拖动滚动条之后，部分图片才显示出来，通过scroll滚动事件可以获得距离顶端的滚动距离，进而控制向后台获取信息的时机。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--滚动条事件</h1>
<div id="aid" style="height:500px;width:700px;background-color:#ddd;"></div>
<div id="bid" style="height:500px;width:700px;background-color:#eee;"></div>
</body>
<script>
window.onscroll = function(){
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
}else if(document.body){
scrollTop = document.body.scrollTop;
}
document.getElementById("bid").innerHTML = scrollTop;
}
</script>
</html>
8，JS BOM
详细的参考手册JavaScript 参考手册
8.1 window
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
8.1.1 浏览器对象模型（Browser Object Model (BOM)）
不存在浏览器对象模型（BOM）的官方标准。
现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。
8.1.2 Window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：
window.document.getElementById("header");等同于
document.getElementById("header");8.1.3 窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸：
- window.innerHeight - 浏览器窗口的内高度（以像素计）
- window.innerWidth - 浏览器窗口的内宽度（以像素计）
浏览器窗口（浏览器视口）不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或
- document.body.clientHeight
- document.body.clientWidth
一个实用的 JavaScript 解决方案（包括所有浏览器）：
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 8.1.4 详细的window对象、window对象方法
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。
同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。
Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。
举例：通过点击按钮打开新的页面，并使用alert进行消息提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--window</h1>
<iframe src="js02.html" width="500" height="500"></iframe>
<!-- open方法第二个参数用于给新窗口命名 命名之后重复点击此按钮不会弹出新的窗口 而是重复打开一个窗口 -->
<button onclick="window.open('js02.html','','width=200,height=100');">打开一个新窗口</button>
</body>
<script>
//document.write(window.frames.length);
//window.document.write("hello world!");
window.alert("ok");
b = window.confirm("确定要删除吗？");
if(b){
alert("yes");
}else{
alert("no");
}
var mstr = window.prompt("请输入你的邮箱？");
alert(mstr);
</script>
</html>8.2 navigator和screen
8.2.1 navigator对象
Navigator 对象包含有关浏览器的信息。
注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。
举例：展示浏览器信息，检测浏览器的类型并提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--navigator浏览器</h1>
</body>
<script type="text/javascript">
with(document) {
write ("你的浏览器信息：<ul>");
write ("<li>代码："+navigator.appCodeName+"</li>");
write ("<li>名称："+navigator.appName+"</li>");
write ("<li>版本："+navigator.appVersion+"</li>");
write ("<li>语言："+navigator.language+"</li>");
write ("<li>编译平台："+navigator.platform+"</li>");
write ("<li>用户表头："+navigator.userAgent+"</li>");
write ("</ul>");
}
//判断当前浏览器
var explorer =navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
alert("ie");
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
alert("Firefox");
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
alert("Chrome");
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
alert("Opera");
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("Safari");
}
//Netscape
else if(explorer.indexOf("Netscape")>= 0) {
alert('Netscape');
}
</script>
</html>8.2.2 screen对象
Screen 对象包含有关客户端显示屏幕的信息。
注释：没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。
举例：获取屏幕的尺寸和可用尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--screen对象</h1>
<a href="js04.html">js04.html</a><br/><br/>
</body>
<script>
document.write( "屏幕宽度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
document.write( "屏幕可用宽度："+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度："+screen.availHeight+"px<br/>" );
document.write( "宽度："+window.innerWidth+"px<br />" );
document.write( "高度："+window.innerHeight+"px<br />" );
</script>
</html>8.3 history和location
8.3.1 history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
举例：测试页面前进后退
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--history对象</h1>
<button onclick="window.history.back();">后退一步</button>
<button onclick="window.history.go(-1);">后退一步</button>
<button onclick="window.history.go(-2);">后退二步</button><br/><br/>
<button onclick="window.history.forward();">前进一步</button>
<button onclick="window.history.go(1);">前进一步</button>
<button onclick="window.history.go(2);">前进二步</button><br/><br/>
<a href="js03.html">js03.html</a><br/><br/>
</body>
<script>
</script>
</html>8.3.2 location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。
举例：在当前窗口进行页面的跳转和刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--location对象</h1>
<button onclick="window.location.href='http://www.baidu.com'">点击跳转到百度</button>
<button onclick="window.location.reload()">刷新</button>
<script type="text/javascript">
document.write("<br/>当前地址："+window.location.href);
</script>
</body>
<script>
</script>
</html>9，HTML DOM
JavaScript 参考手册（包含HTML DOM 对象参考手册）
9.1 介绍
9.1.1 HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
9.1.2 什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
9.1.3 什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
9.1.4 HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
下面是一些如何使用 document 对象来访问和操作 HTML 的实例。
查找 HTML 元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
改变 HTML 元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
添加事件处理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){ code} | 向 onclick 事件添加事件处理程序 |
查找 HTML 对象
首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。
| 属性 | 描述 | DOM |
|---|---|---|
| document.anchors | 返回拥有 name 属性的所有 <a> 元素。 | 1 |
| document.applets | 返回所有 <applet> 元素（HTML5 不建议使用） | 1 |
| document.baseURI | 返回文档的绝对基准 URI | 3 |
| document.body | 返回 <body> 元素 | 1 |
| document.cookie | 返回文档的 cookie | 1 |
| document.doctype | 返回文档的 doctype | 3 |
| document.documentElement | 返回 <html> 元素 | 3 |
| document.documentMode | 返回浏览器使用的模式 | 3 |
| document.documentURI | 返回文档的 URI | 3 |
| document.domain | 返回文档服务器的域名 | 1 |
| document.domConfig | 废弃。返回 DOM 配置 | 3 |
| document.embeds | 返回所有 <embed> 元素 | 3 |
| document.forms | 返回所有 <form> 元素 | 1 |
| document.head | 返回 <head> 元素 | 3 |
| document.images | 返回所有 <img> 元素 | 1 |
| document.implementation | 返回 DOM 实现 | 3 |
| document.inputEncoding | 返回文档的编码（字符集） | 3 |
| document.lastModified | 返回文档更新的日期和时间 | 3 |
| document.links | 返回拥有 href 属性的所有 <area> 和 <a> 元素 | 1 |
| document.readyState | 返回文档的（加载）状态 | 3 |
| document.referrer | 返回引用的 URI（链接文档） | 1 |
| document.scripts | 返回所有 <script> 元素 | 3 |
| document.strictErrorChecking | 返回是否强制执行错误检查 | 3 |
| document.title | 返回 <title> 元素 | 1 |
| document.URL | 返回文档的完整 URL | 1 |
9.1.5 举例
举例：通过节点的属性值，获取节点对象；遍历子节点对象；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
</head>
<body>
<!-- 注释说明 -->
<h1>JavaScript语言中HTML DOM</h1>
<h3>通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：</h3>
<ul>
<li>JavaScript 能改变页面中的所有 HTML 元素</li>
<li class="cc">JavaScript 能改变页面中的所有 HTML 属性</li>
<li>JavaScript 能改变页面中的所有 CSS 样式</li>
<li class="cc">JavaScript 能删除已有的 HTML 元素和属性</li>
<li>JavaScript 能添加新的 HTML 元素和属性</li>
<li>JavaScript 能对页面中所有已有的 HTML 事件作出反应</li>
<li>JavaScript 能在页面中创建新的 HTML 事件</li>
</ul>
<h3>我们重点学习HTML DOM的什么操作：</h3>
<ul>
<li>如何改变 HTML 元素的内容</li>
<li>如何改变 HTML 元素的样式（CSS）</li>
<li>如何对 HTML DOM 事件作出反应</li>
<li>如何添加和删除 HTML 元素</li>
</ul>
<h3>W3C DOM 标准被分为 3 个不同的部分：</h3>
<!-- li标签中的换行也会被当作文本节点 计算节点数时需要注意 -->
<ol id="oid"><li>Core DOM - 所有文档类型的标准模型</li><li>XML DOM - XML 文档的标准模型</li><li>HTML DOM - HTML 文档的标准模型</li></ol>
<a id="aid" href="http://www.baidu.com" title="百度链接">百度</a>
</body>
<script>
var aa = document.getElementById("aid");
console.log(aa);
console.log(aa.href);
console.log(aa.title);
aa.title = "百度22"; //修改属性
var h1 = document.getElementsByTagName("h1");
console.log(h1[0]);
h1[0].style.color = "red";
var clist = document.getElementsByClassName("cc");
for(var i=0;i<clist.length;i++){
console.log(clist[i])
}
var ol = document.getElementById("oid");
var olist = ol.childNodes;
console.log(olist.length);
for(var i=0;i<olist.length; i++){
console.log(olist[i]);
}
</script>
</html>举例：获取对象子节点相关信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
</head>
<body>
<!-- 注释说明 -->
<h1>JavaScript语言中HTML DOM</h1>
<h3 id ="hid">我们重点学习HTML DOM的什么操作：</h3>
<ul id="uid">
<li>如何改变 HTML 元素的内容</li>
<li>如何改变 HTML 元素的样式（CSS）</li>
<li>如何对 HTML DOM 事件作出反应</li>
<li>如何添加和删除 HTML 元素</li>
</ul>
</body>
<script>
//获取h3元素节点对象
var hid = document.getElementById("hid");
//输出当前节点的名字、值和类型
console.log(hid.nodeName); //H3
console.log(hid.nodeValue); //null
console.log(hid.nodeType); //1
//获取当前节点对象的第一个子节点的值和类型
console.log(hid.childNodes[0].nodeValue); //就是内容
console.log(hid.childNodes[0].nodeType); //3
</script>
</html>9.2 a链接操作
9.2.1 Anchor 对象
Anchor 对象表示 HTML 超链接。
在 HTML 文档中 <a> 标签每出现一次，就会创建 Anchor 对象。
锚可用于创建指向另一个文档的链接（通过 href 属性），或者创建文档内的书签（通过 name 属性）。
您可以通过搜索 Document 对象中的 anchors[] 数组来访问锚，或者使用 document.getElementById()。
9.2.2 举例
获取文档中的所有链接。通过anchor对象获取相应元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作</h1>
<ul>
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="https://www.163.com">网易</a></li>
<li><a href="https://www.sina.com">新浪</a></li>
<li><a href="https://www.qq.com">腾讯</a></li>
</ul>
</body>
<script>
//获取当前页面中的所有链接
//var alist = document.getElementsByTagName("a");
var alist = document.links;// 返回对文档中所有 Area 和 Link 对象引用
for(var i=0; i<alist.length; i++){
console.log(alist[i].href,alist[i].innerHTML);
alist[i].title = alist[i].innerHTML+"的链接";// 鼠标移上去时的提示
}
</script>
</html>9.3 img图片操作
通过延迟加载进行介绍。
为什么需要延迟加载？
网页在加载过程中，往往是先加载文字，然后是图片，最后是音频、视频等。而且是默认只加载第一版页面，当向下拉时，才会继续加载后面的内容
举例：延迟3秒加载图片
HLL-11_xuandong.gif（素材如下）
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作--图片延迟加载</h1>
<img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/>
<img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/>
<img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/>
<img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/>
</body>
<script>
setTimeout(function(){
//获取网页中所有的图片
var mlist = document.images;
//遍历
for(var i=0; i<mlist.length; i++){
// 需要通过getAttribute来获取属性值
mlist[i].src = mlist[i].getAttribute("res");
mlist[i].width = 100;
}
},3000);
</script>
</html>9.4 form表单操作
举例：获取表单中的元素信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作</h1>
<form></form>
<form action="js01.html" method="post" name="myform">
账号：<input type="text" name="uname" value="wangwu7"/><br/>
</form>
<button onclick="doSubmit()">点击提交</button>
</body>
<script>
console.log(document.forms.length);
//获取上面form表单中账号信息
console.log(document.forms[1].uname.value); //*常用
console.log(document.forms.item(1).uname.value);
console.log(document.myform.uname.value); //*常用
console.log(document['myform'].uname.value);
console.log(document.forms.myform.uname.value);
console.log(document.forms['myform'].uname.value);
function doSubmit(){
document.myform.action = "js02.html";
//document.myform.method = "get";
document.myform.submit(); //获取form表单并执行提交
}
</script>
</html>9.5 input多选框操作
举例：通过input的checkbox来了解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作</h1>
<ul>
<li><input type="checkbox" name="likes[]" value="篮球"/>篮球</li>
<li><input type="checkbox" name="likes[]" value="足球"/>足球</li>
<li><input type="checkbox" name="likes[]" value="羽毛球"/>羽毛球</li>
<li><input type="checkbox" name="likes[]" value="乒乓球"/>乒乓球</li>
<li><input type="checkbox" name="likes[]" value="棒球"/>棒球</li>
</ul>
<button onclick="dofun()">获取</button>
</body>
<script>
function dofun(){
//获取网页中所有input标签
var list = document.getElementsByTagName("input");
var res = new Array();
//遍历
for(var i=0; i<list.length; i++){
//判断是否是多选框并且已选中
if(list[i].type == "checkbox" && list[i].checked){
res.push(list[i].value);
}
}
alert(res);
}
</script>
</html>9.6 select操作
举例：通过调换选中元素位置，测试select操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
<style>
select{width:100px;height:200px;border:1px solid #ddd;float:left;}
div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
</style>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作-select对象</h1>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button onclick="doMove('sid1','sid2')">>></button>
<br/><br/><br/><br/>
<button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
function doMove(d1,d2){
//分别获取两个下拉框的元素节点对象
var select1 = document.getElementById(d1);
var select2 = document.getElementById(d2);
//获取第一个下拉框中所有的下拉项
var olist = select1.options;
//遍历
for(var i=0; i<olist.length; i++){
//console.log(olist[i].value);
//判断当前项是否被选中
if(olist[i].selected){
olist[i].selected = false; //取消选中
var ob = olist[i];
select1.remove(i);
select2.add(ob);
i--;// 因为列表中元素被删除 所以元素位置发生变化
}
}
}
</script>
</html>9.7 table表格操作
举例：通过点击删除、添加按钮，操作表格元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
<style>
select,option,div,button{margin:0px;padding:0px;}
#lid,#rid,div{
width:80px;
height:260px;
float:left;
}
div{
text-align:center;
padding-top:60px;
}
</style>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作-table对象</h1>
<table id="tid" width="500" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<h2>添加学生信息</h2>
<form action="#" name="myform" onsubmit="return doAdd()">
学号：<input type="text" name="sno"/><br/><br/>
姓名：<input type="text" name="name"/><br/><br/>
性别：<input type="text" name="sex"/><br/><br/>
年龄：<input type="text" name="age"/><br/><br/>
<input type="submit" value="添加"/>
</form>
</body>
<script>
//执行数据删除操作
function dodel(bt){
//获取当前表格元素节点对象
var tab = document.getElementById("tid");
tab.deleteRow(bt.parentNode.parentNode.rowIndex);
}
function doAdd(){
//获取输入框中的内容
var sno = document.myform.sno.value;
var name = document.myform.name.value;
var sex = document.myform.sex.value;
var age = document.myform.age.value;
//获取当前表格对象并申请添加一行
var row = document.getElementById("tid").insertRow();
//为当前行添加一个个字段信息
row.insertCell(0).innerHTML = sno;
row.insertCell(1).innerHTML = name;
row.insertCell(2).innerHTML = sex;
row.insertCell(3).innerHTML = age;
row.insertCell(4).innerHTML = '<button onclick="dodel(this)">删除</button>';
//清空form表单
document.myform.reset();
return false;
}
</script>
</html>10，XML DOM
10.1 介绍
XML 文档对象模型定义访问和操作XML文档的标准方法。
DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。
XML DOM 定义了访问和处理 XML 文档的标准方法。
XML DOM 是 XML Document Object Model 的缩写，即 XML 文档对象模型。
HTML DOM提供了一些属性和标签，但是在实际运用过程中，经常也会看到一些特殊的标签，这就是通过XML进行扩展的结果，可以实现HTML范畴以外的功能。
即对有些操作，HTML找不到解决方案，这时就需要通过XML来处理。
下面的图片展示出节点树的一个部分，以及节点间的关系：（和HTML类似）
10.1.1 解析 XML
所有现代浏览器都内建了用于读取和操作 XML 的 XML 解析器。
解析器把 XML 读入内存，并把它转换为可被 JavaScript 访问的 XML DOM 对象。
微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。
10.1.2 XML DOM 方法
- x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素
- x.appendChild(node) - 向 x 插入子节点
- x.removeChild(node) - 从 x 删除子节点
注释：在上面的列表中，x 是一个节点对象。
10.1.3 访问节点
可以通过三种方法来访问节点：
- 通过使用 getElementsByTagName() 方法
- 通过循环（遍历）节点树
- 通过利用节点的关系在节点树中导航
10.1.4 XML DOM 节点信息
节点的属性
在 XML 文档对象模型 (DOM) 中，每个节点都是一个对象。
对象拥有方法（功能）和属性（关于对象的信息），并可通过 JavaScript 进行访问和操作。
三个重要的 XML DOM 节点属性是：
- nodeName
- nodeValue
- nodeType
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性的值
nodeType 属性
nodeType 属性规定节点的类型。
nodeType 是只读的。
最重要的节点类型是：
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
10.1.5 XML DOM - Node 对象
Node 对象是整个 DOM 的主要数据类型。
节点对象代表文档树中的一个单独的节点。
节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。
请注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致 DOM 错误。
10.2 节点的遍历
举例：对比HTML DOM和XML DOM获取内容的差异
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
</head>
<body>
<!-- 注释说明 -->
<h1>XML DOM：节点的遍历</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
</body>
<script>
//获取ul中的所有li节点
var list = document.getElementById("uid").getElementsByTagName("li");
console.log("节点数量：",list.length);
//通过子节点获取（由于换行 子节点数可能和想的不一样）
var list2 = document.getElementById("uid").childNodes;
console.log("节点数量：",list2.length);
//节点的遍历
for(var i=0; i<list2.length; i++){
//console.log(list2[i].nodeType);\
//判断是否是元素节点
if(list2[i].nodeType == 1){
//console.log(list2[i].innerHTML); //HTML DOM获取内容
console.log(list2[i].firstChild.nodeValue); //XML DOM获取内容
}
}
</script>
</html>10.3 节点的删除
举例：鼠标移入、选择时显示不同的颜色。并删除特定颜色的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
ul{list-style:none;}
ul li{line-height:30px;background-color:#ddd;margin-top:2px;}
ul li:hover{background-color:#fc0;}
ul li.cc{background-color:#f0c;}
</style>
</head>
<body>
<h1>XML-DOM：节点的删除</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
<button onclick="doDel()">删除</button>
</body>
<script>
//获取所有ul中的li节点并绑定点击事件
var list = document.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
list[i].onclick = function(){
// 点击后为节点添加名为cc的class属性
// XML DOM教程中Element部分有关于方法setAttribute的介绍
this.setAttribute("class","cc");
}
}
//执行节点删除函数
function doDel(){
var list2 = document.getElementsByTagName("li");
//遍历
for(var i=0; i<list2.length; i++){
//判断当前li是否有class属性值为cc的
if(list2[i].getAttribute("class")=="cc"){
//执行删除（通过父节点来删除自己）
list2[i].parentNode.removeChild(list2[i]);
i--;
}
}
}
</script>
</html>10.4 节点属性操作
举例：通过XML DOM改变节点属性（这些属性不存在于HTML范畴之内）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
</head>
<body>
<h1>XML-DOM：改变节点的属性</h1>
<a id="aid" href="http://www.baidu.com">百度</a>
</body>
<script>
//获取上面超链接a元素节点
var a = document.getElementById("aid");
//通过已知的HTML DOM操作a节点属性
console.log(a.href);
a.title="百度网址";// title存在于HTML中 可以添加属性值
//a.aa = "bb"; //添加aa属性值为bb无效
//使用XML DOM操作节点a的属性
console.log(a.getAttribute("href"));
a.setAttribute("aa","bb"); //通过XML DOM可以添加任何属性和值
</script>
</html>10.5 节点的创建
举例：通过XML DOM进行节点创建、后追加、前追加。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
ul{list-style:none;}
ul li{line-height:30px;background-color:#ddd;margin-top:2px;width:100px;}
</style>
</head>
<body>
<h1>XML-DOM：节点的创建</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
名称：<input id="nid" type="text" size="10" name="name"/>
<button onclick="doAdd()">添加</button>
</body>
<script>
function doAdd(){
//获取输入框中的信息
var name = document.getElementById("nid").value;
//获取ul元素节点对象
var ul = document.getElementById("uid");
//创建一个文本节点
var tt = document.createTextNode(name);
//创建一个元素节点
var li = document.createElement("li"); //<li></li>
//将文件节点添加到li元素节点中
li.appendChild(tt);
//将li节点添加到ul中
//ul.appendChild(li); //后追加
ul.insertBefore(li,ul.firstChild); //前插入
}
</script>
</html>10.6 节点的克隆
举例：双击图片，将小图标展示在指定展示框中（克隆是指，将图片节点复制一份，传送过去，否则会导致原节点消失）
注：网页中所有的节点，都是对象，如果不通过creat方式创建新节点的话，那么在这个网页内节点都是唯一的。所以需要克隆的方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
#did{width:400px;height:300px;border:1px solid blue;}
img{width:80px;border:2px solid #fff;margin:2px;}
img:hover{border:2px solid red;}
</style>
</head>
<body>
<h1>XML-DOM：节点的克隆</h1>
<div id="did"></div>
<div id="mid">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
<h4>双击图片可实现图片的添加</h4>
</body>
<script>
//获取mid中的所有图片节点
var list = document.getElementById("mid").getElementsByTagName("img");
//遍历添加鼠标双击事件
for(var i=0; i<list.length; i++){
list[i].ondblclick = function(){
//获取did节点
var did = document.getElementById("did");
//将当前图片节点克隆一份添加到did元素节点中
did.appendChild(this.cloneNode());
// 这样是将此图片直接移动过去
// did.appendChild(this);
}
}
</script>
</html>10.7 节点的替换
举例：通过双击事件，将图片替换掉窗口内的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
#did{width:400px;border:1px solid blue;}
#did img{width:400px;}
#mid img{width:80px;border:2px solid #fff;margin:2px;}
#mid img:hover{border:2px solid red;}
</style>
</head>
<body>
<h1>XML-DOM：节点的替换</h1>
<div id="did"><img src="./images/11.jpg"/></div>
<div id="mid">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
<h4>双击图片可实现图片的替换</h4>
</body>
<script>
//获取id属性值为did的节点对象
var did = document.getElementById("did");
//获取id属性值为mid节点中的所有图片img元素节点
var list = document.getElementById("mid").getElementsByTagName("img");
//遍历图片节点，并绑定鼠标双击事件
for(var i=0; i<list.length; i++){
list[i].ondblclick = function(){
did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换
}
}
</script>
</html>10.8 selecti选项
举例：通过XML DOM操作，移动选择项。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
select{width:100px;height:200px;border:1px solid #ddd;float:left;}
div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
</style>
</head>
<body>
<h1>XML DOM 操作-select对象</h1>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button onclick="doMove('sid1','sid2')">>></button>
<br/><br/><br/><br/>
<button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
function doMove(d1,d2){
//获取对应的下拉框节点对象
var select1 = document.getElementById(d1);
var select2 = document.getElementById(d2);
//获取第一个下拉框中的所有option下拉项节点对象
var list = select1.getElementsByTagName("option");
//遍历并判断是否选中
for(var i=0; i<list.length; i++){
if(list[i].selected){
list[i].selected = false;
select2.appendChild(list[i]); //使用XML DOM移动下拉项
i--;
}
}
}
</script>
</html>10.9 table表格
举例：通过XML DOM而不是table标签相关方法操作表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
select,option,div,button{margin:0px;padding:0px;}
#lid,#rid,div{
width:80px;
height:260px;
float:left;
}
div{
text-align:center;
padding-top:60px;
}
</style>
</head>
<body>
<h1>JavaScript语言中XML DOM 操作-table对象</h1>
<table id="tid" width="500" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<h2>添加学生信息</h2>
<form action="#" name="myform" onsubmit="return doAdd()">
学号：<input type="text" name="sno"/><br/><br/>
姓名：<input type="text" name="name"/><br/><br/>
性别：<input type="text" name="sex"/><br/><br/>
年龄：<input type="text" name="age"/><br/><br/>
<input type="submit" value="添加"/>
</form>
</body>
<script>
//执行数据删除操作
function dodel(bt){
bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode);
}
function doAdd(){
//获取表单信息
var data = new Array();
data[0] = document.myform.sno.value;
data[1] = document.myform.name.value;
data[2] = document.myform.sex.value;
data[3] = document.myform.age.value;
//获取tbody元素节点对象
var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0];
//创建一个元素节点tr
var tr = document.createElement("tr");
//遍历数据并创建td节点
for(var i=0; i<data.length; i++){
var td = document.createElement("td");
var text = document.createTextNode(data[i]);
td.appendChild(text);
tr.appendChild(td);
}
//添加删除按钮
var td = document.createElement("td");
td.innerHTML = '<button onclick="dodel(this)">删除</button>';
tr.appendChild(td);
//将行节点tr放置到tbody中
tbody.appendChild(tr);
//清空表单
document.myform.reset();
return false;
}
</script>
</html>章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】
对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731
有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]