BOM，DOM

時間 2019-11-09

標籤 bom dom 欄目 HTML 简体版

原文原文鏈接

一 BOM

JavaScript分爲 ECMAScript，DOM，BOMcss

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。
DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。

1. window對象

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

　　全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。全局變量是 window 對象的屬性。全局函數是 window 對象的方法。node

一些經常使用的Window方法：瀏覽器

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口

2. location對象

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

經常使用屬性和方法：函數

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

3. 彈出框

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

3.1 警告框

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

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

3.2 確認框

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。spa

confirm("你肯定嗎？")

3.3 提示框

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。code

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

4. 計時相關

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

4.1 setTimeout()

　　js語句一段時間後執行

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

4.2 clearTimeout()

　　消除settimeout（）

clearTimeout(setTimeout_variable)

舉例：

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

4.3 setInterval()

　　按照指定的週期（以毫秒計）來調用函數或計算表達式

　　setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。

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

4.4 clearInterval()

　　取消 setInterval()

clearInterval(setinterval返回的ID值)

舉例：

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

應用實例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>timer</title>
</head>
<body>
<div>歡迎matt蒞臨指導</div>
<script>
    function f() {
        var text1 = document.getElementsByTagName('div')[0];
        var text2 = text1.innerText.slice(1,) + text1.innerText.slice(0, 1);
        text1.innerText=text2
    }
    timer = setInterval(f, 1000)
</script>
</body>
</html>

二 DOM

1. DOM樹

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

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

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

2. 元素查找

　　元素即標籤

2.1 直接查找

document.getElementById()           根據ID獲取一個標籤
document.getElementsByClassName()   根據class屬性獲取
document.getElementsByTagName()     根據標籤名獲取

2.2 間接查找

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

3. 元素操做

　　DOM中的元素操做都是基於父元素，增刪改查都是操做兒子標籤

3.1 建立元素

　　document.createElement（），JQuery中沒有此項

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

3.2 添加元素

兒子添加，至關於JQuery中的：$(A).append(B) ，$(A).appendTo(B)，$(A).prepend(B)，$(A).prependTo(B)

　　fathernode.appendChild(newnode)：追加一個子節點（做爲最後的子節點）

　　fathernode.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);

3.3 刪除元素

　　fathernode.removeChild(要刪除的節點)：經過父元素調用該方法刪除。

3.4 替換元素

　　fathernode.replaceChild(newnode, 某個節點)

4. 文本操做

4.1 獲取文本

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

4.2 設置文本

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

5. 屬性操做

屬性分爲標籤自帶和自定義兩類，自定義經過setAttribute等方法，自帶直接經過屬性名操做

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

// 自帶的屬性經過屬性名來獲取和設置
imgEle.src
imgEle.src="..."  設置

var iEle = document.getElementById("i1");
console.log(iEle.value);

　　具備value值的標籤：input，select，textarea

JQuery中的屬性操做

    $('d1').attr('name');   獲取
    $('d1').attr('name','matt')   設置

6. class操做

6.1 class總體

element.className  獲取全部樣式類名(字符串)
element.classList  獲取樣式類名（列表）

element.classList.remove(cls)  刪除指定類
element.classList.add(cls)  添加類
element.classList.contains(cls)  存在返回true，不然返回false
element.classList.toggle(cls)  存在就刪除，不然添加

JQuery中的class操做

addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

6.2 指定class操做

經過style屬性操做

obj.style.backgroundColor="red"

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

三事件

經常使用事件

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

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

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

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

1. 綁定方式

1.1 標籤內綁定

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

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

1.2 script內綁定

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

實例：省市選擇框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mi</title>
    <!--    <link rel="stylesheet" href="002.css">-->
</head>
<body>
<div></div>
<select name="s1" id="s1">
    <option value="">請選擇省份</option>
</select>
<select name="s2" id="s2">
    <option>請選擇市</option>
</select>
</body>
<script>
    data = {
        '山東省': ['濰坊市', '煙臺市', '青島市'],
        '河北省': ['石家莊市', '秦皇島市'],
        '山西省': ['太原市']
    };
    var s1 = document.getElementById('s1');
    var s2 = document.getElementById('s2');
    for (var i in data) {
        var optEle = document.createElement('option');
        optEle.innerText = i;
        s1.appendChild(optEle)
    }
    s1.onchange = function () {
        s2.innerHTML = '<option >請選擇市</option>';
        // var selectCity = data[this.value];
        var selectCity = data[this.options[this.selectedIndex].innerText];
        for (var i = 0; i < selectCity.length; i++) {
            var optEle = document.createElement('option');
            optEle.innerText = selectCity[i];
            s2.appendChild(optEle)
        }
    }
</script>
</html>