Hello 大家好，來到第 13 天的 JavaScript，我們來認識操作 HTML 元素的第二個方法，同樣例子，我們也可以getElmentsByClassName，但大家應該知道 ID 只會有一個，但 class 在一個網頁裡可能會有很多個，因此這樣會抓出一堆值，跑出陣列。
我們用昨天的 HTML 來寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="animals" id="cat1">貓咪一號</div>
<div class="animals" id="cat2">貓咪二號</div>
</body>
</html>
接著我們來用 getElementsByClassname
首先我們定義 ai 是要抓 ClassName，接著會跑出一堆值，在這個例子裡會抓出兩個值，也就是陣列，接著我們用 for 迴圈來對這元素作批次的處理。
還記得 for 迴圈就會有（）後面接{}，括號裡面要寫的是值的定義，
(1)於是我們宣告裡面有個數字叫做ｉ，i 的起始點從 0 開始
(2)然後 i 得結束值是 ai.length，這裡我們也許知道有幾個陣列，但是如果你有一筆資料，但又想要全部都改變的話，就用 length 去算出元素值有幾個。
(3)記得 i 要用遞增的方式進行。
大括號裡頭則是要宣告我們要改變的元素內容
我們在大括號裡頭宣告一個 d 的變數要抓的剛剛宣告的 al，我希望內部的 HTML 元素變成狗。
var a1 = document.getElementsByClassName('animals')
for ( var i=0; i < a1.length; i++){
var d= a1[i];
d.innerHTML = "狗";
}
所有的東西也不是只有一種寫法，以上做法也可以用：
querytSelector()
querySelctorALL()
我們一樣以剛剛的例子，假設要抓取某一元素的話：var a1 = document.getElementById('cat1')
那要用 querySelector 的話該怎麼做：
var di = document.querySelector('#catl')
這裡就跟 CSS 選取器很像，選取 id 就用 #找 cat1
如果你要用選取 class 的話，就用 querySelectorAll，括號裡面要接的就是用 . 找 ca
var di = document.querySelector('#animals')
一致的效果
這兩組東西寫出來的效果都是一致，透過這兩天的紀錄，讓我對JavaScript 的 DOM 有更清楚的概念，希望大家也能透過文章跟我一樣釐清學習盲點。
iThome鐵人賽
看影片追技術