iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

開始入坑網頁吧!系列 第 27

JavaScript Document Object

Document Object

我們知道 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>

結果:
https://ithelp.ithome.com.tw/upload/images/20211012/20135414wzNdPpe9z1.png

參考文章:
[菜鸟教程 DOM ](HTML DOM Document 对象 | 菜鸟教程 (runoob.com))
[W3school HTML DOM getElementsByClassName() Method

](https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp#:~:text=The%20getElementsByClassName%20%28%29%20method%20returns%20a%20collection%20of,The%20nodes%20can%20be%20accessed%20by%20index%20numbers.)


上一篇
JavaScript DOM | Window Object
下一篇
JavaScript DOM | createElement()
系列文
開始入坑網頁吧!30

尚未有邦友留言

立即登入留言