BOM DOM

時間 2019-11-16

標籤 bom dom 欄目 HTML 简体版

原文原文鏈接

1、前戲

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

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

JavaScript分爲 ECMAScript，DOM，BOM。數組

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

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

Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。框架

例如：window.document.write()能夠簡寫成：document.write()。異步

2、window對象

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

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

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

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

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

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

一些經常使用的Window方法：

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open(url,'',width=400px,height=300px) - 打開新窗口,第二個參數爲空，必須寫。還有其餘好多方法，百度一下
window.close() - 關閉當前窗口

3、window的子對象 BOM

3.1 navigator對象（瞭解便可）

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

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

3.2 screen對象（瞭解便可）

屏幕對象，不經常使用。

一些屬性：

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

3.3 history對象（瞭解便可）

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

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

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

3.4 location對象（掌握）

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

經常使用屬性和方法：

location.href  獲取當前URL
location.href="URL" // 跳轉到指定頁面，異步提交任務要用到
location.reload() 從新加載頁面

3.5 彈出框

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

#警告框

警告框常常用於確保用戶能夠獲得某些信息，只會出如今本身的窗口，別人的你窗口你試不出來

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

語法：

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

#確認框（瞭解便可）

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

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

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

語法：

confirm("你肯定嗎？")

#提示框（瞭解便可）

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

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

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

語法：

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

3.6 計時相關

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function foo() {
        alert(123)
    }
    function show() {
        var t = setInterval(foo,3000);
        function inner(){
            clearInterval(t)
        }
        setTimeout(inner,9000)
    }
    show()


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

View Code

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

3.6.1 一次性定時器

# setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)

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

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

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

# clearTimeout()

語法：

clearTimeout(定時器名字）

舉個例子：

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

3.6.2 循環計時器

# 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);

4、DOM

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

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

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

4.1 HTML DOM 樹

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

文檔節點(document對象)：表明整個文檔
元素節點(element 對象)：表明一個元素（標籤）
文本節點(text對象)：表明元素（標籤）中的文本
屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
註釋是註釋節點(comment對象)

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

JavaScript 可以改變頁面中的全部 HTML 元素
JavaScript 可以改變頁面中的全部 HTML 屬性
JavaScript 可以改變頁面中的全部 CSS 樣式
JavaScript 可以對頁面中的全部事件作出反應

4.1 查找標籤

#標籤變量名

#直接查找

document.getElementById           根據ID獲取一個標籤 標籤
document.getElementsByClassName   根據class屬性獲取標籤合集 列表
document.getElementsByTagName     根據標籤名獲取標籤合集 列表

#js代碼位置

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

1.能夠放在頭部，可是應該放在window.onload內部，不推薦

2.推薦放在body內最下方

#間接查找

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

4.2 節點操做（掌握）

# 建立節點（標籤）

語法：

createElement(標籤名)

示例：

var divEle = document.createElement("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, 某個節點);

4.3 文本節點

# 獲取文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

# 設置文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

4.4 屬性節點

# 增長、獲取、移除

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."

1.點+name='jason' 點方法設置，只能設置默認屬性，不推薦

2. 點+setAttribute('name','jason') 默認非默認均可以設置，推薦使用，每次只能設置一個屬性

4.5獲取值操做

elementNode.value

適用於如下標籤：

.input
.select
.textarea

var iEle = document.getElementById("i1");  input標籤，獲取輸入的值
console.log(iEle.value);
var sEle = document.getElementById("s1");  select標籤，獲取選擇的值
console.log(sEle.value);
var tEle = document.getElementById("t1");  textarea標籤，獲取輸入的值
console.log(tEle.value);

4.6 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 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_red bg_green">

</div>
</body>
</html>

View Code

4.7 指定CSS操做操做樣式

obj.style.backgroundColor="red"

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

5、事件

符合某個條件下自動觸發的動做

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。

下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做

5.1 經常使用事件

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

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

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

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

5.2 綁定方式：

方式一：

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

注意：

this是實參，表示觸發事件的當前元素(相似self)

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

方式二：

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

5.3 事件示例

#點擊事件

圖見上方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script>-->
<!--        window.onload = function () {-->
<!--            function foo() {-->
<!--             alert(123)-->
<!--         }-->
<!--        var b1Ele = document.getElementById("d1");-->
<!--        b1Ele.onclick = function () {-->
<!--            alert(456)}-->
<!--        }-->
<!--</script>-->
</head>
<body>
<button onclick="foo()">按鈕1</button>
<button id="d1">按鈕2</button>

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

        var b1Ele = document.getElementById("d1");
        b1Ele.onclick = function () {
            alert(456)
        }
</script>
</body>
</html>

View Code

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

    <script>
        var b1Ele = document.getElementById('d1');
        var d1Ele = document.getElementsByTagName('div')[0];
        b1Ele.onclick = function () {
            d1Ele.classList.toggle('bg_green')
        }
    </script>
</div>
</body>
</html>

綁定點擊實現開關燈

#焦點事件

（淘寶的搜索框有默認值，鼠標一點就沒了）

#定時器

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

<script>
    // 定義一個全局的變量
    var t = null;
    var inputEle = document.getElementsByClassName('c1')[0];
    function showTime() {
        var currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }
    var d1Ele = document.getElementById('d1');
    var d2Ele = document.getElementById('d2');
    d1Ele.onclick = function () {
        if (!t){  // 與 &&   或||  非!
            t = setInterval(showTime,1000)
        }

    };
    d2Ele.onclick = function () {
        clearInterval(t);
        t = null
    }//沒有這個點擊兩次開始後不能中止






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

定時器

#省市聯動

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

<script>
    var data = {"河北省": ["廊坊", "邯鄲"],
                "北京": ["朝陽區", "海淀區"],
                "山東": ["威海市", "煙臺市"],
                "上海": ["靜安區","黃浦區"],
                "深圳": ["南山區","龍崗區"]
    };
    var seEle = document.getElementById('d1');
    var se2Ele = document.getElementById('d2');
    for (var i in data){
        // 建立option標籤
        var optEle = document.createElement('option');
        // 給標籤添加內部文本值
        optEle.innerText = i;
        // 給標籤設置value屬性值
        optEle.value = i;
        // 將建立好的option標籤添加到第一個select框中
        seEle.appendChild(optEle)
    }

    // 給第一個select框綁定change事件
    seEle.onchange = function () {
        var currentPro = seEle.value;
        var currentCityList = data[currentPro];
        // 先清空第二個select框中全部的option標籤
        se2Ele.innerHTML = '';
        var opttEle = document.createElement('option');
        opttEle.innerText = '---請選擇---';
        se2Ele.appendChild(opttEle);
        // 循環遍歷數組
        for (let i=0;i<currentCityList.length;i++){

            // 動態建立標籤
            var optEle = document.createElement('option');
            optEle.innerText = currentCityList[i];
            optEle.value = currentCityList[i];
            // 將建立出來的option標籤添加到第二個select框中
            se2Ele.appendChild(optEle)
        }
    }
</script>
</body>
</html>