DOM和BOM

1、JS的组成部分

<b>ECMA (ECMAScript): js核心，解析器，解析语法，词法</b>

if () {}, for(){}, while(){}
  arr.pop();
  arr.push();
兼容性：完全兼容(ECMAScript4.0)

<b>DOM(Document Object Model) 文档对象模型</b>

跟网页打交道
  document.getElementById
  oDiv.style.background = 'red';
  ......
兼容性：大部分兼容，小部分不兼容(可以处理)

<b>BOM(Browser Object Model) 浏览器对象模型</b>

跟浏览器打交道
  UA: window.navigator.userAgent
  alert();
兼容性：没有兼容性，根本就不兼容(不可以处理，能用就用，不能用拉到)

2、DOM

标签 -> 元素 -> 节点： 指的是同一个东西

<b>DOM树(关系)：</b>
树：
a). 分枝
b). 根
体现各个节点之间的关系

<b>DOM关系</b>

<b>父子级</b>
子级(一层，一级)： 父级.children

父级：子级.parentNode

<b>兄弟级</b>
上一个兄弟节点：

obj.previousElementSibling
兼容：高级浏览器
低级浏览器： undefined

obj.previousSibling
高级浏览器：文本节点 oject text
低级浏览器：返回相应的节点
兼容：
    a). if else 
    b). 或 || 
var oPrev = oLi.previousElementSibling || oLi.previousSibling;

下一个兄弟节点:

  obj.nextElementSibling
  兼容性：高级浏览器
  低级浏览器： undefined

  obj.nextSibling
  高级浏览器：文本节点 oject text
  低级浏览器：返回相应的节点
  兼容版：
  var oNext = obj.nextElementSibing || obj.nextSibling;

文本节点： 空格 文字

<b>首尾节点</b>
首节点：

a). 父级.firstElementChild
    兼容：高级浏览器
    低级浏览器： undefined

    父级.firstChild
      高级浏览器：文本节点
      低级浏览器：返回相应的节点
      兼容版：
      var oFirst = 父级.firstElementChild || 父级.firstChild;
  b). 父级.children[0]      //一般使用此方法

尾节点：

  a). 父级.lastElementChild
      兼容：高级浏览器
      低级浏览器： undefined

      父级.lastChild
      高级浏览器：文本节点
      低级浏览器：返回相应的节点
      兼容版：
      var oLast = 父级.lastElementChild || 父级.lastChild;
  b). 父级.children[父级.children.length-1]  //一般使用此方法

<b>DOM操作</b>

创建节点：
        document.createElement(节点名称);
添加节点：
        a).
            父级.appendChild(要添加的节点);
        b).     
            父级.insertBefore(要添加的节点，在谁的前面);
删除节点：
        父级.removeChild(要删除的节点);
        
    *** 所有的添加功能相当于剪切的功能

3、BOM

BOM(Browser Object Model)
跟浏览器打交道

打开一个窗口：

window.open(地址，方式);
Chrome: 拦截
FF: 阻止
IE: 直接打开

* 只要是用户自己打开的都不拦截


打开方式：默认新窗口打开
    _blank: 新窗口打开
    _self : 当前窗口打开

    about:blank：空白页面

window.open():
返回：object window 新的窗体对象

关闭窗口：

    window.close();
    Chrome: 直接关闭
    FF: 没有反应
    IE: 提示

    * 只能关闭用户自己open出来的窗口

获取地址栏的信息：

    window.location
    数据类型： object
    可以查看，也可以赋值

    http://www.baidu.com/index.html?user=baidu&password=1232#abc;
    以下返回的都是字符串
    window.location.href    地址
    window.location.search  数据
    window.location.hash    锚

    其它信息：
    window.location.protocol 协议
    window.location.host     域名
    window.location.port     端口号
    window.location.pathname 路径

历史信息：

    window.history
    前提： 必须有浏览记录（痕迹）

    前进：
        window.history.forward();
    后退：
        window.history.back();

        window.history.go(数字);