iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 9
0
自我挑戰組

JavaScript基礎30天系列 第 9 篇

DOM常見寫法 DAY09

12th鐵人賽 dom setattribute getattribute queryselector
840 瀏覽

  • 分享至 

  • xImage
    •  

今天要來介紹DOM的各種寫法

我們先複習一下昨天介紹的getElementById
https://ithelp.ithome.com.tw/upload/images/20200923/201230392s1h208s81.jpg
CodePen:
https://codepen.io/wemyferb/pen/yLOGKxL?editors=1010

接著我們來看看
如何使用querySelector來選取單一元素

1. querySelector 選取 class
https://ithelp.ithome.com.tw/upload/images/20200923/20123039N9LRskVpXM.jpg
會發現這跟我們寫css的時候雷同

2. querySelector 選取 class 進階用法
https://ithelp.ithome.com.tw/upload/images/20200923/20123039C9HHSi7Pki.jpg

3. querySelector 選取id
https://ithelp.ithome.com.tw/upload/images/20201026/20123039R2Vynrz3nw.jpg

不過要注意的是
我們通常會宣告一個變數(ex: el)來接收我們要選取的元素
https://ithelp.ithome.com.tw/upload/images/20200923/20123039i0XuDthoQp.jpg

4. querySelectorAll 可重複選取多個元素
注意事項: 回傳的型別是陣列
https://ithelp.ithome.com.tw/upload/images/20200923/20123039bCZq3OJf1G.jpg

setAttribute 動態增加HTML標籤屬性

  1. 新增 a 標籤 的 href 屬性
    https://ithelp.ithome.com.tw/upload/images/20200923/20123039xINSUu7oVu.jpg
    CodePen:
    https://codepen.io/wemyferb/pen/vYGQqYZ?editors=1010

  2. 新增id屬性
    https://ithelp.ithome.com.tw/upload/images/20200923/20123039BoDY6ZEGJt.jpg
    CodePen:
    https://codepen.io/wemyferb/pen/jOqXzXg

  3. getAttribute
    https://ithelp.ithome.com.tw/upload/images/20200923/20123039btZQikuBhd.jpg
    CodePen:
    https://codepen.io/wemyferb/pen/yLOGjNe?editors=1010

今天的 DOM常見寫法 就介紹到這裡
明天我們會介紹
插入 HTML 標籤的兩種方法
要記得持續關注唷/images/emoticon/emoticon08.gif


上一篇
DOM基礎介紹 DAY08
下一篇
插入 HTML 標籤 DAY10
系列文
JavaScript基礎30天 共 30 篇
  1. 26
    JS AJAX基礎實作(1) DAY26
  2. 27
    JS AJAX基礎實作(2) DAY27
  3. 28
    JS AJAX基礎實作(3) DAY28
  4. 29
    JS AJAX基礎實作(4) DAY29
  5. 30
    總結 DAY30 耶 成功啦~~
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙