iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

JavaScript DOM 操作 系列

探討如何使用 JavaScript 操作 DOM,改變頁面內容、樣式、事件處理等。

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

DAY 1: DOM 簡介與基礎

大家好!我是參加這次挑戰選手,非常高興能有機會與大家一起學習和成長。今天是挑戰的第1天,內容是DOM(Document Object Model)的基本概念和應...

2024-09-15 ‧ 由 jlll 分享
DAY 2

DAY 2: 獲取與操作 DOM 元素的內容

第2天的挑戰讓我更深入了解了如何有效操作 DOM 元素的內容。剛開始的時候,我以為獲取和修改 HTML 元素不過是簡單的操作,但隨著深入學習,我發現這背後隱藏著...

2024-09-16 ‧ 由 jlll 分享
DAY 3

DAY 3: 動態創建與添加 DOM 元素

大家好,今天是鐵人賽第 3 天,我學到了如何動態創建並添加 DOM 元素。這個過程其實比我想像的有趣,也有點挑戰!一開始,我以為只需要簡單幾行代碼,但實際操作時...

2024-09-17 ‧ 由 jlll 分享
DAY 4

DAY 4: 刪除 DOM 元素

今天是挑戰的第四天,我學到了如何在 JavaScript 中刪除 DOM 元素。雖然一開始覺得刪除元素應該很簡單,但實際操作時還是有一些細節需要注意。下面我將分...

2024-09-18 ‧ 由 jlll 分享
DAY 5

DAY 5: 修改元素屬性

大家好!今天的挑戰是學習如何修改 DOM 元素的屬性,例如圖片的 src 或是連結的 href。透過這次練習,我發現原來小小的屬性修改,可以大大改變網頁的互動性...

2024-09-19 ‧ 由 jlll 分享
DAY 6

DAY 6: 操作表單元素

今天學會了用 JavaScript 操作表單元素,像是獲取和修改 input 和 select 的值。雖然看起來很簡單,但做起來真的有點挑戰。每次成功控制表單元...

2024-09-20 ‧ 由 jlll 分享
DAY 7

DAY 7: 樣式操作之 classList

大家好!今天學習了 JavaScript 中的 classList 方法,這個方法可以方便地操作元素的 CSS 類,讓我對 DOM 操作更有信心!classLi...

2024-09-21 ‧ 由 jlll 分享
DAY 8

DAY 8: 修改內聯樣式

今天學習了如何使用 JavaScript 修改 DOM 元素的內聯樣式。個人覺得非常有趣,因為可以直接控制網頁的視覺呈現。學習的重點是使用 element.st...

2024-09-22 ‧ 由 jlll 分享
DAY 9

DAY 9: 動態切換樣式表

今天我學到了如何用 JavaScript 動態切換頁面的 CSS 樣式表,這樣可以讓網站根據不同需求快速改變外觀,感覺真的很實用。舉個例子,如果想要讓使用者自行...

2024-09-23 ‧ 由 jlll 分享
DAY 10

DAY 10: 事件處理簡介

今天學習了 JavaScript 的事件處理。事件處理可以讓我們和使用者的互動變得更加豐富有趣。以下是我學到的幾個重點: 基本的點擊事件: 使用 addEv...

2024-09-24 ‧ 由 jlll 分享