JavaScript之 BOM 與 DOM

時間 2019-11-07

原文原文鏈接

1. JavaScript 組成

2. DOM、DOCUMENT、BOM、WINDOW 區別

DOM 是爲了操做文檔出現的 API ， document 是其的一個對象；
BOM 是爲了操做瀏覽器出現的 API，window是其的一個對象。
BOM 是瀏覽器對象模型，DOM是文檔對象模型，前者是對瀏覽器自己進行操做，然後者是對瀏覽器內的內容進行操做。javascript

歸DOM管的：

E區（由web開發人員寫出來的一個文件夾，裏面有index.html，css，js 部署到服務器上，咱們經過瀏覽器的地址欄輸入URL而後回車將這個document 加載到本地，瀏覽，右鍵查看源代碼等）。

歸BOM管的：

A區（瀏覽器的標籤頁、地址欄、搜索欄、書籤欄、窗口放大還原關閉按鈕，菜單欄等）
B區（瀏覽器右鍵菜單）
C區（document加載時的狀態欄，顯示http狀態碼等）
D區（滾動條）css

2.1 BOM

BOM 是 Browser Object Model，瀏覽器對象模型。
BOM是爲了控制瀏覽器的行爲出現的接口。好比跳轉到另外一個頁面、前進、後退等等，程序可能還須要獲取屏幕的大小之類的參數。html

location.href='https://www.cnblogs.com/';

這個 location 就是 BOM 裏的一個對象。java

2.2 WINDOW

window 也是 BOM 的一個對象，經過這個對象能夠獲取瀏覽器的窗口位置、肯定窗口大小、彈出對話框等等。
一些 window 經常使用的方法：node

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

2.2.1 WINDOW 的子對象web

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

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

screen 對象
屏幕對象，不經常使用服務器

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

history 對象cookie

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

經常使用屬性和方法：

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

彈出框

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

警告框

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

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

語法：

alert('吃了嗎？')

確認框

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

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

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

語法：

confirm('are you ok?');

提示框

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

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

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

這裏想起來一個計算 BMI 的例子：

var height = parseFloat(prompt('請輸入身高（m）:'));
var weight = parseFloat(prompt('請輸入體重（kg）:'));

var bmi = weight / height**2;

if (bmi < 18.5) {
    alert('太輕');
} else if (bmi < 25) {
    alert('正常');
} else if (bmi < 28) {
    alert('太重');
} else if (bmi < 32) {
    alert('肥胖');
} else {
    alert('嚴重肥胖');
}

計時相關

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

setTimeout()

語法：

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

示例：

clearTimeout()

語法：

clearTimeout(setTimeout_variable)

示例：

setInterval()

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

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

語法：

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

clearInterval()

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

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

語法：

clearInterval(setinterval返回的ID值)

例子：

其餘全部對象方法：

window.close(); //關閉窗口
window.alert("message"); //彈出一個具備OK按鈕的系統消息框，顯示指定的文本
window.confirm("Are you sure?"); //彈出一個具備OK和Cancel按鈕的詢問對話框，返回一個布爾值
window.prompt("What's your name?", "Default"); //提示用戶輸入信息，接受兩個參數，即要顯示給用戶的文本和文本框中的默認值，將文本框中的值做爲函數值返回
window.status //可使狀態欄的文本暫時改變
window.defaultStatus //默認的狀態欄信息，可在用戶離開當前頁面前一直改變文本
window.setTimeout("alert('xxx')", 1000); //設置在指定的毫秒數後執行指定的代碼，接受2個參數，要執行的代碼和等待的毫秒數
window.clearTimeout("ID"); //取消還未執行的暫停，將暫停ID傳遞給它
window.setInterval(function, 1000); //無限次地每隔指定的時間段重複一次指定的代碼，參數同setTimeout()同樣
window.clearInterval("ID"); //取消時間間隔，將間隔ID傳遞給它
window.history.go(-1); //訪問瀏覽器窗口的歷史，負數爲後退，正數爲前進
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //能夠查看歷史中的頁面數  
clearInterval() 取消由 setInterval() 設置的 timeout。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
createPopup() 建立一個 pop-up 窗口。
moveBy() 可相對窗口的當前座標把它移動指定的像素。
moveTo() 把窗口的左上角移動到一個指定的座標。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
print() 打印當前窗口的內容。
resizeBy() 按照指定的像素調整窗口的大小。
resizeTo() 把窗口的大小調整到指定的寬度和高度。
scrollBy() 按照指定的像素值來滾動內容。
scrollTo() 把內容滾動到指定的座標。
setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
setTimeout(方法,秒數)    在指定的毫秒數後調用函數或計算表達式。
timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時器傳參數

2.3 DOM

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

HTML DOM樹

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

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

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

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

2.3.1 對象屬性

document.body    //提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。
document.cookie    //返回與當前文檔有關的全部 cookie。
document.title    //返回文檔標題等價於HTML的title標籤
document.domain    //返回當前文檔的域名。
document.URL    //設置URL屬性從而在同一窗口打開另外一網頁
document.referrer    //返回載入當前文檔的文檔的 URL。
document.lastModified    //返回文檔被最後修改的日期和時間。

2.3.2 查找標籤

（1）直接查找

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

（2）間接查找

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

parentElement 經過子標籤獲取父標籤

語法：

子標籤.parentElement

示例：

children 經過父標籤獲取全部子標籤

語法：

父標籤.children

firstElementChild 經過父標籤獲取第一個子標籤

語法：

父標籤.firstElementChild

lastElementChild 經過父標籤獲取最後一個子標籤

語法：

父標籤.lastElementChild

nextElementSibling 經過該元素獲取下一個兄弟元素

previousElementSibling 經過該元素獲取上一個兄弟元素

語法：

標籤.nextElementSibling       // 經過該元素獲取下一個兄弟元素
標籤.previousElementSibling   // 經過該元素獲取上一個兄弟元素

2.4 節點操做

（1）建立節點

語法：

createElement(標籤名)

示例：

var p4Ele = document.createElement('p');

（2）添加節點

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

語法：

父標籤.appendChild(新標籤)

示例：

把增長的節點放到某個節點前面

語法：

父標籤.insertBefore(新標籤, 某個節點)

（3）刪除節點

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

語法：

父標籤.removeChild(要刪除的節點)

（4）替換節點

語法：

父標籤.replaceChild(newnode, 某個節點);

（5）獲取值操做

語法：

elementNode.value

適用於如下標籤：

.input
.select
.textarea

// 獲取 input 值
var i1Ele = document.getElementById('i1');
i1Ele.value;
輸出："hukey"

// 獲取 select 值
var s1Ele = document.getElementById('s1');
s1Ele.value;
輸出："1"

// 獲取 textarea 值
var t1Ele = document.getElementById('t1');
t1Ele.value
輸出："123123123123"

2.5 事件

（1）經常使用事件

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

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

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

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

（2）綁定方式

綁定方式-1

<div id="d1" style="background-color: green" onclick="changeColor(this)">點我變色</div>

<script>
    function changeColor(tsh) {
        tsh.style.backgroundColor='red';
    }
</script>

綁定方式-2

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

2個示例：

<label>
    <input id="d1" type="text" value="請輸入關鍵字" onfocus="myfo()" onblur="myblur()">
</label>

<script>
    function myfo() {
        var divEle = document.getElementById('d1');
        if (divEle.value === "請輸入關鍵字") {
            divEle.value="";
        }
    }
    function myblur() {
        var divEle = document.getElementById('d1');
        if (divEle.value === "") {
            divEle.value = '請輸入關鍵字';
        }
    }
</script>

搜索框示例

<select id="s1">
    <option>請選擇省份:</option>
</select>

<select id="city">
    <option>請選擇城市:</option>
</select>

<script>
    data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};
    var p = document.getElementById('s1');
    var c = document.getElementById('city');
    for (var i in data) {
        var optionEle = document.createElement('option');
        optionEle.innerHTML=i;
        p.appendChild(optionEle);
    }
    p.onchange = function () {
        var pro = (this.options[this.selectedIndex]).innerHTML;
        var citys = data[pro];
        c.innerHTML = '';
        for (var i=0; i< citys.length; i++) {
            var option_city = document.createElement("option");
            option_city.innerHTML = citys[i];
            c.appendChild(option_city);
        }
    }

</script>