• DOM物件
  • 1. DOM 簡介
  • 2. HTML DOM 樹
  • 3. DOM 節點
  • 4. DOM 查詢
  • 5. DOM 操作
  • 6. DOM 事件
  • 7. DOM 優化
• BOM 物件
  • 1. window 物件
  • 2. Navigator 物件
  • 3. Screen 物件
  • 4. Location 物件
  • 5. History 物件

DOM物件

1. DOM 簡介

DOM （Document Object Model）是 W3C 的標準，是指文件物件模型（樹結構）。

DOM 定義了訪問和操作 HTML 文件的標準方法。通過它，可以訪問HTML文件的所有元素。

2. HTML DOM 樹

3. DOM 節點

根據 W3C 的 HTML DOM 標準，HTML 文件中的所有內容都是節點(NODE)：

• 文件節點：整個文件（document物件）
• 元素節點：每個 HTML 元素（element 物件）
• 文字節點：HTML 元素內的文字（text物件）
• 屬性節點：每個 HTML 屬性（attribute物件）
• 註釋節點：註釋（comment物件）

畫dom樹是為了展示文件中各個物件之間的關係，用於物件的導航。這裡只需要記住 Document 物件和 Element 物件即可。

4. DOM 查詢

直接查詢

// 根據標籤名獲取標籤合集
const div1 = document.getElementsByTagName("div"); // div1 div2 div3 div4 div5 (元素集合 HTMLCollection)
const div2 = document.querySelectorAll("div"); // div1 div2 div3 div4 div5 (節點集合 NodeList)

// 根據class屬性獲取
const div3 = document.getElementsByClassName("div"); // div1 div2 (元素集合 HTMLCollection)
const div4 = document.querySelectorAll(".div"); // div1 div2 (節點集合 NodeList)

// 根據id屬性值獲取
const div5 = document.getElementById("div"); // div3 (一個標籤)
const div6 = document.querySelectorAll("#div"); // div3 (節點集合 NodeList)

// 根據name屬性值獲取
const div7 = document.getElementsByName("div"); // div4 div5 (節點集合 NodeList)

// 根據標籤名獲取標第一個
const div8 = document.querySelector("div"); // div1 (一個標籤)
 

間接查詢

parentElement　　　　　　　//父節點標籤元素
children　　　　  　　　　 //所有子標籤
firstElementChild　　　　 //第一個子標籤元素
lastElementChild　　　　  //最後一個子標籤元素
nextElementtSibling　　  //下一個兄弟標籤元素
previousElementSibling  //上一個兄弟標籤元素

// 示例:
var ele1=document.getElementsByTagName("a")[0];
var ele2=ele1.parentElement;
console.log(ele2);

5. DOM 操作

// 建立節點
var divEle = document.createElement("div");
var pEle = document.createElement("p");
var aEle = document.createElement("a");

// 新增節點
document.body.appendChild(divEle);  // 將上面建立的div元素加入到body的尾部
document.body.insertBefore(pEle, divEle);  // 在body下，將p元素新增到div元素前面

//替換節點
document.body.replaceChild(aEle, pEle);  // 在body下，用a元素替換p元素

//設定文字節點
aEle.innerText = "在幹嘛"
divEle .innerHTML = "<p>在幹嘛<p/>"

//設定屬性
divEle .setAttribute("class","list"); // 給div元素加上class='list'屬性

//獲取class值
divEle.className // 獲取div元素上的class

// 設定style樣式
divEle.style.color = "red"; // 把div元素的color樣式設定成red
divEle.style.margin = "10px"
divEle.style.width = "10px"
divEle.style.left = "10px"
divEle.style.position = "relative"

6. DOM 事件

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

常用事件：

onclick        當用戶點選某個物件時呼叫的事件控制代碼。
ondblclick     當用戶雙擊某個物件時呼叫的事件控制代碼。

onfocus        元素獲得焦點。  //練習：輸入框
onblur         元素失去焦點。  //應用場景：用於表單驗證，使用者離開某個輸入框時，代表已經輸入完了，我們可以對它進行驗證。
onchange       域的內容被改變。//應用場景：通常用於表單元素,當元素內容被改變時觸發，（三級聯動）

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

onselect       文字被選中。
onsubmit       確認按鈕被點選。

7. DOM 優化

DOM 操作都是代價昂貴的操作，它會導致 WEB 應用程式的 UI 反應遲鈍。所以，應當儘可能減少這類過程的發生。

// 不快取 DOM 查詢結果
for (let i = 0; i < document.getElementsByTagName("div").length; i++) {
    // 每次迴圈，都會計算length，頻繁進行 DOM 查詢
}

// 快取 DOM 查詢結果
const div = document.getElementsByTagName("div");
const length = div.length;
for (let i = 0; i < length; i++) {
    // 只進行一次 DOM 查詢
}

將頻繁的 DOM 操作改成一次性操作：

var el = document.getElementById('mydiv');

// 未優化前的DOM操作，會導致三次重排
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

// 優化後的DOM操作，只會一次重排
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

BOM 物件

BOM（Browser Object Model）是指瀏覽器物件模型，可以對瀏覽器視窗進行訪問和操作。
使用 BOM，開發者可以移動視窗、改變狀態列中的文字以及執行其他與頁面內容不直接相關的動作。
使 JavaScript 有能力與瀏覽器"對話"。

1. window 物件

window物件是客戶端JavaScript最高層物件之一，由於window物件是其它大部分物件的共同祖先，在呼叫window物件的方法和屬性時，可以省略window物件的引用。例如：window.document.write()可以簡寫成：document.write()。

• 所有瀏覽器都支援 window 物件。它表示瀏覽器視窗；
• 概念上講：一個html文件對應一個window物件；
• 功能上講：控制瀏覽器視窗的；
• 使用上講：window物件不需要建立物件，直接使用即可；
• 所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員；
• 全域性變數是 window 物件的屬性。全域性函式是 window 物件的方法。

window物件方法：

alert()            顯示帶有一段訊息和一個確認按鈕的警告框。
confirm()          顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。
prompt()           顯示可提示使用者輸入的對話方塊。

open()             開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。
close()            關閉瀏覽器視窗。
setInterval()      按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
clearInterval()    取消由 setInterval() 設定的 timeout。
setTimeout()       在指定的毫秒數後呼叫函式或計算表示式。
clearTimeout()     取消由 setTimeout() 方法設定的 timeout。

2. Navigator 物件

Navigator 物件包含有關瀏覽器的資訊。

const ua = navigator.userAgent;
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

3. Screen 物件

Screen 物件包含有關客戶端顯示螢幕的資訊。

console.log(screen); // Screen {availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, …}
console.log(screen.width); // 1920
console.log(screen.height); //1080

4. Location 物件

Location 物件包含有關當前 URL 的資訊。

Location 屬性：

// 獲取完整的url
location.href;   // "https://www.baidu.com/?id=123&num=456"

// 跳轉到指定頁面（可以返回上一個頁面）
location.href="https://www.baidu.com/";

// 獲取url的協議部分
location.protocol;  // "https:"

// 獲取url的主機名和埠
location.host; // "www.baidu.com"

// 獲取url的查詢部分（問號 ? 之後的部分）
location.search; // "?id=123&num=456"

Location 方法：

// 重新載入頁面，即重新整理
location.reload();  

// 載入一個新的文件,跳轉到指定頁面（可以返回上一個頁面）
location.assign("https://www.baidu.com/");

// 跳轉到指定頁面（不可以返回上一個頁面）
location.replace("https://www.baidu.com/");

5. History 物件

History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。

History 物件方法：

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