JS一起学09：父子首尾节点、创删改元素、||和&&、scroll... / offset... / client...、关于window、各种弹

 一、js组成

1.  ECMAScript  标准规范   （actionScript也遵循此规范，是js的核心）   几乎完全兼容，因为功能简单

2. DOM   document object model  文档对象模型          大部分兼容，不兼容还可以写兼容       提供操作结构的接口

3. BOM    browser ojdect  model   浏览器对象模型，即window对象   基本不兼容，且无法写兼容   提供操作浏览器的方法和接口  window.navigator.userAgent

二、DOM

标签、元素、节点

1. 获取子节点：children----只包含第一层      childrenNotes 子级，不建议用 

    获取父节点：parentNode

    例子：隐藏li

          var aA=document.getElementsByTagName('a');

              for(var i=0; i<aA.length; i++){

                  aA[i].onclick=function(){

                      this.parentNode.style.display='none';

                  }

              }

点击它，删除它的父级。当父级不定的时候：

oA.onclick=function(){

    this.parentNode.parentNode.removeChild(this.parentNode);

} 

2. 获取首尾子节点

（1）firstChild------只兼容ie8以下,chrome认识，但是是一个文本节点

         firstElementChild----兼容高级浏览器，IE678  undefined；可以用来作为判断浏览器的条件

（2）lastChild---只兼容ie8以下

         lastElementChild---兼容高级浏览器

if(oUl.firstElementChild){

    oUl.firstElementChild.style.background='red';

}else{

    oUl.firstChild.style.background='red';

}

oUl.children[oUl.children.length-1].style.background='red';

3. 或

只要第一个为真，则整个条件为真

所以，var oFirst=oUl.firstElementChild || oUl.firstChild;

            oFirst.style.background='red';

4. 兄弟节点

（1）获取下一个兄弟节点：nextSibling---只兼容ie8-        nextElementSibling

        var oNext=oLi.nextElementSibling || oLi.nextSibling;

        oNext.style.background='red';

（2）获取上一个兄弟节点：previousSibling---只兼容ie8-    previousElementSibling

        var oPre=oLi.previousElementSibling || oLi.previousSibling;

5. 与 &&

    false&&alert(1);   不会弹1    如果第一个为假，就不用看后面，整个式子肯定为假；如果第一个为真，才需要看看后面的值

   小结：只有第一个为真时，后面才执行。 oDiv&&(oDiv.style.background='red');

              if(条件){语句}==条件&&语句

或：只有第一个为假的时候，后面才执行

6. 创建、插入、删除元素

    （1）creatElement(标签名);

    （2）appendChild(元素);----插入到最后

             插入到某个元素之前：insertBefore(新建元素, 某个元素);

                    insertBefore特性  bug  如果第二个参数为空  则默认插入

            如果用到length  则要注意appendChild之前和之后的不同,如：

在appendChild之前：

oBtn.onclick=function(){

    var oLi=document.createElement('li');

    oLi.style.background='red';

    oLi.innerHTML=oUl.children.length+1;

    oUl.appendChild(oLi);

}

在appendChild之前：

oBtn.onclick=function(){

    var oLi=document.createElement('li');

    oLi.style.fontSize='30px';

    oUl.appendChild(oLi);

    oLi.innerHTML=oUl.children;

}

    （3）removeChild(要删除的东西);

例子—模拟留言板：

window.onload=function(){

     var oTxt1=document.getElementById('txt1');

     var oTxt2=document.getElementById('txt2');

     var oBtn=document.getElementById('btn1');

     var oUl=document.getElementsByTagName('ul')[0];

 

     oBtn.onclick=function(){

          var oNewLi=document.createElement('li');

          var oNewH=document.createElement('h2');

          var oNewP=document.createElement('p');

          oNewH.innerHTML=oTxt1.value;

          oNewP.innerHTML=oTxt2.value;

          oNewLi.appendChild(oNewH);

          oNewLi.appendChild(oNewP);

          if(oUl.children[0]){

               oUl.insertBefore(oNewLi,oUl.children[0]);

          }else{

               oUl.appendChild(oNewLi);

          }

          oTxt1.value='';

          oTxt2.value='';

     }

}

7. 几对关键词

（1）onscroll：滚动条滚动事件

（2）scrollTop：获取滚动的距离

                    document.documentElementScrollTop----只支持ie和ff，不支持Chrome

                    document.body.scrollTop----只支持Chrome

                    兼容写法：var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;（也可以反着写）

        scrollLeft：用法用scrollTop一样

（3）clientWidth /clientHeight：获取可视区的宽度/高度

                完全兼容：document.documentElement.clientWidth/clientHeight

（4）offsetWidth / offsetHeight：获取元素的盒子模型的高度（width、padding、border）。display:none就获取不到。块级元素的宽高，默认是父元素的100%

        oDiv.style.top=scrollTop+clientHeight-offsetHeight;

（5）offsetLeft / offsetTop：到有定位的父级的距离

（6）onresize：当窗口大小改变的时候触发

8. document.write：如果在页面加载之后，执行document.write()，就会清空其他所有内容;

9. 关于window

（1） open：打开一个页面，有返回值   新的窗口的对象

         window.open(网址，名字（类似a的target）)

       oBtn.onclick=function(){

               window.open("close.html","_blank"); 

       };

 （2）window.close();----关闭一个页面。不兼容ff，不能关闭非脚本打开的窗口，只能关闭由js打开的页面

         oBtn.onclick=function(){

                 window.close(); 

          };

（3）window.location     获取浏览器当前访问的地址

（4）http://www.a.com/app/a.html?a=12#1

        protocal  协议   http:

        host              域名        www.a.com

        pathname    路径名    /app/a.html

        search          数据        ?a=12

        hash             锚            #1

（5）history        历史记录

                .go(-1)        后退

                .go(1)         前进

（6）navigator         浏览器信息

（7）userAgent

（8）language        语言

（9）platform         操作系统

（10）screen            屏幕信息--分辨率  screen.width   screen.height

（11）colorDepth    色彩                            window.screen.colorDepth

10. 各种弹出框

（1）alert();------警告框，弹一下就完事

（2）confirm;----确认框，返回布尔值

var result=confirm ('你确认是帅哥吗？');

alert(result);

（3）prompt-----输入框，返回的是输入的字符串，如果取消，返回null

var str=prompt('what is your name?','请在这里输入你的名字。'); alert(str);