我們知道 DOM 是 Document Object Model(文件物件模型)，Document Object，是window 物件的一個屬性，那Model 指的是甚麼?
它指的是
所有HTML 元素都是物件
也就是說，所有HTML元素都有其屬性與方法，形成一個樹狀結構，而Document 也是 HTML 的根節點
。
Document Object 常見的方法有:
*addEventListener()
*getElementById()
*createElement()
*getElementsByClassName()
*getElementByTagName()
*querySelector()
*querySelectorAll()
這裡補充:getElementByClassName() 會回傳 HTMLCollection，這包含你選定Class的元素，HTMLCollection
是一種類陣列(Array like)HTMLCollection
可以用index的方式選取元素
EX:
<!DOCTYPE html>
<html>
<body>
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<script>
var x = document.getElementsByClassName("a");
x[0].innerHTML = "Hello World!";
</script>
</body>
</html>
結果:
參考文章:
[菜鸟教程 DOM ](HTML DOM Document 对象 | 菜鸟教程 (runoob.com))
[W3school HTML DOM getElementsByClassName() Method
iThome鐵人賽
看影片追技術