BOM&DOM

一、前言

​ 到目前爲止，咱們已經學過了JavaScript的一些簡單的語法。可是這些簡單的語法，並無和瀏覽器有任何交互。

​ 也就是咱們還不能製做一些咱們常常看到的網頁的一些交互，咱們須要繼續學習BOM和DOM相關知識。

​ JavaScript分爲 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。

​ DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。

​ Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write()。

1.一、window對象

​ 全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

​ 若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。

​ 沒有應用於 window 對象的公開標準，不過全部瀏覽器都支持該對象。

​ 全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

​ 全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

​ 接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

​ 一些經常使用的Window方法：

• window.innerHeight - 瀏覽器窗口的內部高度

• window.innerWidth - 瀏覽器窗口的內部寬度

• window.open() - 打開新窗口

• window.close() - 關閉當前窗口

  示例：

  window.open('http://www.xiaohuar.com','','width=800px,height=400px，top=200px,left=200px');
  // window.open第一個參數是url，第二個參數傳‘’就能夠，第三個參數是指定瀏覽器的長寬和top,left
  window.close();  //關閉當前瀏覽器窗口

1.二、window的子對象

navigator對象（瞭解便可）

​ 瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操做系統

screen對象（瞭解便可）

​ 屏幕對象，不經常使用。

​ 一些屬性：

• screen.availWidth - 可用的屏幕寬度
• screen.availHeight - 可用的屏幕高度

history對象（瞭解便可）

​ window.history 對象包含瀏覽器的歷史。

​ 瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。

history.forward()  // 前進一頁
history.back()  // 後退一頁

location對象

​ window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

​ 經常使用屬性和方法：(重點)

location.href  //  獲取URL
location.href="URL" //  跳轉到指定頁面
location.reload() //  從新加載頁面

# 彈出框

​ 能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

警告框

​ 警告框常常用於確保用戶能夠獲得某些信息。

​ 當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

​ 語法：

alert("你看到了嗎？");

確認框（瞭解便可）

​ 確認框用於使用戶能夠驗證或者接受某些信息。

​ 當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

​ 若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

語法：

confirm("你肯定嗎？")

​ 示例：

confirm("sure?")
true   // 點 肯定 會返回true
confirm("sure?")
false   // 點 取消 會返回false

提示框（瞭解便可）

​ 提示框常常用於提示用戶在進入頁面前輸入某個值。

​ 當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

​ 若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

語法：

prompt("請在下方輸入","你的答案")

​ 示例：

prompt()
"hudvdfjvdjfvnfvj"   // 輸入什麼會返回什麼
prompt()
null   // 什麼都不輸會返回null

# 計時相關

經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)  //多少毫秒後執行JS語句

​ setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。

​ setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

​ 第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。

clearTimeout()

​ 語法：

clearTimeout(setTimeout_variable)  //取消setimeout設置

舉個例子：

// 在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);

​ 示例：

<script>
    function  func() {
        alert(123)
    }

    function demo(){
        let s = setTimeout(func,3000);
        function inner() {
            clearTimeout(s)
        }
        setTimeout(inner,9000)
    }
    demo()
</script>

setInterval()

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

​ setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

​ 語法：

setInterval("JS語句",時間間隔)

返回值

​ 一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。

clearInterval()

​ clearInterval() 方法可取消由 setInterval() 設置的 timeout。

​ clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)

舉個例子：

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);

​ 示例：

/*循環計時器*/
<script>
    function f1() {
        alert(123)
    }
    function clear(){
        let s = setInterval(f1,3000);
        function inner() {
            clearInterval(s)
        }
        setTimeout(inner,9000)
    }
    clear()
</script>

二、DOM

​ DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

​ 當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

​ HTML DOM 模型被構造爲對象的樹。

2.一、HTML DOM樹

​ DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

• 文檔節點(document對象)：表明整個文檔

• 元素節點(element 對象)：表明一個元素（標籤）

• 文本節點(text對象)：表明元素（標籤）中的文本

• 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性

• 註釋是註釋節點(comment對象)　

  JavaScript 能夠經過DOM建立動態的 HTML：

• JavaScript 可以改變頁面中的全部 HTML 元素

• JavaScript 可以改變頁面中的全部 HTML 屬性

• JavaScript 可以改變頁面中的全部 CSS 樣式

• JavaScript 可以對頁面中的全部事件作出反應

2.二、查找標籤

直接查找

document.getElementById           根據ID獲取一個標籤
document.getElementsByClassName   根據class屬性獲取，返回的是一個容器類型
document.getElementsByTagName     根據標籤名獲取標籤合集

注意：

涉及到DOM操做的JS代碼應該放在文檔的哪一個位置。

​ 示例：

<body>
<span id="s1" class="c1">我是div上面的span</span>
<div id="d1" class="c2">我是div
    <span id="s2">我是div裏面的第一個span</span>
    <p id="p1">我是div裏面span下面的p標籤
        <span id="s3">我是div裏面的p標籤裏面的span標籤</span>
    </p>
    <span id="s4">我是div裏面的p標籤下面的span標籤</span>
</div>
<span>我是div下面的span</span>
</body>


document.getElementById("d1");
document.getElementsByClassName('c2')； //獲得一個容器類型
document.getElementsByClassName('c2')[0];
document.getElementsByTagName('span'); //得到5個span
document.getElementsByTagName('span')[2];  //取第3個span

間接查找

parentElement            父節點標籤元素
children                 全部子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

​ 示例：

var pEle = document.getElementById('p1'); //經過id找到p1標籤
pEle.parentElement  //找到p1的父標籤
pEle.parentElement.parentElement //找到p1的父標籤的父標籤

var d1Ele = document.getElementById('d1');
d1Ele.children  // 獲取d1標籤裏的子標籤
d1Ele.children[1]  //經過索引取值

2.三、節點操做

# 建立節點

語法：

createElement(標籤名)

示例：

var divEle = document.createElement("div");

​ 示例：

<body>
<span>div上面的span</span>
<div>div
    <p>div>p</p>
    <span id="s1">div>span</span>
    <p>div>p 
        <span>div>p>span</span>
    </p>
</div>
<span>div+span</span>
</body>

// 動態建立img標籤並賦予它屬性
var imgEle = document.createElement('img') //Js動態建立img標籤
imgEle.src = '1.png';  //給建立的標籤設置自帶的屬性
imgEle.setAttribute('xxx','ooo');  // 給建立的標籤設置自定義屬性，最後獲得<img src="1.png" xxx="ooo">
var divEle = document.getElementsByTagName('div')[0]  // 查找標籤
divEle.appendChild(imgEle)  //將建立好的標籤添加到div標籤內部最後

# 添加節點

​ 語法：

​ 追加一個子節點（做爲最後的子節點）

​ somenode.appendChild(newnode)；

​ 把增長的節點放到某個節點的前邊。

​ somenode.insertBefore(newnode,某個節點);

​ 示例：

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

# 刪除節點：

​ 語法：

​ 得到要刪除的元素，經過父元素調用該方法刪除。

​ somenode.removeChild(要刪除的節點)

# 替換節點：

​ 語法：

​ somenode.replaceChild(newnode, 某個節點);

# 屬性節點：

​ 獲取文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText；//查看標籤內部文本
divEle.innerHTML  //查看標籤內部文本及標籤

​ 設置文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"   //給文本設置標籤，注意和下面的區別
divEle.innerHTML="<p>2</p>"

attribute操做

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."

​ 示例：

var aEle = document.createElement('a');
aEle.xxx = 'jason'; // 錯誤，在給標籤設置自定義屬性的時候不能用點的方式
aEle.setAttribute('href','http://www.xiaohuar.com')  //該方法既能夠設置自定義屬性，也能夠設置自帶的屬性，推薦使用這種方法
aEle.innerText = '點我有你好看';
var spanEle = document.getElementById("s1");
var divEle = document.getElementsByTagName('div')[0];
divEle.insertBefore(aEle,spanEle);  //在某個標籤前面添加元素

# 獲取值操做

語法：

elementNode.value

適用於如下標籤：

• .input
  
• .select
• .textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

​ 示例：

var inputEle = document.getElementsByTagName('input')[0];
inputEle.value  //獲取input框內部文本值
inputEle.value = 'dabaobei'  // 設置input內部文本值

# class的操做

className  獲取全部樣式類名(字符串)
classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加

​ 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 3px solid black;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_red bg_green"></div>
</body>
</html>

var divEle = document.getElementsByClassName('c1')[0];
divEle.classList; // 都有哪些類
divEle.classList.remove('bg_green'); //刪除
divEle.classList.add('bg_green'); //添加
divEle.classList.contains('bg_red'); //判斷是否存在這個類
divEle.classList.toggle('bg_green'); //有的話就刪除，沒有就添加

# 指定CSS操做**

obj.style.backgroundColor="red"；
obj.style.height = '1000px';
// 操做標籤CSS樣式統一用style去點相應樣式屬性名

​ JS操做CSS屬性的規律：

​ 1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

​ 2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

2.四、事件

​ HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。

# 經常使用事件

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

onfocus        元素得到焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

​ 補充：

// js代碼的書寫位置
// 一、寫在head裏面，要寫成下面這樣，表示當頁面所有加載完畢以後再執行js代碼
window.onload = function(){
    var b1Ele = document.getElementById('b1');
};
// 二、直接將js代碼寫在文檔最下方，body以前

# 綁定方式

​ 方式一：

<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

​ 注意：

​ this是實參，表示觸發事件的當前元素。

​ 函數定義過程當中的ths爲形參。

​ 方式二：

<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

# 點擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 3px solid black;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }

    </style>

</head>
<body>
<div class="c1 bg_red bg_green"></div>
<button id="b1">給你戴帽子</button>
<img src="1.png" alt="" id="d1"> //這句只是說明不只僅只有按鈕能夠點擊，全部標籤均可以點擊
<script>
    // 驗證圖片也能夠點擊
    let iEle = document.getElementById('d1');
    iEle.onclick = function () {
        alert(123)
    };

    // 先找到你想綁定事件的那個標籤
    var b1ELe = document.getElementById('b1');
    // 給這個標籤對象綁定相應的事件
    b1ELe.onclick = function () {
        // 找到事件影響的標籤對象
        let dEle = document.getElementsByClassName('c1')[0];
        dEle.classList.toggle('bg_green')
    }
</script>
</body>
</html>

# 獲取焦點事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="618大促" id="i1">

<script>
    let iEle = document.getElementById('i1');
    iEle.onfocus = function () {  //獲取焦點
        iEle.value = ''
    };
    iEle.onblur = function () {  //失去焦點
        iEle.value = '有錢就買Mac!'
    }
</script>
</body>
</html>

# 定時器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">開始</button>
<button id="b2">結束</button>

<script>
    // 定義一個存儲定時器的全局變量
    var flag;
    // 先獲取代碼中須要用到的一些固定標籤對象
    var b1Ele = document.getElementById('b1');
    var iEle = document.getElementById('d1');
    var b2Ele = document.getElementById('b2');
    // 定義一個展現時間的函數
    var showTime = function(){
        // 獲取當前時間
        var cTime = new Date();
        iEle.value = cTime.toLocaleString()
    };
    // 給b1標籤綁定點擊事件
    b1Ele.onclick = function () {
        // 先判斷flag是否已經指代了一個定時器
        if (!flag){
            flag = setInterval(showTime,1000)
        }
    };
    b2Ele.onclick = function () {
        // 取消定時器
        clearInterval(flag);
        // 將標誌位手動置爲布爾值爲false的值便可
        flag = null;
    }
</script>
</body>
</html>

# 搜索框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>
</html>

# select聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1"></select>
    
<select name="" id="d2"></select>

<script>
    // 先獲取須要操做的標籤對象
    let proEle = document.getElementById('d1');
    let cityEle = document.getElementById('d2');
    let data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};
    // 將全部的省渲染到proEle標籤內部  for循環獲取全部的省
    for (let pro in data){
        // 建立option標籤
        let opEle = document.createElement('option');
        // 給option標籤設置文本值
        opEle.innerText = pro;
        // 將生成的option標籤添加到proEle中
        proEle.appendChild(opEle)
    }
    proEle.onchange = function () {
        // 先清空cityEle標籤內全部的內容
        cityEle.innerHTML = '';
        // 獲取用戶選擇的省 根據省拿到對應的市
        let choice_pro = proEle.value;
        let cityList = data[choice_pro];
        // for循環建立option標籤添加到cityEle標籤內
        for (let i=0;i<cityList.length;i++){
            // 建立option標籤並添加文本
            let cEle = document.createElement('option');
            // 給option標籤設置文本值
            cEle.innerText = cityList[i];
            // 將生成的option標籤添加到proEle中
            cityEle.appendChild(cEle)
        }
    }

</script>
</body>
</html>

2.五、window.onload

​ 當咱們給頁面上的元素綁定事件的時候，必須等到文檔加載完畢。由於咱們沒法給一個不存在的元素綁定事件。

​ window.onload事件在文件加載過程結束的時候觸發。此時，文檔中的全部對象都位於DOM中，而且全部圖像，腳本，連接和子框架都已完成加載。

​ 注意：.onload()函數存在覆蓋現象。