iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

JavaScript基礎30天系列 第 9

DOM常見寫法 DAY09

今天要來介紹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

尚未有邦友留言

立即登入留言