javaScript外部对象

BOM对象

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

DOM对象

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

window对象

• window 对象表示浏览器窗口。所有 js 全局对象、函数以及变量均自动成为 window 对象的成员。

• 常用属性：

  1. document：窗口中显示的 HTML文档对象
  2. history：浏览过窗口的历史记录对象
  3. location：窗口文件地址对象
  4. screen：当前屏幕对象
  5. navigator：浏览器相关信息

• 常用方法：

  1. alert()/confirm()
  2. setTimeout()/clearTimeout()
  3. setInterval()/clearInterval()

  对话框：

 alert(str) //提示对话框，显示 str 的内容
 confirm(str) //确认对话框，显示 str 的内容，点击“确定”按钮返回 true，其他操作返回 false。 

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

周期性定时器

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

clearInterval(ID)//停止已经启动的定时器
//ID：已经启动的定时器对象


//每一次启动定时器都会生成一个新的ID,而在根据ID关闭定时器时实际上是关闭最后一个定时器，这与设计者的思路不符，为了避免这种情况出现，需要保证只有一个定时器有效，必须对ID 是否为空进行判断并且关闭定时器时需要对ID进行清空（ID=null）操作，以方便后面使用。

周期性定时器示例代码如下：

function f4(){
    var n = 5;
    var id = setInterval(function(){
        console.log(n--);
        if(!n){
            //当 n=0，停止定时器
            clearInterval(id);
            console.log("这里输出5秒后炸弹爆炸");
        }
    },1000);
    //启动定时器就好像启动了支线程，当前方法 f4 是主线程，主线程和支线程是并发执行，互不干扰，支线程需要一秒后才会启动，而主线程是不会等待支线程的，所以会先输出下面这一句。
    console.log("这里输出炸弹立即爆炸");
}

一次性定时器
一次性定时器即启动一次后会自动停止，也会返回该定时器的ID，可以根据ID来停止定时器，但必须是在执行代码执行之前停止定时器才有效。
一次性定时器代码如下：

function f5(){
    var id = setTimeout(function(){
        console.log("打铃");
    },5000);
}

function f6(){
    //根据ID来停止定时器
    clearTimeout(id);
    console.log("定时器停止");
}

---

document对象
浏览器对象比较多，这里只讲一下 document 对象。

• html 页面是存在服务器端的，当客户端通过地址栏发送请求时，服务器会给浏览器返回 一个网页，浏览器加载网页时会将网页转成一个 document 对象，其对象的结构和 html 语言的结构相同，加载后的对象存放于浏览器的内存中。document 对象是一个树形结构，有很多节点，document 是文档节点又叫 DOM 树的根节点，还有元素节点、属性节点、文本节点、注释节点，相对应的就是 html 页面的结构。不同的节点具有不同的方法。

• 网页被加载时，浏览器会创建页面的文档对象模型，通过可编 程的文档对象模型，js 获得了足够的能力来动态的创建 HTML 页面。

  js 可以改变页面中的所有 html 元素；
  js 可以改变页面中的所有 html属性；
  js 可以改变页面中的所有 css 样式；
  js 可以对页面中的所有事件作出反应；

DOM 操作

• 查找节点
• 读取节点
• 修改节点
• 增加节点
• 删除节点

节点信息

• nodeName：节点名称
  
  1. 元素节点和属性节点：标签和属性名称
  2. 文本节点永远是 #text
  3. 文档节点永远是 #document

• nodeType：节点类型，返回的是数值。

  1. 元素节点：1
  2. 属性节点：2
  3. 文本节点：3
  4. 注释节点：8
  5. 文档节点：9

• 节点内容：

  1. innerText：设置或获取位于对象起始和结束标签内的文本
  2. innerHTML：设置或获取位于对象起始和结束标签内的 HTML。

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

//<script>中的代码如下：
var node = document.getElementById("d1");
alert(node.innerText);   //输出，第一行文本
alert(node.innerHTML)    //输出，<p>段落中的文本</p>

• 节点属性
  
  1. getAttribute(),根据属性名称获取属性值
  2. setAttribute()/removeAttribute()

<a href="www.hao123.com" title="this is a link" id="a1" >click me</a>

//<script> 中的代码如下：
var a = documnet.getElementById("a1");
var href=a.getAttribute("href");
alert(href); //输出：www.hao123.com
alert(a.innerHTML);输出：click me 
a.href="www.taobao.com";//更改属性值

• 元素节点的样式
  
  1. style属性：node.style.color/node.style.fontsize
  2. className属性

<p id="p1"> 大王叫我来巡山，我把山头转一转</p>

//<script> 标签中的代码：
var p1 = document.getElementById("p1");
p1.style.color="red";
p1.style.fontsize=20;
p1.className="样式类名称";

• 查询节点

  通过 id 查询

var node = getElementById("p1");

通过 层次（节点关系）查询
parentNode,根据文档上下层结构，查找单个父节点
chilNodes ,根据文档上下层结构，查找多个子节点

<div id= "d2">
    清明时节雨纷纷
    <p id="p2">路上行人欲断魂</p>
    <p id="p3">完</p>
</div>
var parentNode = document.getElementById("p2").parentNode

//带文本，除了元素之外空格、换行符也会被当做一个孩子
var chilNodes = document.getElementById("d2").chilNodes

通过标签名称查询
根据标签名称查询返回所有的元素，忽略文档结构(在整棵树上查询)，如果标签名称有错误，则返回长度为 0 的节点列表。
返回一个节点列表数组，使用节点列表的 length 属性可以获得节点的个数，通过 [index] 可以定位具体的元素节点 。

<div id= "d3">
    清明时节雨纷纷
    <p id="p2">路上行人欲断魂</p>
    <p id="p3">完</p>
</div>

var tagName = document.getElementsByTagName("p");
alert(tagName.length);// 2
alert(tagName[1].innerHTML);//完

通过 name 属性查询
根据标签的 name 属性查询节点

    <p>
        <input type="radio" name="sex"/>男
        <input type="radio" name="sex"/>女
    </p>

var nodes = document.getElementsByName("sex");
console.log(nodes);