1, BOM的概念

BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作.
JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C, 但是BOM缺乏标准.由于BOM 缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。

2, window对象

window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象与之对应.
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的

window对象的属性对象:

document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)
history(重要): 历史对象,包含窗口的浏览历史，可以实现后退
location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面
frames: 框架对象，可以获取页面框架内容
screen: 包含有关客户端显示屏幕的信息
navigator: 导航对象, 包含所有有关访问者浏览器的信息

window对象的方法:

alert(text): 弹出提示框(警告框)
confirm(): 创建一个需要用户确认的对话框
prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
open(url,name,[options]) : 打开一个新窗口并返回新 window 对象
setInterval(): 设置定时器
clearInterval() : 移除定时器
setTimeOut() : 设置延时器
clearTimeOut(): 移除延时器
close(): 关闭窗口
print(): 调出打印对话框

window对象的属性和方法的调用:

window对象的属性和方法的调用方式，可以使用 window.属性、window.方法()或者一般可以直接使用: 属性、方法()的方式调用。

3, 系统对话框

alert(“谢谢”); 弹出警告框

    confirm(“请确定或者取消”);   提示框 :确定和取消
     if (confirm((“请确定或者取消”)){
          alert(“您按了确定！”);      //按确定返回true
     } else{
          alert(“您按了取消！”)       //按取消返回false
     }

4, window.open()

window.open(): 打开指定的网址url. 一般可以接受三个参数:
(1. 要加载的URL 2. 窗口的名称 或者 窗口的目标 3. 一个特性的字符串)

    open(“http://www.baidu.com”);	           //新建页面并打开百度
    open(“http://www.baidu.com”, “baidu”);       //新建页面并打开百度,窗口命名为baidu
    open(“http://www.baidu.com”, “_parent”);    //在本页窗口打开, _blank是新建(默认)
    注: 不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。
     
    第三个字符串参数: 
    width/height:  新窗口的宽度和高度, top/left: 新窗口的Y坐标和X坐标 
    open(‘http://www.baidu.com’, ‘baidu’,‘width=400,height=400,top=200,left=200’ );
     
    opener: 父窗口对象
    document.onclick = function(){
    opener.document.write("调用父窗口对象输出!");

5, location对象

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。
事实上，location对象是window对象的属性，也是document对象的属性; 所以window.location和document.location等效

location对象的属性

    location.hash = ‘#1’;   //设置#后的字符串，并跳转
    console.log(location.hash);   //获取#后的字符串
    console.log(location.port);  //获取当前端口号
    console.log(location.hostname);   //获取主机名(域名)
    console.log(location.pathname);   //获取当前路径(服务器地址后部分)
    console.log(location.search);   //获取?后面的字符串
    location.href = “http://www.baidu.com”;   //设置跳转的URL，并跳转

location对象的方法

    location.assign(‘http://www.baidu.com’);    //跳转到指定的URL, 与href等效
    location.reload();      //最有效的重新加载,有缓存加载
    location.reload(true);    //强制加载,从服务器源头重新加载
    location.replace(“http://www.baidu.com”);  //用新的URL替代,可以避免产生历史记录

6, history对象

history对象是window对象的属性，它保存着用户上网的记录,从窗口被打开的那一刻算起.

history对象的属性

history.length; //history对象中的记录数

history对象的方法

    history.back();     //前往浏览器历史条目前一个URL, 类似后退
    history.forward();  //前往浏览器历史条目下一个URL, 类似前进
    history.go(-1); //浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)

7, navigator对象(了解)

navigator对象是window对象的属性，它保存了浏览器的信息, 如: 浏览器名称,版本,浏览器所在的电脑操作系统等

navigator对象的属性

    console.log(navigator.appName);  //浏览器名称
    console.log(navigator.appVersion);  //浏览器版本
    console.log(navigator.platform);  //操作系统
    //最新的浏览器已经全面放弃以上这些属性

navigator对象的属性

    console.log(navigator.userAgent);  //用户代理信息, 通过该属性可以获取浏览器及操作系统信息

close() 关闭浏览器
注意: 火狐浏览器不支持, 如要支持火狐浏览器, 则可以先open指定的页面,然后在该页面调用close()
print()调出打印对话框

8.DOM的概念

DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
#DOM节点分类
DOM节点分为三种: 元素节点, 属性节点和文本节点
例如:

    <div title= "属性节点" >测试Div</div>
    <div></div>:  元素节点(最重要)
    title="属性节点":  属性节点
    测试Div :  文本节点

#元素节点对象的获取方式:

    getElementById():  获取特定ID元素的节点对象(返回一个对象)
    getElementsByTagName():  获取指定标签名的节点列表(返回一个数组)
    getElementsByName():  获取相同name属性值的节点列表(返回一个数组)

元素节点的属性

    tagName: 元素节点对象所指向的标签名称
    id: 元素节点的id属性值
    innerHTML: 元素节点中的内容
    className: 元素节点的class属性值
    style: css内联样式对象
    title:  元素节点的title属性值

DOM节点的共有属性

DOM节点可以分为元素节点(1)、属性节点(2)和文本节点(3)，而这些节点又有三个共有的属性，分别为：nodeName、nodeType 和 nodeValue。

9.DOM属性节点

1, 属性节点的属性

attributes属性: 获取某元素节点的所有属性节点(返回一个数组)。

    var box = document.getElementById(‘box’);
    box.attributes;   //[object NamedNodeMap]
    box.attributes.length;   //返回属性节点个数 
    box.attributes[0];   //[object Attr], 返回第一个属性节点 
    box.attributes[0].nodeType;    //2，节点类型 
    box.attributes[0].nodeName;  //属性名称 
    box.attributes[0].nodeValue;   //属性值 
    box.attributes[‘id’];   //返回属性名称为id的节点
    box.attributes.getNamedItem(‘id’);   //返回属性名称为id的节点

2, 属性节点操作的三个函数

-getAttribute(): 通过属性名获取对应的属性值
-setAttribute(): 设置一个key-value形式的属性键值对
-removeAttribute(): 移除指定的属性
getAttribute()
getAttribute()方法将获取元素中某个属性的值。它和直接使用点语法(.属性)获取属性值的方法有一定区别.

    document.getElementById(‘box’).getAttribute(‘id’);  获取元素的id属性值 document.getElementById(‘box’).id;  获取元素的id属性值(点语法)
    document.getElementById(‘box’).getAttribute(‘class’); 获取元素的class值
    document.getElementById(‘box’).className; 获取元素的class值(点语法)
    //获取元素的自定义属性值(不可以使用点语法)
    document.getElementById(‘box’).getAttribute(bbb);  
    document.getElementById(‘box’).bbb; 无法获取元素的自定义属性值

setAttribute()
setAttribute()方法可以给元素添加属性; 如果属性已经存在, 则会覆盖原来的属性; 需要传入两个参数：属性名和属性值.

    //设置属性和值
    document.getElementById(‘box’).setAttribute(‘align’, ‘center’); 
    //设置自定义的属性和值
    document.getElementById(‘box’).setAttribute(‘bbb’, ‘ccc’); 

removeAttribute()
removeAtttribute()方法可以移除元素的属性，

 document.getElementById('box').removeAttribute('style');  

3.元素节点关系的相关属性

childNodes: 子节点集合
firstChild: 用于获取当前元素节点的第一个子节点，相当于childNodes[0]

    //获取第一个子节点的文本内容
    console.log(box.firstChild.nodeValue); 

lastChild: 用于获取当前元素节点的最后一个子节点, 相当于childNodes[box.childNodes.length-1].

    //获取最后一个子节点的文本内容
    console.log(box.lastChild.nodeValue); 

元素节点间关系的相关属性

parentNode: 属性返回该节点的父节点，
previousSibling: 属性返回该节点的前一个同级节点，
nextSibling: 属性返回该节点的后一个同级节点

    console.log(box.parentNode.nodeName);  //获取父节点的标签名 
    console.log(box.lastChild.previousSibling); //获取前一个同级节点
    console.log(box.firstChild.nextSibling);       //获取后一个同级节点

DOM节点操作

DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等.
DOM操作所涉及的方法有:
-createElement(); 创建一个元素节点
-createElement()方法可以创建一个元素节点。
例如:

    var newEle = document.createElement(‘div’);

-appendChild(); 添加一个新子节点到子节点的末尾
-appendChild()方法可以将一个新节点添加到某个节点的子节点列表的末尾上。
例如:

    var box = document.getElementById(‘box’); 
    var pNode = document.createElement(‘p’);   //创建一个新元素节点<p> 
    box.appendChild(pNode);   //把新元素节点<p>添加box节点的子节点末尾

-createTextNode(); 创建一个文本节点
-createTextNode() 方法可以创建一个文本节点。
例如:

    var textNode = document.createTextNode(‘段落’); //创建一个文本节点
    p.appendChild(textNode);  //将文本节点添加到子节点末尾

-insertBefore(); 将新节点插入到某节点前面
-insertBefore()方法可以把节点插入到指定节点的前面。
例如:

    //通过父节点调用, 在box之前插入一个新节点p;
    //第一个参数为新节点
    box.parentNode.insertBefore(p, box); 

-replaceChild(); 将新节点替换旧节点
-replaceChild()方法可以把节点替换成指定的节点。
例如:

    //通过父节点调用, 新节点p替换了旧节点div
    //第一个参数为新节点, 第二个参数为旧节点
    box.parentNode.replaceChild(p, box);

-cloneNode(); 复制节点

    //获取第一个子节点, true表示复制标签和内容 , false表示只复制标签
    var box = document.getElementById(‘box’);
    Var newNode = box.firstChild.cloneNode(true); 
    box.appendChild(newNode);  //添加到子节点列表末尾

-removeChild(); 移除节点

    //通过父节点调用, 来删除指定子节点
    box.parentNode.removeChild(box);

事件中的this

在js中，this表示触发事件的元素节点对象；

    var box = document.getElementById('box'); 
    box.onclick = function() { 
          console.log(this.nodeName);  //this表示box对象 
    };

通过for循环添加事件，使用this

    var aInput = document.getElementsByTagName('input');
    for (var i=0; i<aInput.length; i++) { 
            aInput[i].onclick = function() { 
                    console.log(this.value);  //这里的this表示被点击的那个input元素节点对象 
            };
    }

滚动事件onscroll

onscroll滚动事件: 实时获取距离顶部/左边的距离(顶部不可见区域的高度/宽度)

    window.onscroll = function() {
          var scrollTop = document.documentElement.scrollTop 
                                   || document.body.scrollTop;	
          var box = document.getElementById("box");
          box.innerHTML = scrollTop;
    }

注意: 兼容问题

    document.documentElement.scrollTop:(跟DTD有关,ie 6 7 8,没问题,google,必须有标准的声明头)
    document.body.scrollTop: