Day09 BOM和DOM （上）

BOM概念

  • BOM : Browser Object Model 瀏覽器對(duì)象模型，描述與瀏覽器進(jìn)行交互的方法和接 口， ECMAscript是javascript的核心，但如果要在web中使用javascript，那么BOM則無疑才是真正的核心。
  • BOM提供了很多對(duì)象，用于訪問瀏覽器的功能，這些功能與任何網(wǎng)頁內(nèi)容無關(guān)。

window對(duì)象介紹

BOM 的核心對(duì)象是 window ，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中， window對(duì)象有雙 重角色，它既是通過 JavaScript 訪問瀏覽器窗口的一個(gè)接口，又是ECMAScript 規(guī)定的全局（global）對(duì)象。這意味著在網(wǎng)頁中定義的任何一個(gè)對(duì)象、變量和函數(shù)，都以 window 作 為其Global 對(duì)象，因此有權(quán)訪問parseInt()等方法。

window內(nèi)置對(duì)象(location/history/navigator)及方法

  • location對(duì)象
    • href屬性 控制瀏覽器地址欄的內(nèi)容
    • reload()方法 刷新頁面

    location.reload(true);從緩存里面獲取。性能更好。

  • history對(duì)象
    history對(duì)象是window對(duì)象的屬性
    瀏覽者通常可以使用瀏覽器的前進(jìn)與后退按鈕訪問曾經(jīng)瀏覽過的頁面。JavaScript的history對(duì)象記錄了用戶曾經(jīng)瀏覽過的頁面，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似的導(dǎo)航功能
    可以通過back函數(shù)后退一個(gè)頁面，forward函數(shù)前進(jìn)一個(gè)頁面，或者使用go函數(shù)任意后退或前進(jìn)頁面。
JavaScript history.go() 函數(shù) -- 前進(jìn)或后退指定的頁面數(shù)
JavaScript history.back() 函數(shù) -- 后退一頁
JavaScript history.forward() 函數(shù) -- 前進(jìn)一頁
JavaScript history.length 屬性 -- history對(duì)象中緩存了多少個(gè)URL
  • navigator對(duì)象
    userAgent 用戶代理信息，通過該屬性可以獲取瀏覽器及操作系統(tǒng)信息

BOM相關(guān)的事件和操作

  • onload事件：頁面內(nèi)容加載完成（DOM結(jié)構(gòu)，圖片.....）

當(dāng)頁面加載完成時(shí)(DOM結(jié)構(gòu)，內(nèi)容，網(wǎng)頁信息)，執(zhí)行函數(shù)里面的代碼，一個(gè)頁面只能有一個(gè)onload事件。

  • onscroll事件：拖動(dòng)瀏覽器的滾動(dòng)條觸發(fā)此事件。(連續(xù)觸發(fā))
  • onresize事件：瀏覽器窗口縮放所觸發(fā)的事件。(連續(xù)觸發(fā))
  • 可視區(qū)的寬高：document.documentElement.clientWidth/clientHeight
  • 滾動(dòng)條距離
document.documentElement.scrollTop  //chrome
document.body.scrollTop  //firefox和ie
//使用if或三目做兼容
  • open() 和 close() 方法--打開一個(gè)頁面/關(guān)閉一個(gè)頁面（了解）

window.close();//關(guān)閉當(dāng)前頁面，不是瀏覽器

document.onkeydown=function(){
                if(confirm('你確定要關(guān)閉嗎？')){//選擇確定返回true  取消：false  選擇
                    window.close();//關(guān)閉當(dāng)前頁面，不是瀏覽器。
                }else{
                    alert('算你識(shí)相');
                }
                
            }
  • alert() prompt() confirm()方法：confirm() 方法用于顯示一個(gè)帶有指定消息和 OK 及取消按鈕的對(duì)話框。
  • 定時(shí)器
setInterval(函數(shù)名稱，時(shí)間)；間隔定時(shí)器(反復(fù)調(diào)用)
clearInterval( 定時(shí)器的返回值 );  停止定時(shí)器
setTimeout(函數(shù)名稱，時(shí)間); 延時(shí)定時(shí)器
clearTimeout( 定時(shí)器的返回值 ); 停止定時(shí)器
//異步：代碼彼此不影響。
//定時(shí)器模擬異步執(zhí)行代碼。
/*setInterval(function(){
    alert(dfadsfad);
},0);//即使時(shí)間為0，進(jìn)入隊(duì)列，比正常的語句慢。
  • 應(yīng)用
    1．廣告彈出窗(自動(dòng)關(guān)閉)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0px;margin: 0px;
            }
            #ad{
                width: 100%;
                height: 80px;
                margin:0 auto;
                background: #000000;
                text-align: center;
                position: relative;
            }
            #ad i{
                position: absolute;
                right:100px;
                top:5px;
                color:#fff;
                cursor: pointer;
                font-style: normal;
            }
            #ad span{
                color:#fff;
                position: absolute;
                left:10px;
                top:30px;
            }
            
        </style>
    </head>
    <body>
        <div id="ad">
            <img src="1.jpg"/>
            <i>X</i>
            <span>離廣告關(guān)閉還有<strong>5</strong>秒</span>
        </div>
        <script type="text/javascript">
            //延時(shí)定時(shí)器  setTimeout(函數(shù),時(shí)間)；
            //關(guān)閉延時(shí)定時(shí)器  clearTimeout(延時(shí)定時(shí)器的返回值)；
            //間隔定時(shí)器：setInterval(函數(shù),時(shí)間)；
            //關(guān)閉間隔定時(shí)器  clearInterval(間隔定時(shí)器的返回值)；
            
            
            //同步：代碼按照一定的順序執(zhí)行。
            
            //alert(dfadsfad);//報(bào)錯(cuò)，代碼結(jié)束
            //alert(123);
            
            //異步：代碼彼此不影響。
            //定時(shí)器模擬異步執(zhí)行代碼。
            /*setInterval(function(){
                alert(dfadsfad);
            },0);//即使時(shí)間為0，進(jìn)入隊(duì)列，比正常的語句慢。
            
            alert(123);*/
            

            
            /*function fn(){
                document.body.style.background='#ccc';
            }
            setTimeout(fn,3000);*/
            
            var ad=document.getElementById('ad');
            var close=document.getElementsByTagName('i')[0];
            var oStrong=document.getElementsByTagName('strong')[0];
            var timer=null;
            
            close.onclick=function(){
                ad.style.display='none';
            }
            var timevalue=oStrong.innerHTML;
            timer=setInterval(function(){
                timevalue--;
                if(timevalue==0){
                    ad.style.display='none';
                    clearInterval(timer);
                }
                oStrong.innerHTML=timevalue;
            },1000);
        </script>
    </body>
</html>
  1. 添加倒計(jì)時(shí)效果
  2. 盒子完全居中
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子完全 居中</title>
        <style type="text/css">
            body{
                height: 2000px;
            }
            #box{
                width: 200px;
                height:300px ;
                background: #ccc;
                position: absolute;
                left:0px;
                top:0px;
            }
            #box span{
                position: absolute;
                right:10px;
                top:10px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <span>X</span>
        </div>
        <script type="text/javascript">
            var oBox=document.getElementById('box');
            var oSpan=document.getElementsByTagName('span')[0];
            
            /*window.onload=function(){
                oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
                oBox.style.top=(document.documentElement.clientHeight-300)/2+'px';
            }
            
            
            window.onresize=function(){
                oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
                oBox.style.top=(document.documentElement.clientHeight-300)/2+'px';
            }*/
            /*var a=b=2;
            alert(a);
            alert(b);*/
            
            window.onload=window.onresize=function(){
                oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
                oBox.style.top=(document.documentElement.clientHeight-300)/2+'px';
            }
            
            window.onscroll=function(){
                var top=document.documentElement.scrollTop||document.body.scrollTop;
                oBox.style.left=(document.documentElement.clientWidth-200)/2+'px';
                oBox.style.top=(document.documentElement.clientHeight-300)/2+top+'px';
            }
            
            oSpan.onclick=function(){
                oBox.style.display='none';
            }
            
        </script>
    </body>
</html>

DOM的概念及作用

DOM是”Document Object Model”的首字母縮寫，即文檔對(duì)象模型。用來描繪一個(gè)層次 化的節(jié)點(diǎn)樹，允許開發(fā)人員獲取、添加、移除和修改頁面的某一部分。 瀏覽器支持情況：不友好，有兼容問題
（元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)）

DOM的基本操作

  • 查詢（獲取元素）
getElementById() //獲取特定 ID 元素的節(jié)點(diǎn)
getElementsByTagName() //獲取相同元素的節(jié)點(diǎn)列表，返回類數(shù)組，使用[0]來獲取
getElementsByClassName() //獲取相同類名的節(jié)點(diǎn)列表（IE8及以下不支持），返回類數(shù)組
getElementsByName() //獲取相同的name值的元素列表，不是所有標(biāo)簽都有name屬性，返回類數(shù)組


querySelector()/querySelectorAll()//---html5新增
//參數(shù)是css選擇器：是一種快速選擇，css怎么選擇，這兩個(gè)方法也滿足。
        //注意選擇器前面的符號(hào)要添加。
        //querySelector()：如果選擇器有多個(gè)，只找第一個(gè)    
        //querySelectorAll() 符合所有的選擇器的多個(gè)元素    
        
        //alert(document.querySelectorAll('#box li').length);
        
        //alert(document.querySelector('.li1').innerHTML);
  • 創(chuàng)建、添加、刪除、克隆、替換
document.createElement() //創(chuàng)建一個(gè)元素節(jié)點(diǎn)；**創(chuàng)建之后appendChild**
document.createTextNode()  //創(chuàng)建一個(gè)文本節(jié)點(diǎn)，括號(hào)中寫文本內(nèi)容
box.appendChild(node)  //把node節(jié)點(diǎn)插入到box的內(nèi)部最后的位置

        var cH1=document.createElement('h1');//元素對(duì)象
        cH1.innerHTML='大標(biāo)題';
        document.createTextNode()  創(chuàng)建一個(gè)文本節(jié)點(diǎn)
        var cT=document.createTextNode('創(chuàng)建出來的文本');
        cH1.style.background='green';
        box.appendChild(node)  把node節(jié)點(diǎn)插入到box的內(nèi)部最后的位置
        cH1.appendChild(cT);//將文本節(jié)點(diǎn)賦值給cH1
        document.body.appendChild(cH1);//將整個(gè)cH1賦值給body元素，顯示在頁面上
        //拼接
        document.body.innerHTML+='<h2>二標(biāo)題</h2>';//常用（性能原因）
        
box.insertBefore(newNode, existNode)  //把newNode節(jié)點(diǎn)插入到exsitNode的前面
box.removeChild(node)  //刪除子節(jié)點(diǎn) 注意:一定是移除子節(jié)點(diǎn).同時(shí)通過父節(jié)點(diǎn)移除子節(jié)點(diǎn).
obj.cloneNode() //復(fù)制節(jié)點(diǎn),復(fù)制obj元素標(biāo)簽，可以傳一個(gè)布爾值為參數(shù)，如果參數(shù)為true，連同obj子元素一起復(fù)制。
obj.replaceChild(新添加的節(jié)點(diǎn) , 被替換的節(jié)點(diǎn));

應(yīng)用

1．頂部懸浮
2．回到頂部
3．動(dòng)態(tài)創(chuàng)建表格--封裝函數(shù)（DOM創(chuàng)建）

綜合應(yīng)用--表格刪除操作

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容