# DOM 與 函式
# 何謂 DOM
文件物件模型 (Document Object Model，縮寫 DOM)
如圖：
當網頁在產生的時候，會先產生 document 的文件，
然後再往下解析最根目錄的元素是 <html>，
然後裡面有兩個元素是 <head> 與 <body>，
然後再往下也有原素是 <title> 、 <h1> 、 <a> ，
h1 與 a 裡面可以帶文字內容(Text)，
也可以帶屬性 href (Attrible)
所以它會產生出類似一個結構樹出來，因為方便 js 可以選取到像是 <h1> 或是 <a> 的 html 標籤，或是方便 css 渲染到對應標籤
方便 css 渲染到對應標籤是什麼意思呢？如下圖：
<a href="https://www.youtube.com">Youtube</a>
1
a {
color: red;
}
1
2
3
2
3
當瀏覽器把 html 畫面顯示完時，就會去檢查 css 裡面有沒有樣式是有對應到的標籤或是 class，若有，會在結構樹對應的標籤給畫出來，所以上面的例子會把 Element 的 <a> 標籤的文字變成紅色
所以網頁一定會產生 DOM，程式才方便選取到標籤
# 如何選取 DOM？
上圖所示，最上面的結構叫 document，假設我要抓 document 裡面的 <body> 該如何抓呢？
寫法如下：
<div id="idContent" class="content">內容</div>
1
// 選取網頁文件，裡面的 .content 的 DOM
document.querySelector(".content"); // 取 class
document.querySelector("#idContent"); // 取 id
// 修改文字節點
document.querySelector(".content").textContent = "hello";
document.querySelector("#idContent").textContent = "hello"
// 以下前面的 document.querySelector("選擇器") 都簡稱 element;
var element = document.querySelector(".element");
// 新增刪除切換 class 名稱
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');
// 增加屬性
element.setAttribute("alt", "這是一張圖片"); // 新增一個 alt 屬性
// 取得文字節點
var str = element.textContent;
// 取得 HTML 結構
var HTMLContent = element.innerHTML;
// 取得 input 裡面的 value
var str = element.value;
// 賦予值
element.textContent = "hello";
element.innerHTML = "<p>一個段落</p>";
// 變更 CSS 設計
element.style.background = "#000";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
提醒
value 裡面的內容是字串，要把它變成數字，請用 parseInt() 轉成數字型別
# 函式 function
所謂函示就是可以處理很多指令的意思，像是要新增好多個變數去計算，就可以用函示去解決
名言：
程式語言被發明，為了解決人工重複性的工作
一般寫法
// 命名一個函式名稱，叫做 sum
// 裡面有一個參數(arguments)，叫做 number
function sum(number) {
return number + number;
}
sum(10); // 10 + 10 = 20
sum(20); // 20 + 20 = 40
sum(30); // 30 + 30 = 60
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
ES6 寫法
var sum = number => {
return number + number;
};
sum(10); // 10 + 10 = 20
sum(20); // 20 + 20 = 40
sum(30); // 30 + 30 = 60
1
2
3
4
5
6
7
2
3
4
5
6
7
也可以不用下參數，下指令，寫法如下：
// 命名一個函式名稱，叫做 sum
function sum() {
console.log("沒有參數");
}
sum(); // 顯示 沒有參數
1
2
3
4
5
6
2
3
4
5
6
ES6 寫法
var sum = () => {
console.log("沒有參數");
};
sum(); // 顯示 沒有參數
1
2
3
4
5
2
3
4
5
# 參數
哪些內容是會變來變去的，內容會變的就用參數
var hamburgerPrice = 50;
var friesPrice = 40;
var bobTotal;
function sum(myName, friesNum, hamburgerNum) {
bobTotal = friesNum * friesPrice + hamburgerNum + friesPrice;
return `${myName} 花了 ${bobTotal} 元`;
}
sum("Bob", 4, 5); // 顯示 Bob 花了 205 元
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10