Unit06：外部对象概述、 window 对象、 document 对象

js
1.基本语法

2.数据类型

特殊对象
内部对象
外部对象
外部对象就是浏览器提供的API-BOM
自定义对象

3.事件

外部对象

1. 外部对象就是浏览器的API
2. 外部对象包括BOM和DOM，两者是包含关系

BOM

Browser Object Model:浏览器对象模型，用来访问和操纵浏览器窗口，使JavaScript有能力与浏览器“对话”
- 通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作
- 没有相关标准,但广泛支持

DOM

Document Object Model:文档对象模型，用来操作文档
- 定义访问和操作HTML文档的标准方法
- 应用程序通过对DOM树的操作，来实现对HTML文档数据的操作

JAVAJSD_V01WEBBASICDAY06_007.png

JAVAJSD_V01WEBBASICDAY06_008.png

window对象

window表示浏览器窗口
- 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
常用属性
- document: 窗口显示的HTML文档对象
- history: 浏览过的窗口的历史记录对象
- location: 窗口文件地址对象
- screen: 当前屏幕对象
- navigator: （导航，领航员）浏览器相关信息
常用方法
- alert() (提醒),confim() (确认)
- setTimeout(),clearTimeout();
- setInterval(),claerInterval() Interval (间隔休息事件);

对话框

alert(str)
- 提示对话框,显示str字符串的内容
confirm(str)
- 确认对话框,显示str字符串的内容
- 按“确定”按钮返回true，其他操作返回false

定时器

多用于网页动态时钟、制作倒计时、跑马灯效果等
周期性时钟
- 以一定的间隔执行代码,循环往复
一次性时钟
- 在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

周期性定时器

setInterval(exp,time) : 周期性触发代码exp
- exp : 执行语句
- time : 时间周期，单位为毫秒
- 返回已经启动的定时器对象

cleaarInterval(tID) : 停止启动的定时器

tID : 启动的定时器对象

    window.setInterval("alert('hello');",3000);
    //或者
    window.setInterval(func,3000);
    
    function func() {
        alert("hello");
    }

动态时钟的启动和停止

<!DOCTYPE html>
<html>
  <head>
    <title>动态时钟</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      var timer;
      function start() {
        timer = setInterval(function(){
          var now = new Date();
          var time = now.toLocaleTimeString();
          var c = document.getElementById("clock");
          c.innerHTML = time;
        }, 1000);
      }
      function stop() {
        clearInterval(timer);
      }
    </script>
  </head>
  <body>
    <h1>动态时钟</h1>
    <p>当前时间：<span id="clock"></span></p>
    <p>
      <input type="button" value="启动" onclick="start();"/>
      <input type="button" value="停止" onclick="stop();"/>
    </p>
  </body>
</html>

1.显示当前时间
2.启动时钟
3.停止时钟

一次性定时器

setTimeout(exp,time) : 一次性触发代码
- exp : 执行语句
- time : 间隔时间，单位为毫秒
- 返回已经启动的定时器

clearTimeout(tID) : 停止启动的定时器

tID : 启动的定时器对象

window.setTimeout("alert('hello');",3000);
//或者
window.setTimeout(func,3000);

function func() {
    alert("hello");
}

动态时钟

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时钟</title>
<style>
    #screen  {
        border: 1px solid red;
        width: 200px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
    }
    
</style>
<script>
    var id;
    function start() {
        //若id非空,表示定时器已启动,不要再次启动
        if(id) {
            return;
        }
        id = setInterval(function(){
            //获取当前时间
            var date = new Date();
            //转换为本地格式
            var time = date.toLocaleTimeString()
            //将时间写入段落
            var p = document.getElementById("screen");
            p.innerHTML = time;
        },1000);
    }
    function stop() {
        clearInterval(id);
        //清空id,以便于下次启动
        id = null;
    }
</script>
</head>
<body>
    <input type="button" value="开始" onclick="start();"/>
    <input type="button" value="停止" onclick="stop();"/>
    <p id="screen"></p>
</body>
</html>

定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script type="text/javascript">
    //周期性的定时器
    function f1() {
        var n = 5;
        //启动周期性定时器：
        //每隔1000毫秒，让浏览器调用一次函数.
        //返回值是定时器的id,用于停止定时器.
        var id = setInterval(function(){
            console.log(n--);
            if(n<0) {
                //停止计时器
                clearInterval(id);
                console.log("炸!");
            }
        },1000);
        //启动的定时器类似于一个子线程,
        //当前的方法f1类似于主线程(main)
        //两者并发执行,即主线程启动完子线程后,
        //立即输出BOM,而子线程却在1秒后执行第一次
        console.log("BOOM!");
    }
    //一次性定时器
    var id;
    function f2() {
        //启动一次性定时器
        //在5000毫秒后，让浏览器调用函数.
        //调用完成后,定时器会自动结束.
        //也可以在未调用前,手动结束。
        id = setTimeout(function(){
            console.log("啪!");
        },5000);
    }
    function f3() {
        clearTimeout(id);
        console.log("取消预备!");
    }
</script>
</head>
<body>
    <input type="button" value="倒数" onclick="f1();">
    <input type="button" value="预备" onclick="f2();">
    <input type="button" value="取消" onclick="f3();">
</body>
</html>

常用属性

scree对象

screen 对象包含有客户端显示屏幕的信息
常用于获取屏幕的分辨率和色彩
常用属性
- width/height
- availWidth/availHeight

history对象

history对象包含用户（在浏览器窗口中）访问过的URL
- lengtn属性：浏览器历史列表中的URL数量

方法

back()
forward()
go(num)

    alert(history.length);
    History.forward(); //等同于单击“前进”按钮
    history.back();   //等同于单击“后退”按钮
    history.go(-2);  //等同于单击两次“后退”按钮

location 对象

location 对象包含有关当前URL的信息
- 常用于获取和改变当前浏览的网址
href属性：当前窗口正在浏览的网页地址

方法

reload() : 重新载入当前网址，

    location.href = "http://www.tmooc.cn";

navigator 对象

navigator 对象包含有关浏览器的信息
- 常用于获取客户端浏览器和操作系统信息
```
    navigator.userAgent;
```

document对象

JAVAJSD_V01WEBBASICDAY06_025.png

DOM 概述

Document Object Model : 文档对象模型
- 当网页被加载时，浏览器会创建页面的文档对象模型
通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。
- JavaScript 能够改变页面中的所有HTML元素
- JavaScript 能够改变页面中的所有HTML属性
- JavaScript 能够改变页面中的所有CSS样式
- JavaScript 能够对页面中的所有事件做出反应

DOM 节点树

DOM 模型被构造为对象的树
这颗树的根就是document对象

2017-11-08 20-04-33 的屏幕截图.png

DOM 操作

DOM提供了如下操作
- 查找节点
- 读取节点信息
- 修改节点信息
- 创建新节点
- 删除节点

读取、修改

节点信息
- 元素节点和属性节点：标签或属性名称
- 文本节点：永远是#text
- 文档节点：永远是#document

nodeType : 节点类型

返回数值
元素节点：返回1
属性节点：返回2
文本节点：返回3
注释节点：返回8
文档节点：返回9

    <select>
        <option id="o1" value="1">a</option>
        <option value="2">b</option>
    <select>

    var o1 = document.getElementById("o1");
    var s = "option节点名："+o1.nodeName+";option节点类型："+o1.nodeType;
    alert(s);

元素节点的1内容

innerText
- 设置或获取位于对象起始和结束标签内的文本
innerHTML
- 设置或获取位于对象起始和结束标签内的HTML

元素节点的内容

    <div id="div1">
        第一行文本
        <p>段落中的文本</p>
    <div>

    var div = document.getElementById("div1");
    var str = div.innerText+"\n"+div.innerHTML;
    alert(str);

2017-11-08 20-24-25 的屏幕截图.png

节点属性

getAttribute()方法：根据属性名称获取属性的值
setAttribute()、removeAttribute()

    <a href="Default.aspx" title="this is a link" id="a1">Click Me</a>

    var a1 = document.getElementById("a1");
    var href = a1.getAttribute("href");
    alert(href);
    alert(a1.innerHTML);

2017-11-08 20-31-26 的屏幕截图.png

将HTML标记、属性和CSS样式都对象化

    <a href="Default.aspx" id="a1">Click Me</a>
    <img src="ball.jpg" id="img1"/>

    var a1 = document.getElementById("a1");
    alert(a1.href);
    a1.innerHTML = "new text";
    
    document.getElementBy("img1").src = "clock.jpg";

元素节点的样式

style 属性
- node.style.color
- node.style.fontSize
className 属性
```
 一周畅销榜
```
var o = document.getElementById("p1");
o.style.color = "red";
o.style.fontSize = 20;
//或者
o.className = "样式类名称";

图片轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
    div {
        width: 218px;
        height: 218px;
        border: 1px solid red;
        margin: 30px auto;
    }
    .hide {
        display:none;
    }
</style>
<script>
    window.onload=function() {
        start();
    }
    var id;
    //轮播次数
    var n = 0;
    function start() {
        id = setInterval(function(){
            n++;
            //获取所有图片标签
            var imgs = document.getElementsByTagName("img");
            //将所有图片先隐藏
            for(var i=0;i<imgs.length;i++){
                imgs[i].className = "hide";
            }
            //将下一个图片显示
            var next = n%imgs.length;
            imgs[next].className="";
        },2000);
    }
    function stop() {
        clearInterval(id);
    }
    
</script>
</head>
<body>
    <!-- hover:伪类选择器.
        onmouseover:鼠标悬停事件.
        onmouseout:鼠标离开事件. -->
    <div onmouseover="stop();" onmouseout="start();">
        <img src="../images/01.jpg" class=""/>
        <img src="../images/02.jpg" class="hide"/>
        <img src="../images/03.jpg" class="hide"/>
        <img src="../images/04.jpg" class="hide"/>
        <img src="../images/05.jpg" class="hide"/>
        <img src="../images/06.jpg" class="hide"/>
    </div>
</body>
</html>

查询

查询节点

如果需要操作HTML元素，必须首先找到该元素
查询节点的方式
- 通过id查询
- 通过层次（节点关系）查询
- 通过标签名称查询
- 通过name属性查询

根据元素id查询节点

document.getElementById()
- 通过指定的ID来返回元素的节点，忽略文档的结构
- 查找整个HTML文档中的任何HTML元素
- 如果ID值错误，则返回null
```
 一周畅销榜
```
```
 var o = document.getElementById("p1");
 alert(o.innerHTML);
```

根据层次查询节点

parentNode
- 遵循文档的上下层次结构，查找单个父节点
childNodes
- 遵循文档的上下层次结构，查询多个子节点

根据标签名查询节点

getElementsByTagName()
- 根据指定的标签名称返回所有的元素
- 忽略文档的结构
- 查找整个HTML文档中的所有元素
- 如果标签名称错误，则返回长度为0的节点列表

返回一个节点列表（数组）

使用节点列表的length属性获取个数
[index] : 定位具体的元素

    <body>
        <p>段落1</p>
        <div>
            <p>div中的段落1</p>
            <p>div中的段落2</p>
        <div>
    </body>

    var pNodes = document.getElementsByTagName("p");
    alert(pNodes.length);//3
    alert(pNodes[1].innerHTML); //div中的段落1

getElementsByTagName方法忽略文档的结构
对document进行查询，即，在整颗树上查询

   <body>
       <p>段落1</p>
         <div id="div1">
            <p>div中的段落1</p>
            <p>div中的段落2</p>
         <div>
   </body>

    var divObj = document.getElementById("div1");
    var pNodes = divObj.getElementsByTagName("p");
    alert(pNodes.length); //2
    alert(pNodes[1].innerHTML); //div中的段落2

对div进行查询，则，只在div的范围内查询

根据name属性查询节点

document.getElementsByName()

根据标签的name属性的值进行查询

    <input type="radio" name="sex" value="0"/>male
    <input type="radio" name="sex" value="1"/>female
    <br/><br/>
    <input type="radio" name="state" value="0"/>开通
    <input type="radio" name="state" value="1"/>暂停
    <input type="radio" name="state" value="1"/>删除

    var nodes = document.getElementsByName("sex");
    alert(nodes.length);  //2
    
    nodes = document.getElementsByName("state");
    alert(nodes.length);  //3

最后编辑于：2017.12.11 12:22:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,376评论 6赞 491
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,126评论 2赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 156,966评论 0赞 347
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,432评论 1赞 283
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,519评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,792评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,933评论 3赞 406
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,701评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,143评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,488评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,626评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,292评论 4赞 329
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,896评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,742评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,977评论 1赞 265
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,324评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,494评论 2赞 348

Unit06： 外部对象概述 、 window 对象 、 document 对象

外部对象

BOM

DOM

window对象

对话框

定时器

定时器

周期性定时器

动态时钟的启动和停止

一次性定时器

常用属性

scree对象

history对象

location 对象

navigator 对象

document对象

DOM 概述

DOM 概述

DOM 节点树

DOM 操作

读取、修改

元素节点的1内容

元素节点的内容

节点属性

元素节点的样式

查询

查询节点

根据元素id查询节点

根据层次查询节点

根据标签名查询节点

根据name属性查询节点

推荐阅读更多精彩内容

Unit06：外部对象概述、 window 对象、 document 对象