JavaScript内置对象与DOM操作

一、javaScript对象的定义和使用

1.1对象定义：

javaScript对象分为3种：内置对象、浏览器对象、自定义对象。

1.1.1JavaScript 原始值

原始值指的是没有属性或方法的值。
原始数据类型指的是拥有原始值的数据。
JavaScript 定义了 5 种原始数据类型：

• string
• number
• boolean
• null
• undefined

原始值是一成不变的（它们是硬编码的，因此不能改变）。
假设 x = 3.14，您能够改变 x 的值。但是您无法改变 3.14 的值。

1.1.2对象属性

（1）添加新属性
可以通过简单的赋值，向已存在的对象添加新属性。
假设 person 对象已存在 - 那么可以为其添加新属性：

person.nationality = "English";

（2）删除属性

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
delete person.age;   // 或 delete person["age"];

1.1.3对象方法
在对象中创建的方法

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 648,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

1.2自定义对象

1.2.1使用对象字面量

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

1.2.2使用 JavaScript 关键词 new

var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";

出于简易性、可读性和执行速度的考虑，请使用第一种创建方法（对象文字方法）。

1.2.3使用工厂模式创建对象

  //使用工厂模式创建对象
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();

1.2.4使用自定义构造函数创建对象

//使用自定义构造函数创建对象
        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()

1.2.5请不要把字符串、数值和布尔值声明为对象！

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
您将在本教程的稍后章节学到更多有关对象的知识。

1.3JavaScript内置对象

1.3.1内置对象—Array数组

Array 对象用于在单个的变量中存储多个值。
（1）创建 Array 对象

 var a1 = new Array(); //定义一个空数组
 var a2 = new Array(10); //定义一个长度为10数组（值：undefined）
 var a3 = new Array(10,20,30); //定义一个指定数值的数组
 var a4 = [10,20,30,40,50]; //快捷定义数组

（2）Array 对象属性

（3）Array 对象方法

//数组的方法：
        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(":"));

（3）数组清空

  //清空
        var b = [10,50,30,20,70,40];
        console.log(b.join(":"));
        b.length = 0;//第一种
        console.log(b.join(":"));
        b = [];//第二种
        console.log(b.join(":"));

1.3.2内置对象—基本保装类型

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象

//内置对象--基本保装类型
        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));

1.3.3内置对象—Date日期对象

Date 对象用于处理日期和时间。
创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象属性

Date 对象方法

 //内置对象--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();
        //判断单位数字前补零操作
        d = d<10?'0'+d:d;
        m = m<10?'0'+m:m;
        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>");//2020-08-22 13:18:49

1.3.4内置对象—String字符串对象

String 对象用于处理文本（字符串）。
创建 String 对象的语法：

new String(s);
String(s);

String 对象属性

String 对象方法

 //内置对象--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()+"#");//除去多余字符

1.3.5内置对象—Math对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
Math 对象属性

Math 对象方法

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

二、JavaScript 事件

事件= 事件源+事件+事件处理程序
常见的 HTML 事件
下面是一些常见的 HTML 事件：

2.1JavaScript语言实例—单击事件

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

2.2JavaScript语言实例—定时器timing

（1）setTimeout() 方法
作用：多少ms后执行一次
window.setTimeout(function, milliseconds);
window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
实例:单击按钮。等待 3 秒，然后页面会提示 “Hello”：

<button onclick="setTimeout(myFunction, 3000)">试一试</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

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

示例：

  <h1>JavaScript语言实例--定时器</h1>
    <h2  id="hid">计数器：0</h2>
    <button onclick="doStop()">停止</button>



 var m=0,mytime=null;

    function doRun(){
        m++;
        document.getElementById("hid").innerHTML = "计数器："+m;

        mytime = setTimeout(doRun,1000);//隔1s执行doRun
    }

    doRun();

    function doStop(){//停止
        clearTimeout(mytime);
    }

（2）setInterval() 方法
在每个给定的时间间隔重复给定的函数。

setInterval(function, milliseconds);

第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
本例每秒执行一次函数 “myTimer”（就像数字手表）。
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

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

实列：显示当前时间

<p id="demo"></p>

<button onclick="clearInterval(myVar)">停止时间</button>

<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

2.3事件处理(事件绑定方式)

（1）主动方式

 <button onclick="fun()">按钮1</button>

function fun(){
         console.log("按钮1被点击了");
     }

（2）被动方式

<button id="bid">按钮2</button> 

document.getElementById("bid").onclick = function(){
        console.log("按钮2被点击了");
     }

2.4获取事件源对象

（1）主动绑定方式获取事件源

 <button onclick="fun(this)">按钮1</button>

function fun(ob){
         console.log("按钮1被点击了");
         ob.style.color = "green";    //通过this传入事件源
     }

（2）被动绑定方法获取事件源

<button id="bid">按钮2</button> 

document.getElementById("bid").onclick = function(){
        console.log("按钮2被点击了");
        this.style.color = "red";//this就是事件源
    }

     }

2.5dblclick双击事件

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

2.6contextmenu右击事件

<!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;//加window是为了老版本兼容

       //获取鼠标在网页中的点击位置
       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>

2.7mouse鼠标移入移出事件

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

2.8图片切换效果

<!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;//通过鼠标移入把选中的小图标的src赋值给大图标
        }
    }
</script>
</html>

2.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: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>

2.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{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>

2.11键盘事件onkeydown

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

2.12 load事件

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

2.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>

2.14change事件-下拉框操作

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

2.15scroll滚动条事件

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

三、JS BOM

3.1JS BOM的window对象(浏览器对象)

    indow 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 [document](https://www.w3school.com.cn/jsref/dom_obj_document.asp)，而不必写 window.document。<br />        同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。<br />        除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。

（1）Window 对象集合