DOM(document object model) 即檔案物件模型，
DOM中共有三種型別的節點，元素節點、文本節點、屬性節點，
getElementsById()
通過ID獲取元素
一個ID只能使用一次，所以，該方法會回傳一個唯一的物件
注：可以使用typeof判斷變數的型別
typedof + 變數名
以下面這段代碼為例：
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Shopping list</title>
</head>
<body>
<h1>What to by</h1>
<p title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale implement">Milk</li>
</ul>
<script src="JS/test1.js"></script>
</body>
</html>
var temp = document.getElementById("purchases");
alert(typeof temp);
結果為object
getElementsByTagName()
根據標簽名回傳一個物件陣列
使用以下JavaScript陳述句：
var temp = document.getElementsByTagName("li");
alert(temp.length);
結果是3 ，表示一個長度為3的陣列，也可以將函式引數改為通配符*，這樣表示獲取DOM中的所有標簽，
getElementsByClassName()
通過類名獲取元素，回傳一個陣列，引數為類名，類名可以不唯一，多個類名表示同時含有多個類名的元素，類名順序可以不固定
這個方法比較新，不是所有瀏覽器都支持
獲取/更改標簽中的屬性值
可以通過**getAttribute(attribute)獲取元素中的屬性值，通過setAttribute(attribute,value)**來更改屬性的值，如果一個元素原來沒有這個屬性，使用setAttribute會先創建這個屬性在給這個屬性賦值，雖然創建了這個屬性，但是網頁的原始碼并不會因此發生任何改變，
var temp = document.getElementsByTagName("p");
for(var i = 0 ; i < temp.length; i++){
alert(temp[i].getAttribute("title"));
temp[i].setAttribute("title","s");
alert(temp[i].getAttribute("title"));
}
結果是先彈出a gentle reminder，再彈出s，因為title的值被更改為s，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/219826.html
標籤：其他
上一篇：前端必須掌握的知識點