今天寫一些瀏覽器跟 DOM 的東西。
全名是 Document Object Model，是一個用於存取網頁文件的介面，本身不是 JavaScript 的一部分，但因為最常跟網頁互動的工具就是 JavaScript 了，所以在前端時會有種它就是 JavaScirpt 一部分的錯覺。
本身像是一棵樹，在 JavaScript 中的根節點是 window。
window 物件是瀏覽器中一個非常常見的物件，因為它就是瀏覽器中 JavaScript 的 global 物件。所有你看到的東西大多都跟 window 脫不了關係。
像是 Math 啦，document 啦，Array 啦，又或是你在 top level var 宣告的參數，都會被掛在 window 上。
在函式中建立全域變數的一個方法就是掛在
window上，但不太建議使用，會有汙染風險。
document 代表了被瀏覽器渲染過的頁面 DOM。
常見的東西：
document.head 是 <head>
document.body 是 <body>
document.cookie 是 cookie，沒事不要用// 建立一個連結並掛在 body 上
let link = document.createElement("a");
link.href = "https://www.google.com/";
link.innerHTML = "前往 Google";
document.body.appendChild(link);
createElement 用來建立 HTML 元素。
建立後要記得用 appendChild 來掛在 DOM 樹中。
所有 HTML 元素都是，把 document 也想進去。
這裡說一些在 JavaScript 中可以用的函式。
// 將 element 的 id 設為 abc
element.id = "abc";
// 將 element 的 class 加上 a, b, c
element.classList.add("a", "b", "c");
// 將 element 的 class 移去 a, b
element.classList.add("a", "b");
// 切換 element 的 class 移去 a, b, c
element.classList.add("a", "b", "c");
// 確認 element 是否有 c class
element.classList.contains("c");
id 跟 classList 都是在定位 HTML 元素時很好用的工具。
element.innerHTML 可以用來讀取或設定目標元素內的 HTML。element.outerHTML 可以用來讀取目標元素包括自己的 HTML。但是 outerHTML 是唯讀的。
這個東西可以找到符合 selector 的 HTML 元素。
它會回傳第一個符合之元素。
// 找第一個超連結
let firstLink = document.querySelector("a");
這個東西也會找到符合 selector 的 HTML 元素。
而且它會回傳所有符合之元素，放在 HTMLCollection 中。
// 找所有超連結
let links = document.querySelectorAll("a");
links.forEach(...); // 不行
[...links].forEach(...); // 可以
值得注意的是，HTMLCollection 並不是陣列，所以它不能用 forrEach map 等好用的東西。
不過我們可以用 [...htmlCollection] 把它變成陣列。
這個東西會掛載一個 HTML 元素到執行的元素上。
像上面 document.createElement 的例子。
這個東西會在相對應 event 發生在執行的元素上時執行 callback。
常用的 event 像是 load click mousedown/mouseup/mousemove keydown/keyup/keypress 等等。
在做使用者互動時非常常用到。
以 9/18 12:00 ~ 9/19 12:00 文章觀看數增加值排名
+931 Day 1 無限手套 AWS 版：掌控一切的 5 + 1 雲端必學主題
+901 Day 3 雲端四大平台比較：AWS . GCP . Azure . Alibaba
+766 Day 2 AWS 是什麼？又為何企業這麼需要 AWS 人才？
+737 Day 4 網路寶石：AWS VPC Region/AZ vs VPC/Subnet 關係介紹
+728 Day 7 網路寶石：【Lab】VPC外網 Public Subnet to the Internet (IGW) (上)
+724 Day 5 網路寶石：AWS VPC 架構 Routes & Security (上)
+719 Day 6 網路寶石：AWS VPC 架構 Routes & Security (下)
+711 Day 10 運算寶石：EC2 儲存資源 Instance Store vs Elastic Block Storage (EBS)
+708 Day 9 運算寶石：EC2 重點架構
+704 Day 13 運算寶石：【Lab】EC2儲存資源 EBS Volume 建立與使用 (下)
AWS 系列流量也太高
iThome鐵人賽
看影片追技術