前端05.js入門之BOM對(duì)象與DOM對(duì)象。

一、關(guān)于BOM對(duì)象。

BOM（瀏覽器對(duì)象模型），可以對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作。使用 BOM，開(kāi)發(fā)者可以移動(dòng)窗口、改變狀態(tài)欄中的文本以及執(zhí)行其他與頁(yè)面內(nèi)容不直接相關(guān)的動(dòng)作。

用于操控用戶瀏覽器。

1.window對(duì)象：

所有瀏覽器都支持 window 對(duì)象。

    概念上講.一個(gè)html文檔對(duì)應(yīng)一個(gè)window對(duì)象.

    功能上講: 控制瀏覽器窗口的.

    使用上講: window對(duì)象不需要?jiǎng)?chuàng)建對(duì)象,直接使用即可.

下面是window對(duì)象的常用方法：

alert()            顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。

confirm()          顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框。

prompt()           顯示可提示用戶輸入的對(duì)話框。

open()             打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。

close()            關(guān)閉瀏覽器窗口。

setInterval()      按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。

clearInterval()    取消由 setInterval() 設(shè)置的 timeout。

setTimeout()       在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。

clearTimeout()     取消由 setTimeout() 方法設(shè)置的 timeout。

scrollTo()         把內(nèi)容滾動(dòng)到指定的坐標(biāo)。

交互示例：

方法講解:    

        //----------alert confirm prompt----------------------------

    //alert('aaa');

    /* var result = confirm("您確定要?jiǎng)h除嗎?");

    alert(result); */

    //prompt 參數(shù)1 : 提示信息.   參數(shù)2:輸入框的默認(rèn)值. 返回值是用戶輸入的內(nèi)容.

    // var result = prompt("請(qǐng)輸入一個(gè)數(shù)字!","haha");

    // alert(result);

    方法講解:    

        //open方法 打開(kāi)和一個(gè)新的窗口 并 進(jìn)入指定網(wǎng)址.參數(shù)1 : 網(wǎng)址.

        //調(diào)用方式1

            //open("http://www.baidu.com");

        //參數(shù)1 什么都不填 就是打開(kāi)一個(gè)新窗口.  參數(shù)2.填入新窗口的名字(一般可以不填). 參數(shù)3: 新打開(kāi)窗口的參數(shù).

            open('','','width=200,resizable=no,height=100'); // 新打開(kāi)一個(gè)寬為200 高為100的窗口

        //close方法  將當(dāng)前文檔窗口關(guān)閉.

            //close();

示例2：

var num = Math.round(Math.random()*100);

function acceptInput(){

//2.讓用戶輸入(prompt)    并接受 用戶輸入結(jié)果

var userNum = prompt("請(qǐng)輸入一個(gè)0~100之間的數(shù)字!","0");

//3.將用戶輸入的值與 隨機(jī)數(shù)進(jìn)行比較

        if(isNaN(+userNum)){

            //用戶輸入的無(wú)效(重復(fù)2,3步驟)

            alert("請(qǐng)輸入有效數(shù)字!");

            acceptInput();

        }

        else if(userNum > num){

        //大了==> 提示用戶大了,讓用戶重新輸入(重復(fù)2,3步驟)

            alert("您輸入的大了!");

            acceptInput();

        }else if(userNum < num){

        //小了==> 提示用戶小了,讓用戶重新輸入(重復(fù)2,3步驟)

            alert("您輸入的小了!");

            acceptInput();

        }else{

        //答對(duì)了==>提示用戶答對(duì)了 , 詢問(wèn)用戶是否繼續(xù)游戲(confirm).

            var result = confirm("恭喜您!答對(duì)了,是否繼續(xù)游戲?");

            if(result){

                //是 ==> 重復(fù)123步驟.

                num = Math.round(Math.random()*100);

                acceptInput();

            }else{

                //否==> 關(guān)閉窗口(close方法).

                close();

            }

        }

setInterval&clearInterval

<input id="ID1" type="text" onclick="begin()">

<button onclick="end()">停止</button>

<script>

    function showTime(){

           var nowd2=new Date().toLocaleString();

           var temp=document.getElementById("ID1");

           temp.value=nowd2;

    }

    var clock;

    function begin(){

        if (clock==undefined){

             showTime();

             clock=setInterval(showTime,1000);

        }

    }

    function end(){

        clearInterval(clock);

    }

</script>

setTimeout&clearTimeout：

var ID = setTimeout(abc,2000); // 只調(diào)用一次對(duì)應(yīng)函數(shù).

            clearTimeout(ID);

    function abc(){

        alert('aaa');

    }

2.History 對(duì)象（用來(lái)做頁(yè)面后退）

History 對(duì)象包含用戶（在瀏覽器窗口中）訪問(wèn)過(guò)的 URL。

History 對(duì)象是 window 對(duì)象的一部分，可通過(guò) window.history 屬性對(duì)其進(jìn)行訪問(wèn)。

length  返回瀏覽器歷史列表中的 URL 數(shù)量。

back()    加載 history 列表中的前一個(gè) URL。

forward()    加載 history 列表中的下一個(gè) URL。

go()    加載 history 列表中的某個(gè)具體頁(yè)面。

示例：

<a href="rrr.html">click</a>

<button  history.forward()">>>></button>

<button onclick="history.back()">back</button>

<button onclick="history.go()">back</button>

3.Location 對(duì)象（一般用來(lái)做頁(yè)面的各種跳轉(zhuǎn)）

Location 對(duì)象包含有關(guān)當(dāng)前 URL 的信息。

Location 對(duì)象是 Window 對(duì)象的一個(gè)部分，可通過(guò) window.location 屬性來(lái)訪問(wèn)。

location.assign(URL) #以鏈接的形式跳轉(zhuǎn)，可返回上一個(gè)頁(yè)面

location.reload()

location.replace(newURL)//注意與assign的區(qū)別 #直接覆蓋當(dāng)前頁(yè)面。

二、DOM對(duì)象(DHTML)

1.什么是dom？

DOM 是 W3C（萬(wàn)維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。DOM 定義了訪問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)：

"W3C 文檔對(duì)象模型（DOM）是中立于平臺(tái)和語(yǔ)言的接口，它允許程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。"

W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分：

核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型

XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型

HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型

什么是 XML DOM？  －－－－>XML DOM 定義了所有 XML 元素的對(duì)象和屬性，以及訪問(wèn)它們的方法。

什么是 HTML DOM？－－－－>HTML DOM 定義了所有 HTML 元素的對(duì)象和屬性，以及訪問(wèn)它們的方法

2.關(guān)于dom節(jié)點(diǎn)的定義。

HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)(NODE)：

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)(document對(duì)象)

每個(gè) HTML 元素是元素節(jié)點(diǎn)(element 對(duì)象)

HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)(text對(duì)象)

每個(gè) HTML 屬性是屬性節(jié)點(diǎn)(attribute對(duì)象)

注釋是注釋節(jié)點(diǎn)(comment對(duì)象)

Document（整個(gè)html文檔）

Element （文檔中的標(biāo)簽）

節(jié)點(diǎn)(自身)屬性:

attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)

nodeType – 節(jié)點(diǎn)類型

nodeValue – 節(jié)點(diǎn)值

nodeName – 節(jié)點(diǎn)名稱

innerHTML - 節(jié)點(diǎn)（元素）的文本值

導(dǎo)航屬性:

parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn) (推薦)

firstChild – 節(jié)點(diǎn)下第一個(gè)子元素

lastChild – 節(jié)點(diǎn)下最后一個(gè)子元素

childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn) 

parentElement              // 父節(jié)點(diǎn)標(biāo)簽元素

children                        // 所有子標(biāo)簽

firstElementChild          // 第一個(gè)子標(biāo)簽元素

lastElementChild           // 最后一個(gè)子標(biāo)簽元素

nextElementtSibling       // 下一個(gè)兄弟標(biāo)簽元素

previousElementSibling  // 上一個(gè)兄弟標(biāo)簽元素

節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。

父(parent),子(child)和同胞(sibling)等術(shù)語(yǔ)用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

在節(jié)點(diǎn)樹中，頂端節(jié)點(diǎn)被稱為根（root）

每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根（它沒(méi)有父節(jié)點(diǎn)）

一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子

同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)

下面的圖片展示了節(jié)點(diǎn)樹的一部分，以及節(jié)點(diǎn)之間的關(guān)系：

訪問(wèn) HTML 元素（節(jié)點(diǎn)）,訪問(wèn) HTML 元素等同于訪問(wèn)節(jié)點(diǎn),我們能夠以不同的方式來(lái)訪問(wèn) HTML 元素：

頁(yè)面查找：

通過(guò)使用 getElementById() 方法 

通過(guò)使用 getElementsByTagName() 方法 

通過(guò)使用 getElementsByClassName() 方法 

通過(guò)使用 getElementsByName() 方法 

局部查找：

<div id="div1">

    <div class="div2">i am div2</div>

    <div name="yuan">i am div2</div>

    <div id="div3">i am div2</div>

    <p>hello p</p>

</div>

<script>

   var div1=document.getElementById("div1");

////支持;

//   var ele= div1.getElementsByTagName("p");

//   alert(ele.length);

////支持

//   var ele2=div1.getElementsByClassName("div2");

//   alert(ele2.length);

////不支持

//   var ele3=div1.getElementById("div3");

//   alert(ele3.length);

////不支持

//   var ele4=div1.getElementsByName("yuan");

//   alert(ele4.length)

</script>

三、DOM Event(事件)

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發(fā)瀏覽器中的動(dòng)作（action），比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表，這些屬性可插入 HTML 標(biāo)簽來(lái)定義事件動(dòng)作。

onclick        當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。

ondblclick     當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。

onfocus        元素獲得焦點(diǎn)。               //練習(xí)：輸入框

onblur         元素失去焦點(diǎn)。               應(yīng)用場(chǎng)景：用于表單驗(yàn)證,用戶離開(kāi)某個(gè)輸入框時(shí),代表已經(jīng)輸入完了,我們可以對(duì)它進(jìn)行驗(yàn)證.

onchange       域的內(nèi)容被改變。             應(yīng)用場(chǎng)景：通常用于表單元素,當(dāng)元素內(nèi)容被改變時(shí)觸發(fā).（三級(jí)聯(lián)動(dòng)）

onkeydown      某個(gè)鍵盤按鍵被按下。          應(yīng)用場(chǎng)景: 當(dāng)用戶在最后一個(gè)輸入框按下回車按鍵時(shí),表單提交.

onkeypress     某個(gè)鍵盤按鍵被按下并松開(kāi)。

onkeyup        某個(gè)鍵盤按鍵被松開(kāi)。

onload         一張頁(yè)面或一幅圖像完成加載。

   鼠標(biāo)按鈕被按下。

   鼠標(biāo)被移動(dòng)。

    鼠標(biāo)從某元素移開(kāi)。

   鼠標(biāo)移到某元素之上。

  鼠標(biāo)從元素離開(kāi)

onselect      文本被選中。

onsubmit      確認(rèn)按鈕被點(diǎn)擊。

兩種為屬性添加事件的方式：

方式1：

<div onclick="alert(123)">點(diǎn)我呀</div>

<p id="abc">試一試!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){

        alert("hi");

    };

</script>

方式2：

<div id="abc" onclick="func1(this)">事件綁定方式1</div>

<div id="id123">事件綁定方式2</div>

<script>

    function func1(self){

        console.log(self.id)

    }

    //jquery下是$(self), 這種方式this參數(shù)必須填寫;

//------------------------------------------

    var ele=document.getElementById("id123").onclick=function(){

         console.log(this.id);

        //jquery下是$(this), 這種方式不需要this參數(shù);

    }

</script>

onload：

onload 屬性開(kāi)發(fā)中 只給 body元素加.

這個(gè)屬性的觸發(fā) 標(biāo)志著 頁(yè)面內(nèi)容被加載完成.

應(yīng)用場(chǎng)景: 當(dāng)有些事情我們希望頁(yè)面加載完立刻執(zhí)行,那么可以使用該事件屬性.

例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

//          window.onload=function(){

//               var ele=document.getElementById("ppp");

//               ele.onclick=function(){

//                alert(123)

//            };

//          };

          function fun1() {

              var ele=document.getElementById("ppp");

               ele.onclick=function(){

                alert(123)

            };

          }

    </script>

</head>

<body onload="fun1()">

<p id="ppp">hello p</p>

</body>

</html>

onsubmit:

是當(dāng)表單在提交時(shí)觸發(fā). 該屬性也只能給form元素使用.應(yīng)用場(chǎng)景: 在表單提交前驗(yàn)證用戶輸入是否正確.如果驗(yàn)證失敗.在該方法中我們應(yīng)該阻止表單的提交.

例：

<form id="form">

            <input type="text"/>

            <input type="submit" value="點(diǎn)我!" />

</form>

<script type="text/javascript">

            //阻止表單提交方式1().

            //onsubmit 命名的事件函數(shù),可以接受返回值. 其中返回false表示攔截表單提交.其他為放行.

            var ele=document.getElementById("form");

            ele.onsubmit=function(event) {

//                alert("驗(yàn)證失敗 表單不會(huì)提交!");

//                return false;

            // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作。

             alert("驗(yàn)證失敗 表單不會(huì)提交!");

             event.preventDefault();

Event 對(duì)象

Event 對(duì)象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。

事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！event對(duì)象在事件發(fā)生時(shí)系統(tǒng)已經(jīng)創(chuàng)建好了,并且會(huì)在事件函數(shù)被調(diào)用時(shí)傳給事件函數(shù).我們獲得僅僅需要接收一下即可.

比如onkeydown,我們想知道哪個(gè)鍵被按下了，需要問(wèn)下event對(duì)象的屬性，這里就時(shí)KeyCode；