今天写一些浏览器跟 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 系列流量也太高
>>: Day5:今天我们来介绍一下Microsoft Defender for Endpoint
阵列点灯 ( 动画 ) 教学原文参考：阵列点灯 ( 动画 ) 这篇文章延续「阵列点灯 ( 显示图形 ...
流程 1.先观察画面，哪些值需要抓 2.抓HTML的值： a.先宣告变数，变数就是抓HTML的值，也...
Kotlin 的基本资料型态与 Java 相同，包括：Byte、Short、Int、Long、Flo...
CSS isolation 介绍 有时候会想对不同 Component 做个别样式设定，但如果把 c...
前言 不罗嗦，一样先附上程序码 <!DOCTYPE html> <html lan...