JavaScript 筆記 – DOM | WP 網站學習部落

Document Object Model - DOM

- 文件物件模型 (Document Object Model, DOM) 是 HTML 的程式介面。

- 它提供了一個文件 (樹) 的結構表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。

- DOM 提供了文件以擁有屬性和函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會行處理程序。

- DOM 將網頁與程式語言連結在一起。

- DOM 允許我們在 JavaScript 當中操作 HTML 元素。

- 在 Document Object Model 這棵樹上的每個點被稱之為節點 (node)。節點分為三種：

1. HTML 元素節點 (element nodes or element objects)

2. 文字節點 (text node)

3. 註解節點 (comment node)

DOM 提供 2 種節點集合：

HTML Collection (element nodes) - 動態的

NodeList (包含上述 3 種節點) - 靜態的

Note：HTML Collection, NodeList are not Array. (array-like object) 代表某些 array methods 無法使用。

三種節點的比較：

每個節點 (Node) 皆有 childNodes 的屬性。Return type 為 NodeList，內部包含此節點在DOM Tree之下的第一層的所有節點。

每個 Element Object 有 children 屬性。Return type 為 HTML Collection，內部包含此節點在 DOM Tree 之下的第一層的所有 Element Object。

Element objects (Nodes) 可以同時使用 childNodes 和 children 屬性。

text node, comment node 只能夠使用 childNodes 屬性，若使用 children 屬性則會顯示 undefined。

不論是使用 childNodes 還是 children 屬性，所獲得的 DOM Tree 元素集合，都只會是本身元素在 DOM Tree下一層的元素。如果希望獲得下下一層的元素，需要使用，像是element.children[i].children 的語法，才能夠取得元素。當然，如果是下下下一層的元素，就需要使用 element.children[i].children[j].children 的語法。

Window Object

- 在 JavaScript 當中的 window object 代表目前程式碼正在運行的電腦視窗 (瀏覽器視窗)。

window object 可使用常見的 methods：(window 可以不寫)

window.alert()

- 在視窗顯示對話框

window.prompt()

- return 用戶在提示對話框中輸入的文字

window.addEventListener()

- 將事件監聽程式碼附加到 window object

window.setInterval(() => {}, 毫秒)

- 每次經過給定的毫秒數時安排一個函式執行

window.clearInterval()

- 將 setInterval() 所重複執行的程式暫停。

window object 可使用常見的 properties：(window 可以不寫)

window.console

- return 一個 console object，console object 可以對瀏覽器的 debugging console 進行控制與訪問。

- 常用的 methods 為：

log()

error()

window.document

- return window 包含的文檔，也就是 HTML 文件。

常用的 methods 有：

window.document.addEventListener(param1, param2)

- 第一個參數為 event (事件)

- 第二個參數為 event (事件)發生時，要執行的 function

範例：

function react() {

alert("有人正在點擊畫面");

}

window.addEventListener("click", react);

// addEventListener 本身是一個 higher order function

// react 是一個 callback function

window.document.createElement("tagName")

- 創建一個 Element Object

window.document.getElementById("id")

- return 第一個 id 相符合的 element node (object)

window.document.getElementByClassName("className")

- return 一個動態的 HTML Collection ( element node)，內部元素包含所有具有給定 className 的元素。

querySelector("selectors")

- return 第一個符合特定選擇器群組的 element node (object)，採用深度優先搜尋演算法。selectors 為 css 語法。

querySelectorAll("selectors")

- return 一個靜態 (not live) NodeList，表示與選定選擇器匹配的元素列表。selectors 為 css 語法。

window.localStorage

- return 一個 local storage 物件。

window.sessionStorage

- return 一個 session storage 物件。

物件導向程式概念

- 一個 Object 可以是另一個 Object 的 attribute。

範例：

let Grace = {

age: 26,

};

let Wilson = {

age: 26,

spouse: Grace,

};

console.log(Wilson.spouse.name); // Grace

Function Declaration and Expression

- JavaScript 中的函數 (function) 是 first-class objects (一等公民)。所謂的函數 (function) 是 first-class objects (一等公民)是指：

1. 將 function 分配給變數。例如：let hello = function() {...}

2. 將 function 當作 argument 傳給其他 function。Higher Order Function 的 argument 被稱為 callback function。

- Function Declaration 和 Function Expression 語法幾乎相同。

- Function Expression 可以省略函數名稱以創建匿名函數 (需要放入一個變數中執行)。

Function Expression 語法：

function (param0, param1, /*....*/ paramN) {

statements

}

範例 1：

Function Declaration：

function addition(a, b) {

return a+ b;

}

Function Expression：

let addition = function (a, b) {

return a + b;

}

範例 1：

let Wilson = {

greet() {

console.log(this.name + "打招呼";

walk: function () {

console.log(this.name + "正在走路");

};

Wilson.greet();

Wilson.walk();

- Function Expression 的用途主要在於：

1. 創建一個未命名的 Function，之後再把這個 Function 放置到其他的變數內部，讓程式碼更有彈性。

2. 當作 higher order function 的 callback function 使用。例如：forEach 或是 addEventListener。

範例：

window.addEventListener("click", function () {

alert("有人正在點擊畫面");

});

// addEventListener 本身是一個 higher order function

// 內部的 function 是一個 callback function

3. 使用 IIFE (Immediately Invokied Function Expression) 的功能 (立即執行)。

- 當我們想要避免汙染 global naming space，或是想要立即執行某個匿名 function 時，就可以使用 IIFE。

- 語法為：

(function() {

//...

})();

範例 1：

(function (a, b) {

console.log(a + b);

})(10, 5);

結果為：15

範例 2：

(() => {

console.log("hello");

})();

結果為：hello

Arrow Function Expression

- Arrow Function Expression 是 Function Expression 的簡化語法。

- 若 Arrow Function Expression 只有一個 parameter，則不需要加上括號 (可加可不加)。

- 若 Arrow Function Expression 有 0 個或 2 個以上的 parameter，則一定要加上括號。

- Arrow Function Expression 的主體若不加上 curly brackets {}，則 return expression 的值。

- Arrow Function Expression 的主體有多個計算式時，則一定要加上 curly brackets {}。

- 若 Arrow Function Expression 有加上curly brackets {}，則一定要加 return 關鍵字才會回傳一個值。

- Arrow Function Expression 沒有 this 關鍵字綁定，不應該用做 Objects 的 methods。

- 語法如下：

() => expression;

param => expression

(param1, param2, ...) => expression

param => {return expression}

範例 1：

let hello = () => {

console.log("hello world");

};

hello();

範例 2：

let Wilson = {

walk: () => {

console.log( "Wilson 正在走路"); // 注意：arrow function expression 沒有 this keyword 綁定，不能使用 this.name

};

Wilson.walk();

範例 3：

window.addEventListener("click", () => {

alert("有人正在點擊畫面");

});

forEach() Method

- forEach() 本身為 higher order function。

- forEach() 為陣列裡面的每個元素執行一次所提供的函式。

- forEach() 與 arrow function 協作的語法如下：

1. forEach(element => ...)

2. forEach(callbackFn) // 只放入一個 callback function

範例 1：