iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
0
自我挑戰組

JavaScript 新手筆記系列 第 16

Day16 - DOM(02)

  • 分享至 

  • xImage
  •  

前言

今日進行 DOM 的練習範例,因為要互動,所以先進行 HTML 的更改

index.html

<body>
    <p id="id1" class="class1">我是id1,class1</p>
    <p id="id2" class="class1">我是id2,class1</p>
    <p id="id3" class="class2">我是id3,class2</p>
    <p id="id4" class="class2">我是id4,class2</p>
    <p id="id5" class="class2">我是id5,class2</p>
    <script src="JS/test.js"></script>
</body>

選取單個

  • getElementById('idname'):因為同樣的 id 只有一個
  • querySelector(''):以 CSS 作為參數,所以使用 id 前面需要有##idname,使用 class 前面需要有..classname
    • 所以如果有多個 class ,只會修改第一個
    • 想指定的話則使用多個選取,然後用陣列
var el1 = document.getElementById('id1');
// 可以讓程式碼簡短,比較容易閱讀
el1.textContent = 'id1被修改了';
// 網頁顯示:id1被修改了

var el2a = document.querySelector('#id2');
el2a.textContent = 'id2被修改了';
// 網頁顯示:id2被修改了

var el2b = document.querySelector('.class1');
el2b.textContent = 'class1被修改了';
// 網頁顯示:class1被修改了
// class1 有2個,只會改找到的第1個

選取多個

  • getElementsByClassName('classname'):將相同 class的一起選取,element 為複數,需有 s
  • querySelectorAll(''):以 CSS 作為參數,使用 class 前面需要有.,為 .classname
var el3a = document.getElementsByClassName('class2');
// element為複數,需有s
console.log(el3a);
el3a[1].textContent = 'id4被修改了';

el3a.textContent = 'class2都被修改了';
// 暫時無法達成

var el3b = document.querySelectorAll('.class2');
console.log(el3b);
el3b[2].textContent = 'id5被修改了';

el3b.textContent = 'class2都被修改了!!';
// 暫時無法達成

問題

  • 使用多個 class 時,無法將全部一次修改,個別使用陣列有修改成功
    • 使用 console.log 查詢是有出現「textContent: "class2都被修改了"」的訊息
    • 待釐清原因=>已解決,需使用 for 迴圈逐一替換
var el3a = document.getElementsByClassName('class2');

// el3a.textContent = 'class2都被修改了';
// 修正如下
for (var i = 0 ; i<el3a.length ; i++){
    el3a[i].textContent = 'class2都被修改了' + (i+1);
}

var el3b = document.querySelectorAll('.class2');

// el3b.textContent = 'class2再次被修改了!!';
// 修正如下
for (var i = 0 ; i<el3b.length ; i++){
    el3b[i].textContent = 'class2再次被修改了' + (i+1);
}

次回

今日狀態不好,腦袋無法思考,明日再繼續 DOM 的部分


上一篇
Day15 - DOM(01)
下一篇
Day17 - DOM(03)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言