當我們看到一個網頁時，通常會有下面的結構：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
其中，第一行寫的是網頁格式。
下面由<html>包住所有標籤；<head>放入詳細資訊，載入CSS和JavaScript；<body>是放各種HTML標籤的放置位置，也是我們一般看到的畫面。
而<html>中所有的內容，都是以一種樹狀的結構構成，CSS和JavaScript都可以對這些內容做處理，這個樹狀結構，就是DOM。
下面會介紹一些用JavaScript處理DOM的方法。
querySelector()除了常用的getElementById()外，querySelector()也是常見用來抓取單一筆資料的方法。
比起getElementById()只能抓取ID，querySelector()小括弧內可以是ID、Class、標籤，也可以是兩者的結合，像是.title em，所以用途更為廣泛。
但在一個網頁中，Class和標籤通常會有多筆資料，但querySelector()只會回傳第一筆資料，這點必須特別注意。
querySelectorAll()querySelectorAll()和querySelector()很像，但兩者不同的是，querySelectorAll()可以抓取多筆資料，因此用於Class和標籤上會更加便利。
Class、標籤
querySelectorAll()抓取資料後，會回傳陣列，所以可以利用處理迴圈的辦法，對資料做二次處理。
setAttribute()JavaScript用來處理DOM當中的內容非常全面，當碰到<a href="#"></a>當中的href時，就要用到setAttribute()。
setAttribute()的寫法是在小括弧中帶入屬性與值，用半形逗號（,）區隔。
像是<a href="#"></a>就寫成：
setAttribute('href', '##')
iThome鐵人賽
看影片追技術