Jeff的隨手筆記

學習當一個前端工程師

0%

『新手日記』Day-11 JavaScript DOM的簡單介紹

『新手日記』Day-11 JavaScript DOM的簡單介紹

https://miro.medium.com/max/1000/1*SOHAQH3TI75nS0tKMHN42g.jpeg

DOM對我來說是一個非常常用但卻也不是非常了解的一個地方(請問哪一個不是這樣><”),預計會花幾天的時間再去認識他。今天先簡單介紹明天重點學習DOM Event(事件處理)。

想去日本了

https://miro.medium.com/max/1270/1*62Rwi9MTddekFyGWVZAE-Q.png

相信大家都看過這張圖,今天就是要來學習可以讓網頁動起來的關鍵!

BOM與DOM

BOM-Browser Object Model(瀏覽器物件模行)

瀏覽器所有功能的核心,與網頁內容無關。

https://miro.medium.com/max/1180/1*fQCPTDv--1SSBtydR29YMw.png

BOM的核心是 window 物件

在瀏覽器裡的 window 物件扮演兩個角色:

  • ECMAScript 標準裡的『Global Object(全域物件)』
  • JavaScript 用來與瀏覽器溝通的窗口

DOM-Document Object Model (文件物件模型)

💡 WDocument is an object.Document means the HTML documentThis model means all HTMl elements are objects

將HTML文件以樹狀結構來表示的模型。

https://miro.medium.com/max/1180/1*3yUX_O1f0oVST9fG6tMh_Q.png

💡 BOM與DOM兩者區別:BOM:JavaScript 用來與瀏覽器溝通的窗口,不涉及網頁內容DOM:JavaScript 用來控制『網頁』的節點與內容

在真正進入DOM之前,我們需要先了解一個名詞:window object

window object

它是 global variable,只要開啟瀏覽器的瞬間,window object 就會出現。它擁有自己的 Methods 跟 Properties。

Methods:

💡 標準語法:window.alert() Tips: window可以不用寫

alert():

執行後會跳出一個帶有 button 的視窗

prompt():

執行後會跳出一個對話視窗,可讓使用者輸入內容。(輸入的內容,最後都會是 String)

**setInterval()**:

設定每隔幾秒的時間要執行一個 function

(1000 為 1 秒,1500 為 1.5 秒,2000 為 2 秒…依此類推)

clearInterval():

停止setInterval()的執行

addEventListener():

DOM Event(事件處理)時會再說明!!!

Properties:

💡 OOP 物件導向: 一個object可以是另一個 object 的 Properties

console

console.log()檢查程式碼是否正確被執行時常使用的功能

由於 properties 並不常拿來做使用,因此這裡只介紹 methods。

1
2
let map = ["台中", "台北", "新北", "桃園", "高雄"]
console.log(map)// 結果如下圖

https://miro.medium.com/max/1006/1*aGTw2JtNT5rC4hTE-1fjiQ.png

console.error()定義如果錯誤時會出現什麼

1
2
let map = ["台中", "台北", "新北", "桃園", "高雄"]
console.error('喔喔 錯了喔')// 結果如下圖

https://miro.medium.com/max/1204/1*sfuTXyQia9CsDW7euozBHA.png

console.table()將資料整理成表格來顯示

1
2
let map = ["台中", "台北", "新北", "桃園", "高雄"];
console.table(map);// 結果如下圖

https://miro.medium.com/max/636/1*ir-LwlTXrnoazyY0Zatt7w.png

console.warn()會出現黃色驚嘆號

1
2
let map = ["台中", "台北", "新北", "桃園", "高雄"]
console.warn('小心')// 結果如下圖

https://miro.medium.com/max/1206/1*MyyOL8MLaCIoKVcKbce2KQ.png

Document

Document is an object. 所以他擁有自己的 methods 和 properties

property:

有 body、doctype、charset、head…等。

methods:

💡 is not array 但可以使用forEach()、

以下把他分成3個等級:需要認識、很重要、非常重要

需要認識:

getElementsByld()

  • 用 id 取得 Element,存在一個 HTMLCollection 裡面

getElementsByClassName()

  • 用 class 取得 Element,存在一個 HTMLCollection 裡面

很重要:

addEventListener()

  • DOM Event(事件處理)時會在再說明!!!

createElement()

  • 依指定的標籤名稱(tagName)建立 HTML 元素
1
2
let element = document.createElement(tagName);
//tagName:A string that specifies(指定) the type of element to be created(創建).

非常重要:

querySelector()

  • 只會return 滿足第一個css selector 的 HTML element

querySelectorAll()

  • 所有滿足條件的都會 return 回來,存在一個 NodeList 裡面

💡 在html裡查詢,是用css的selector

想法

DOM的內容真的很多,所以避免複習效果不佳我自己把他切分幾個段落複習。今天的內容都是從

0 陷阱!0 誤解!8 天重新認識 JavaScript!

Wilson Ren的2022網頁開發全攻略:

這兩個教材來的,如果有打錯的地方再請大家多多指教!!!