DOM:文档对象模型（Document Object Model）

1、对象定义和使用

主要使用以下4种方法：

• 原始方式创建

因为对象的属性可以在对象创建后动态定义，所有许多开发者都在 JavaScript 最初引入时编写类似下面的代码：

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

这里有一个问题，就是如果有多个car，那么就可能需要创建多个 car 的实例，然后再一一的执行上述操作，较为繁琐，最好是能够把一些共性的东西放在一起，个性的东西再各自编写。

• 工厂函数（factory function）。

要解决该问题，开发者创造了能创建并返回特定类型的对象的工厂函数（factory function）。

function createCar() {
  var oTempCar = new Object;
  oTempCar.color = "blue";
  oTempCar.doors = 4;
  oTempCar.mpg = 25;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}

var oCar1 = createCar();
var oCar2 = createCar();

还可以通过传递参数的方式，创建不同的对象。

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);

oCar1.showColor();        //输出 "red"
oCar2.showColor();        //输出 "blue"

• 构造函数方式 ```javascript function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.showColor = function() { alert(this.color); }; }

var oCar1 = new Car(“red”,4,23); var oCar2 = new Car(“blue”,3,25);

上面的代码与工厂方式的差别:<br />首先在构造函数内没有创建对象，而是使用 this 关键字。使用 new 运算符构造函数时，在执行第一行代码前先创建一个对象，只有用 this 才能访问该对象。然后可以直接赋予 this 属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。

- 直接创建自定义对象
```javascript
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();

更多的详细解释见：ECMAScript 定义类或对象

2、对象类型

在 ECMAScript 中，所有对象并非同等创建的。
一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。

1、本地对象

ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：

• Object
• Function
• Array
• String
• Boolean
• Number
• Date
• RegExp
• Error
• EvalError
• RangeError
• ReferenceError
• SyntaxError
• TypeError
• URIError

  2、内置对象

  ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。

  3、宿主对象

  所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。
  所有 BOM 和 DOM 对象都是宿主对象。

  3、Array数组

  Array 对象用于在单个的变量中存储多个值。

1、创建 Array 对象的语法：

new Array();
new Array(size);
new Array(element0, element1, …, elementn);

• 参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。
参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

• 返回值

返回新创建并被初始化了的数组。
如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。
当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。
当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。
当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

2、Array 对象属性

3、Array 对象方法

资料来自W3school：JavaScript Array 对象

4、代码演示：

//内置对象--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(":"));

4、String, Number, Boolean

1、String 对象方法

需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。
演示：

//内置对象--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()+"#");

trim方法为去除左右两侧空白。

2、Number 对象方法

3、Boolean 对象方法

当调用 toString() 方法将布尔值转换成字符串时（通常是由 JavaScript 隐式地调用），JavaScript 会内在地将这个布尔值转换成一个临时的 Boolean 对象，然后调用这个对象的 toString() 方法。

4、代码演示

//内置对象--基本保装类型
var s1 = 'zhangsan';
console.log(s1.substring(2,5))
//等价于
var s2 = new String("zhangsan");
console.log(s2.substring(2,5));

var num = 20.5678;
var num = new Number(20.5678);
console.log(num.toFixed(2));

5、Date

Date 对象用于处理日期和时间。

1、Date 对象方法

2、代码演示

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>");

6、Math

1、Math 对象方法

2、代码演示

//内置对象--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的随机数

7、事件

1、Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

2、事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

需要注意的是onload事件。我们之前的js脚本都是写在body之后，这是因为浏览器的解析方式是从上到下，如果写在上面，会不起效果，因为下边的具体内容还没有加载，它根本就获取不到元素。所以就需要onload来解决，即等待页面加载完毕再执行。

3、鼠标 / 键盘属性

4、Timing 事件

window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数。setInterval(function, milliseconds)等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

1、setTimeout() 方法

window.setTimeout(function, milliseconds);
window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。

2、如何停止执行？

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不带 window 前缀来写。
clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

3、setInterval() 方法

setInterval() 方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);
window.setInterval() 方法可以不带 window 前缀来写。
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。

4、如何停止执行？

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。
window.clearInterval(timerVariable)
window.clearInterval() 方法可以不带 window 前缀来写。
clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

5、事件绑定

• 在元素中添加事件
• 在js中获取元素再指定事件

两种方式的演示：

<!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>

6、简单计算器案例

<!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>

readonly属性: 对输入框只读属性

7、简单操作元素标签案例

<!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>
    <button onclick="dofun(4)">显示</button>
    <br/><br/>
    <div style="width:200px;height:200px;background-color:blue;" id="did"></div>
</body>
<script>
    var width=200,height=200;
    var did = document.getElementById("did");

    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;
            case 4:
                did.style.display = "block";
                break;
        }
    }
</script>
</html>

8、鼠标右击菜单

<!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>

9、图片自动播放效果

<!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;
                }
            }, 1000);
        }
    }

    //停止轮播图片
    function doStop(){
        if(mytime != null){
            clearInterval(mytime);
            mytime = null;
        }
    }

    doStart();
</script>
</html>

10、鼠标移入小图切换大图效果

<!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>

11、图片的放大镜效果

<!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;
    }
</script>
</html>

12、拖动效果

<!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.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";
        //取消移动事件
        document.onmousemove = null;
   }
</script>
</html>

13、表单提交提示案例

<!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>

14、自适应下拉选项案例

<!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>

15、滚动条事件案例

当我们打开淘宝，京东等电商网站的时候，会发现随着右侧竖向滚动条的滚动，它会加载新的东西，这就是通过滚动条事件触发的。

<!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、BOM

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话

1、window

所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：
window.document.getElementById(“header”);
等同于：
document.getElementById(“header”);

Window 对象属性

Window 对象方法

代码演示：

<!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>
    <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>

2、Navigator

Navigator 对象包含有关浏览器的信息。

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>

3、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>

4、History

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象属性

History 对象方法

代码演示

<!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>

5、Location

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象属性

Location 对象方法

代码演示

<!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

1、什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

• Core DOM - 所有文档类型的标准模型
• XML DOM - XML 文档的标准模型

• HTML DOM - HTML 文档的标准模型

  2、什么是 HTML DOM？

  HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

• 作为对象的 HTML 元素

• 所有 HTML 元素的属性
• 访问所有 HTML 元素的方法
• 所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
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 事件

  3、DOM 节点

  在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
  DOM 节点：
  根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点

• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）
• 每个节点都有父节点、除了根（它没有父节点）
• 一个节点可拥有任意数量的子
• 同胞是拥有相同父节点的节点

  4、查找 HTML 元素

  | 方法 | 描述 | | :—- | :—- | | document.getElementById(id) | 通过元素 id 来查找元素 | | document.getElementsByTagName(name) | 通过标签名来查找元素 | | document.getElementsByClassName(name) | 通过类名来查找元素 |

5、改变 HTML 元素

6、添加和删除元素

7、添加事件处理程序

8、查找 HTML 对象

首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有 元素。	1
document.applets	返回所有 元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回 元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回 元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有 元素	3
document.forms	返回所有 元素	1
document.head	返回 元素	3
document.images	返回所有 元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有 和 元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有