DOM，BOM

1.DOM:文档对象模型(Document Object Model)
　1)子节点:只是这一代的后代,不会计算后代的后代
  　　1.childNodes:获取子节点,
    　　--IE6-8:获取的是元素节点,正常
    　　--高版本浏览器:但是会包含文本节点和元素节点(不正常)

　　2.nodeType:节点的类型
   　　 --nodeType=3-->文本节点
    　　--nodeTyPE=1-->元素节点
    　　所以获取元素节点兼容的方法:
     　　 for(var i=0;i<oUL.childNodes.length;i++){
        　　if(oUl.childNodes[i].nodeType==1){
          　　oUl.childNodes[i].style.background='red';
        　　}
      　　}
  　3.children属性:只获取元素节点,不获取文本节点,比上面的好用所以我们一般获取子节点时,最好用这个属性

2)父节点:
    1.parentNode:获取某一个元素的父节点(获取的是直接父级)
      --this.parentNode.style.display='none';

2.offsetParent:获取元素相对定位的父级(会根据样式的不同而不同)
      (若CSS中直接父级没有定位,会直接往上面找,直到找到有定位的父级)

    3.firstChild/firstElementChild:第一个子节点
      lastChild/lastElementChild:最后一个子节点
      nextSibling/nextElementSibling:下一个兄弟节点
      previousSibling/previousElementSibling:上一个兄弟节点
      --IE6-8下兼容:firstChild,lastChild,nextSibling,previousSibling,
          (高版本浏览器IE9+,FF,Chrome不兼容,其获取的空白文本节点)
      --高版本浏览器下兼容:firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
          (低版本浏览器IE6-8不兼容)
      --兼容写法:
      　　if(oUl.firstElementChild){
        　　oUl.firstElementChild.style.background='red';
      　　}else{
        　　oUl.firstChild.style.background='red';
      　　}

  3)DOM方式操作元素的属性:
    (之前学过.和[]操作属性的方法,可以下面的互换)
    1)设置属性:element.setAttribute(属性名称,值)
    2)获取属性:element.getAttribute(属性名称)
    3)删除属性:element.removeAttribute(属性名称)

  4)获取元素的方法:
    --document.getElementById()
    --document.getElementsByTagName()
    --document.getElementsByName()
    --封装一个通过class获取元素的函数
      function getByClass(oParent,sClass){
        var arr=[];
        aEle=oParent.getElementByTagName('*');
        for(var i=0;i<aEle.length;i++){
          if(aEle[i].className==sClass){
            arr.push(aEle[i]);
          }
        }
        return arr;    //把所有得到的元素放进数组里面返回出去
      }
    　var aBtn=getByClass(oUl,'list');
      for(var i=0;i<aBtn.length;i++){
        aBtn[i].style.background='red';
      }

5)DOM操作应用:
    1.创建元素: document.createElement('li');
    2.设置或返回元素的inner HTML:  element.innerHTML
    3.向元素的最后添加新的子节点: 父级.appendChild(子节点)
    4.向元素的最前面添加新的子节点：父级.insertBefore(子节点,在谁之前)
      insertBefore在IE下不行,因为ul里面本来没有li,找不到第一个元素子节点
      --兼容写法
      　　if(aLi.length>0){    //假如里面原来有li子元素
        　　oUl.insertBefore(cLi,aLi[0]);
      　　}else{    //原来没有元素,直接appendChild即可
        　　oUl.appendChild(cLi);
      　　}
    　　例:创建元素和插入元素:
      　　1)创建一个元素:var cLi=document.createElement('li');
      　　2)给创建的元素节点添加文本节点:cLi.innerHTML=oTxt.value;
      　　3)将创建的子节点添加到某个父级元素里面:oUl.appendChild(cLi);

    5.从元素中删除子节点:
      element.removeChild()-->父级.removeChild(子节点);
      var list=document.getElementById("myList");
      list.removeChild(list.childNodes[0]);
      删除之前:Coffee,Tea,Milk
      删除之后:Tea,Milk

6.element.hasAttribute():如果元素拥有指定属性,则返回true,否则返回 false
        document.getElementsByTagName("BUTTON")[0].hasAttribute("onclick"); //true

7.element.hasChildNodes():如果元素拥有子节点,则返回 true,否则 false
        document.body.hasAttributes();    //false

6)文档碎片:(现在基本上已经不用,高版本浏览器性能提高不大)
    --创建一个文档碎片:var oFrag=document.createDocumentFragment()
    --可以提高DOM操作的性能
    --原理:假如我需要差很多元素到文档中,每插入一个元素,页面需要重新渲染一次,
      插入多个页面需要渲染多次,性能比较低,这时候就可以将这些要插入的
      元素放入到文档碎片中,最后一次性插入,一次性渲染,性能较高

2.BOM:浏览器对象模型(Browser Object Model)
  1.Window对象:
    1)特点:所有浏览器都支持window对象,它表示浏览器窗口
        所有 JavaScript 全局对象,函数以及变量均自动成为window对象的成员
        全局变量是window对象的属性
        全局函数是window对象的方法
        甚至 HTML DOM 的document也是window对象的属性之一
        document.getElementById("header")完整写法为:window.document.getElementById("header");

2)Window对象属性:(其实全局对象都是Window对象的一个属性,只不过我们平时使用时都是省略window的,
      直接使用这些全局对象,下面会对全局对象做具体介绍)
      1.window.colsed:返回窗口是否已被关闭(true,false)
      2.window.document:对Document对象的只读引用
      3.window.history:对History对象的只读引用
      4.window.location:用于窗口或框架的Location对象
      5.window.Navigator:对Navigator对象的只读引用
      6.window.Screen:对Screen对象的只读引用

3)Window对象方法:全局的函数(如alert())也是Window对象方法,有些我们平时使用时也是省略window,直接使用
      1.打开窗口:
        --window.open('about:blank')==>新弹出来一个空白页
        --window.open('about:blank','_self')==>在当前窗口打开一个新的
        --window.open('about:blank','_blank')==>新弹出来一个空白页,以前的窗口还在,默认为blank
        window.open方法打开的窗口是有返回值的,返回的是当前新打开的窗口,也是一个窗口对象
        例子:在新打开的窗口中写文字
        oBtn.onclick=function(){
            var newWindow=window.open('about:blank');
            newWindow.document.write(oTxt.value);
        };

2.关闭窗口:
      --window.close()==>在谷歌下可以关闭,在IE会有提示,在火狐下会禁止脚本关闭用户打开的窗口
      --需要将用户打开的窗口先open打开,再close才有用
      <input type='button' value='open' onclick="window.open('close.html');" />
      <input type='button' value='close' onclick="window.close();" />

3.定时器的使用:
          1)间隔性:setInterval(fn,毫秒数)    //作用是每隔多少时间执行一次函数
          2)延时性:setTimeout(fn,毫秒数)     //过多久执行一次函数,只执行函一次
          3)关闭定时器:clearInterval()/clearTimeout()
              是指从下一次开始关闭定时器,但是函数后面的代码会继续执行完毕,
              所以一般将函数后面的代码写在else里面与关闭定时器分割开来
            如何'开'或者'关'一个定时器
              <input id="btn1" type="button" value="打开" />
              <input id="btn2" type="button" value="关闭" />
              <script>
                  window.onload=function(){
                      var oBtn1=document.getElementById('btn1');
                      var oBtn2=document.getElementById('btn2');
                      var timer=null; //打开一个定时器
                      oBtn1.onclick=function(){
                          //setInterval返回上面打开的定时器
                          timer=setInterval(function(){
                              alert('a');
                          },1000);
                      }
                      oBtn2.onclick=function(){
                          //关闭时直接关闭上面打开的计时器即可
                          clearInterval(timer);
                      }
                  }
              </script>

4.窗口尺寸:
        可视区尺寸:document.documentElement.clientWidth
                            document.documentElement.clientHeight
        滚动条滚动距离(滚动条高度):
                IE,Chrome:document.body.scrollTop
                FF:document.documentElement.scrollTop
        兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

5.系统对话框:(用的较少)
          --警告框:alert('内容');    ==>没有返回值
          --选择框:confirm('提问的内容');        ==>返回boolean值(确定返回true,取消返回false)
          --输入框:prompt('提示内容','默认值');        ==>返回当前输入的字符串或null

6.window对象常用事件:window.onload,window.onscroll,window.onresize
        关于CSS中的固定定位fixed:IE6不兼容,position:fixed
        所以要想做右下角的固定小广告,需要用js实现,不能直接fixed固定
        问题1:当窗口改变大小时,右下角oDiv并不随着改变位置,需要用到window.onresize
        问题2:右下角小的oDiv会在滚动时出现抖动现象,可以做一个判断
                    userAgent>IE6==>fixed
                    IE6==>用运动解决  (在JS运动里面会讲到运动)
        window.onscroll=window.onresize=function(){
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var oDivheight=oDiv.offsetHeight;
            var clientHeight=document.documentElement.clientHeight;
            var Top=clientHeight-oDivheight+scrollTop;
            oDiv.style.top=Top+'px';
        }

2.Navigator对象:包含有关浏览器的信息
    navigator.appName:返回浏览器的名称
    navigator.appVersion:返回浏览器的平台和版本信息
    navigator.userAgent:返回由客户机发送服务器的user-agent头部的值(也有当前的浏览器和浏览器版本信息)
    判断浏览器:
    mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
    webkit = /webkit/.test(navigator.userAgent.toLowerCase());
    opera = /opera/.test(navigator.userAgent.toLowerCase());

3.Screen对象:包含有关客户端显示屏幕的信息
  JS中有几个对象的用处不大,而Screen对象就是其中之一,Screen对象基本上只用来表明客户端的能力,不详细说明了

4.History对象:包含用户(在浏览器窗口中)访问过的URL
  1)History对象的属性:
    length属性:返回浏览器历史列表中的URL数量,对于刚加载到窗口的第一个页面而言history.length=0

2)History对象的方法:
    1.history.go():可在用户历史记录中任意跳转,可以向后,也可以向前
      go()方法参数为数字时:
        后退一步:history.go(-1);
        前进一步:history.go(1);
        前进两步:history.go(2);
      go()方法参数为字符串时:此时浏览器会跳到历史记录中包含该字符串最近的位置,可能前进,也可能后退,
          具体看参数字符串离哪个历史记录近.
        跳到最近的 baidu.com 页面:history.go('baidu.com');

2.history.back():代替history.go()方法的后退一步
        后退一步:history.back();

3.history.forward():代替history.go()方法的前进一步
        前进一步:history.forward();

5.Location对象:
  是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息
  location对象是一个很特别的对象,因为它既是window对象的属性也是document对象的属性,
  也就是说:window.location与document.location引用的是同一个对象。

1)Location对象属性:
    --location.hash设置或返回从井号(#)开始的UR(锚),如果没有此系列,则返回空字符串
      location.hash="#part2";
      document.write(location.hash);
    --location.host:设置或返回服务器名称和当前URL的端口号   'localhost:8080'
    --location.hostname:设置或返回不带端口号的服务器名称   'localhost'
    --location.href:设置或返回当前加载页面的完整URL,而location对象的toString()方法也返回这个值
      'http://localhost/learnjs/drag.html'
    --location.pathname:设置或返回URL中的目录和(或)文件名    '/learnjs/drag.html'
    --location.port:设置或返回当前URL的端口号,若无则返回空字符串   '8080'
    --location.protocol:设置或返回页面使用的协议。通常为http:或https:
    --location.search:设置或返回URL的查询字符串.这个字符串以问号开头  '?q=javascript'

2)查询字符串参数:虽然上面的属性可以访问到location的大多数信息,但访问URL包含的查询字符串的属性并不完整
    虽然location.search可以返回从问号到URL末尾的所有内容,但不能访问其中的每个查询字符串参数
    创建函数,用以解析查询字符串,返回包含所有参数的一个对象:
    function getQueryArgs(){
      //取得查询字符串并去掉开头的问号
      var qs=(location.search.length>0 ? location.search.substring(1) : '');
      //定义保存数据的对象
      var args={};
      //取得每一项:
      var items=qs.length ? qs.split('&') : [];
      var item=null;
      var name=null;
      var value=null;
      //逐个将每一项添加到args对象中
      for(var i=0;i<items.length;i++){
        item=items[i].split('=');
        name=decodeURIComponent(item[0]);
        value=decodeURIComponent(item[1]);
        if(name.length){
          args[name]=value;
        }
      }
      return args;
    }
    //假设查询的字符串是:?a=1&B=2
    var args=getQueryArgs();
    alert(args['a']);   //1
    alert(args.B);    //2

3)Location对象方法:
    --location.assign('URL'):加载新文档,可以打开一个新的文档,并在浏览器中添加一条历史记录
    --window.location='URL'/location.href='URL'与location.assign('URL')作用相同.
      在这些打开新文档的方法中,常用的是location.href属性
    --location.reload():重新加载当前文档
      没有参数时,页面会以最有效的方式重载,即可能从浏览器缓存中重新加载
      有参数(true)时:从服务器从新加载
      location.reload();  //可能从缓存中加载
      location.reload(true);  //从服务器重新加载
      注:位于reload()调用之后的代码可能会也可能不会执行,这要取决于系统资源和网络延迟等情况,
        因此reload()最好放在代码最好一行.
    --location.replace():用新的文档替换当前文档,也是加载新文档,replace()方法不会往历史记录中添加一个新的记录.
      当使用该方法时,新的URL将覆盖History对象中的当前记录,而上面介绍的方法都会生成一条新的历史记录
      如果想要禁止用户通过'后退'按钮返回到前一个页面(既不想添加一条历史记录),就可以使用replace()方法
        oBtn.onclick=function(){
          location.replace('http://localhost/learnjs/index.html');
        };