假設我們今天不只想要抓取一個元素或一個節點時我們該怎麼做呢? 我們就可以使用getElementsByTagName() 方法返回HTMLCollection對象，這樣我們就可以抓取陣列HTML元素列表，下面的範例我們抓取所有的P標籤元素!
範例:
var a = document.getElementsByTagName("p");
而抓取回來的p標籤我怎麼知道有哪些，而且總會有順序八。前面有提到抓取回來的元素就像一個集合，並且我們可以使用陣列的方式去獲取值，讓我們看以下的範例。
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML DOM</h1>
<p>Hello jason!</p>
<p>Hello dina!</p>
<p id="demo"></p>
<script>
var myquestion = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"第二段的 innerHTML 是：" +
myquestion[1].innerHTML;
</script>
</body>
</html>
我們可以看到總共有三個p標籤，而我們今天要抓取第二個段落，就像陣列0、1、2的概念一樣，我們必須要從getElementsByTagName()方法獲取的元素，找到變數myquestion[1]，這樣就可以抓到元素了。
今天我們可以延伸出去，透過這個方法了解到一個網頁中到底有多少段落，就可以配合.length方法，因為獲取回來的是一個陣列集合，讓我們看看範例。
HTML HTMLCollection 長度
範例:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML DOM</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p id="demo"></p>
<script>
var myquestion = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"此網頁共有 " + myquestion.length + " 段文字。";
</script>
</body>
</html>
看到這裡可能會想說，那我知道一個網頁中有多少段落不是很無用嗎?其實我們可以透過這個屬性去改變所有段落的背景顏色，或是CSS樣式，這樣需要大量更改時就不需要一個一個去手動更改。
範例:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML DOM</h1>
<p>Hello JASON!</p>
<p>Hello dina!</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var question = document.getElementsByTagName("p");
var i;
for (i = 0; i < question.length; i++) {
question[i].style.color = "red";
}
}
</script>
</body>
</html>
我們可以透過遍歷完更改全部的背景顏色!是不是方便許多呢?
要注意的是HTMLCollection看似向陣列，但其實他不是，因為陣列方法是無法對HTMLCollection使用的，陣列方法例如:valueOf()、pop()、push()、join()都無法使用，所以各位在操作時要特別注意!
那今天我們的文章就到這邊了!明天再繼續一起努力吧。
iThome鐵人賽
看影片追技術