Day16 - DOM(02) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 16

自我挑戰組

JavaScript 新手筆記系列第 16 篇

Day16 - DOM(02)

11th鐵人賽 javascript

hokou

2019-10-01 23:42:18

1932 瀏覽

前言

今日進行 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);
}