iT邦幫忙

2021 iThome 鐵人賽

DAY 5
2
Modern Web

JavaScript Easy Go!系列 第 5

#5 JavaScript in Browser

今天寫一些瀏覽器跟 DOM 的東西。

DOM

全名是 Document Object Model,是一個用於存取網頁文件的介面,本身不是 JavaScript 的一部分,但因為最常跟網頁互動的工具就是 JavaScript 了,所以在前端時會有種它就是 JavaScirpt 一部分的錯覺。

本身像是一棵樹,在 JavaScript 中的根節點是 window

window

window 物件是瀏覽器中一個非常常見的物件,因為它就是瀏覽器中 JavaScript 的 global 物件。所有你看到的東西大多都跟 window 脫不了關係。

像是 Math 啦,document 啦,Array 啦,又或是你在 top level var 宣告的參數,都會被掛在 window 上。

在函式中建立全域變數的一個方法就是掛在 window 上,但不太建議使用,會有汙染風險。

document

document 代表了被瀏覽器渲染過的頁面 DOM。

常見的東西:

  • document.head<head>
  • document.body<body>
  • document.cookiecookie,沒事不要用

createElement(type)

// 建立一個連結並掛在 body 上
let link = document.createElement("a");
link.href = "https://www.google.com/";
link.innerHTML = "前往 Google";
document.body.appendChild(link);

createElement 用來建立 HTML 元素。
建立後要記得用 appendChild 來掛在 DOM 樹中。

Element

所有 HTML 元素都是,把 document 也想進去。
這裡說一些在 JavaScript 中可以用的函式。

id & classList

// 將 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");

idclassList 都是在定位 HTML 元素時很好用的工具。

innerHTML / outerHTML

element.innerHTML 可以用來讀取或設定目標元素內的 HTML。
element.outerHTML 可以用來讀取目標元素包括自己的 HTML。但是 outerHTML 是唯讀的。

querySelector(selector)

這個東西可以找到符合 selector 的 HTML 元素。
它會回傳第一個符合之元素。

// 找第一個超連結
let firstLink = document.querySelector("a");

querySelectorAll(selector)

這個東西也會找到符合 selector 的 HTML 元素。
而且它會回傳所有符合之元素,放在 HTMLCollection 中。

// 找所有超連結
let links = document.querySelectorAll("a");

links.forEach(...); // 不行
[...links].forEach(...); // 可以

值得注意的是,HTMLCollection 並不是陣列,所以它不能用 forrEach map 等好用的東西。
不過我們可以用 [...htmlCollection] 把它變成陣列。

appendChild(element)

這個東西會掛載一個 HTML 元素到執行的元素上。
像上面 document.createElement 的例子。

addEventListener(event, callback)

這個東西會在相對應 event 發生在執行的元素上時執行 callback。

常用的 event 像是 load click mousedown/mouseup/mousemove keydown/keyup/keypress 等等。

在做使用者互動時非常常用到。


每日鐵人賽熱門 Top 10 (0918)

以 9/18 12:00 ~ 9/19 12:00 文章觀看數增加值排名

  1. +931 Day 1 無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  2. +901 Day 3 雲端四大平台比較:AWS . GCP . Azure . Alibaba
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  3. +766 Day 2 AWS 是什麼?又為何企業這麼需要 AWS 人才?
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  4. +737 Day 4 網路寶石:AWS VPC Region/AZ vs VPC/Subnet 關係介紹
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  5. +728 Day 7 網路寶石:【Lab】VPC外網 Public Subnet to the Internet (IGW) (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  6. +724 Day 5 網路寶石:AWS VPC 架構 Routes & Security (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  7. +719 Day 6 網路寶石:AWS VPC 架構 Routes & Security (下)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  8. +711 Day 10 運算寶石:EC2 儲存資源 Instance Store vs Elastic Block Storage (EBS)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  9. +708 Day 9 運算寶石:EC2 重點架構
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  10. +704 Day 13 運算寶石:【Lab】EC2儲存資源 EBS Volume 建立與使用 (下)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題

AWS 系列流量也太高


上一篇
#4 Array & Object in JavaScript
下一篇
#6 JavaScript & Node.js
系列文
JavaScript Easy Go!31

1 則留言

0
jsty
iT邦新手 5 級 ‧ 2021-10-26 18:29:09

element.classList.add 是不是打錯了?

我要留言

立即登入留言