版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/54848178
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。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)