[ Day 11 ] - DOM

13th鐵人賽 javascript 前端學習 dom

karakamin

2021-09-26 19:17:41

897 瀏覽

分享至

DOM

DOM 是什麼呢？

DOM（Document Object Model）
當瀏覽器進入網頁時，將 HTML 文件會以樹狀結構的解析，此稱為 DOM Tree。

<html>
    <head>
        <title>我是網站</title>
    </head>
    <body>
        <h1>主標題</h1>
        <p>段落</p>
    </body>
</html>

依以上 HTML 範例，所產生的 DOM Tree 示意圖如下

DOM Tree

也就是說，可以透過 DOM 提供的介面，用來控制網頁上的節點與內容，做出網頁的效果

簡單說明使用 DOM API 取得預期節點：

// 找出 DOM 的節點為 h1 這個元素
document.querySelector('h1');

// 找出 DOM 節點為 class = .box 的元素
document.querySelector('.box');

// 找到 DOM 中，id  為 test 的元素
document.getElementById('test');

參考資料與學習資源

0 陷阱！0 誤解！8 天重新認識 JavaScript！
JavaScript 指南
六角學院 - JavaScript 必修篇 - 前端修練全攻略

本日小節

終於進入比較重點的部份了，要來練習操控網頁元素了！
這是我的學習紀錄，歡迎各路大神指點指教！
有任何問題歡迎傳訊息給我，我們下次見

[ Day 10 ] - 傳值與傳址

[ Day 12 ] - <script> 標籤放哪裡～

系列文

初心者解任務啦！JS 的 30 道任務共 30 篇

RSS系列文訂閱系列文

3 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

初心者解任務啦！JS 的 30 道任務系列 第 11 篇

[ Day 11 ] - DOM

DOM

DOM 是什麼呢？

參考資料與學習資源

本日小節

尚未有邦友留言

標記使用者

初心者解任務啦！JS 的 30 道任務系列第 11 篇