前端05.js入門之BOM對象與DOM對象。

一、關于BOM對象。

BOM（瀏覽器對象模型），可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。

用于操控用戶瀏覽器。

1.window對象：

所有瀏覽器都支持 window 對象。

    概念上講.一個html文檔對應一個window對象.

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

    使用上講: window對象不需要創建對象,直接使用即可.

下面是window對象的常用方法：

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

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

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

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

close()            關閉瀏覽器窗口。

setInterval()      按照指定的周期（以毫秒計）來調用函數或計算表達式。

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

setTimeout()       在指定的毫秒數后調用函數或計算表達式。

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

scrollTo()         把內容滾動到指定的坐標。

交互示例：

方法講解:    

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

    //alert('aaa');

    /* var result = confirm("您確定要刪除嗎?");

    alert(result); */

    //prompt 參數1 : 提示信息.   參數2:輸入框的默認值. 返回值是用戶輸入的內容.

    // var result = prompt("請輸入一個數字!","haha");

    // alert(result);

    方法講解:    

        //open方法 打開和一個新的窗口 并 進入指定網址.參數1 : 網址.

        //調用方式1

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

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

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

        //close方法  將當前文檔窗口關閉.

            //close();

示例2：

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

function acceptInput(){

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

var userNum = prompt("請輸入一個0~100之間的數字!","0");

//3.將用戶輸入的值與 隨機數進行比較

        if(isNaN(+userNum)){

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

            alert("請輸入有效數字!");

            acceptInput();

        }

        else if(userNum > num){

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

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

            acceptInput();

        }else if(userNum < num){

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

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

            acceptInput();

        }else{

        //答對了==>提示用戶答對了 , 詢問用戶是否繼續游戲(confirm).

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

            if(result){

                //是 ==> 重復123步驟.

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

                acceptInput();

            }else{

                //否==> 關閉窗口(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); // 只調用一次對應函數.

            clearTimeout(ID);

    function abc(){

        alert('aaa');

    }

2.History 對象（用來做頁面后退）

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。

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

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

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

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

示例：

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

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

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

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

3.Location 對象（一般用來做頁面的各種跳轉）

Location 對象包含有關當前 URL 的信息。

Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。

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

location.reload()

location.replace(newURL)//注意與assign的區別 #直接覆蓋當前頁面。

二、DOM對象(DHTML)

1.什么是dom？

DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：

"W3C 文檔對象模型（DOM）是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"

W3C DOM 標準被分為 3 個不同的部分：

核心 DOM - 針對任何結構化文檔的標準模型

XML DOM - 針對 XML 文檔的標準模型

HTML DOM - 針對 HTML 文檔的標準模型

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

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

2.關于dom節點的定義。

HTML 文檔中的所有內容都是節點(NODE)：

整個文檔是一個文檔節點(document對象)

每個 HTML 元素是元素節點(element 對象)

HTML 元素內的文本是文本節點(text對象)

每個 HTML 屬性是屬性節點(attribute對象)

注釋是注釋節點(comment對象)

Document（整個html文檔）

Element （文檔中的標簽）

節點(自身)屬性:

attributes - 節點（元素）的屬性節點

nodeType – 節點類型

nodeValue – 節點值

nodeName – 節點名稱

innerHTML - 節點（元素）的文本值

導航屬性:

parentNode - 節點（元素）的父節點 (推薦)

firstChild – 節點下第一個子元素

lastChild – 節點下最后一個子元素

childNodes - 節點（元素）的子節點 

parentElement              // 父節點標簽元素

children                        // 所有子標簽

firstElementChild          // 第一個子標簽元素

lastElementChild           // 最后一個子標簽元素

nextElementtSibling       // 下一個兄弟標簽元素

previousElementSibling  // 上一個兄弟標簽元素

節點樹中的節點彼此擁有層級關系。

父(parent),子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱為根（root）

每個節點都有父節點、除了根（它沒有父節點）

一個節點可擁有任意數量的子

同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分，以及節點之間的關系：

訪問 HTML 元素（節點）,訪問 HTML 元素等同于訪問節點,我們能夠以不同的方式來訪問 HTML 元素：

頁面查找：

通過使用 getElementById() 方法 

通過使用 getElementsByTagName() 方法 

通過使用 getElementsByClassName() 方法 

通過使用 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 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

onclick        當用戶點擊某個對象時調用的事件句柄。

ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               //練習：輸入框

onblur         元素失去焦點。               應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.

onchange       域的內容被改變。             應用場景：通常用于表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.

onkeypress     某個鍵盤按鍵被按下并松開。

onkeyup        某個鍵盤按鍵被松開。

onload         一張頁面或一幅圖像完成加載。

   鼠標按鈕被按下。

   鼠標被移動。

    鼠標從某元素移開。

   鼠標移到某元素之上。

  鼠標從元素離開

onselect      文本被選中。

onsubmit      確認按鈕被點擊。

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

方式1：

<div onclick="alert(123)">點我呀</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參數必須填寫;

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

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

         console.log(this.id);

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

    }

</script>

onload：

onload 屬性開發中 只給 body元素加.

這個屬性的觸發 標志著 頁面內容被加載完成.

應用場景: 當有些事情我們希望頁面加載完立刻執行,那么可以使用該事件屬性.

例：

<!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:

是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.

例：

<form id="form">

            <input type="text"/>

            <input type="submit" value="點我!" />

</form>

<script type="text/javascript">

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

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

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

            ele.onsubmit=function(event) {

//                alert("驗證失敗 表單不會提交!");

//                return false;

            // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動作。

             alert("驗證失敗 表單不會提交!");

             event.preventDefault();

Event 對象

Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,并且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.

比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這里就時KeyCode；