第3章 DOM基本概念以及基本屬性和方法
DOM的概念
一些概念
-
DOM：全稱是 Document Object Model，即文件物件模型。當建立好一個頁面並載入到瀏覽器時，DOM會把網頁文件轉換為一個文件物件，文件物件的主要功能是處理網頁內容。
-
節點樹：DOM根據HTML的標籤結構，將HTML文件解析成一棵節點樹，每個樹枝和葉子都是一個節點，每個節點是一個物件。文件是由節點構成的集合。
-
節點
-
元素節點：HTML中的標籤元素就是DOM的元素節點，這些元素在文件中的佈局形成了文件的結構。元素可以包含其它元素，標籤的名稱就是元素的名字。
-
文字節點：如果一個元素包含著文字，那麼這個文字就是文字節點。文字節點總是被包含在元素節點的內部，但並非所有元素節點都包含有文字節點。文字節點形成頁面文件的主要內容。
-
屬性節點：屬性節點是用來對元素做出更具體地描述，比如title、class、id等等。並非所有的元素都包含屬性，但所有的屬性都被元素包含。
-
舉例說明：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>商品清單</title> </head> <body> <h1 title="此處為特價商品">特價商品</h1> <ul id="special"> <li class="fruit apple">蘋果</li> <li class="fruit banana">香蕉</li> </ul> <p>熱銷商品</p> <ul id='normal'> <li>桃子</li> <li>草莓</li> <li>西瓜</li> </ul> </body> </html>
- 該html文件的dom樹模型為：
- h1元素的文字節點和屬性節點為：
DOM的一些屬性和方法
獲取元素的方法
1. getElementById —— 根據元素id獲取元素節點
- 使用方式：document.getElementById(id)
- 注意大小寫！！！
- 返回一個元素節點，該元素節點的資料型別是物件。注意，因為在整個html文件中，id是唯一的，所以該方法只返回一個節點。
舉例說明：
console.log(document.getElementById('special'))
2. getElementsByTagName —— 根據標籤名稱獲取元素節點陣列
- 使用方式：element.getElementByTagName(tag)
- element的意思是，即可以document為限定範圍查詢，也可以任何一個元素為限定範圍進行查詢。
- 返回一個物件陣列。因為在html文件中，這個標籤不止一個，因此返回的是一個數組。
- 可以把一個萬用字元作為它的引數："*"，此時返回文件中所有元素。
- 可以使用length計算返回的元素節點的個數。
- 可以把 getElementById 和 getElementByTagName 結合起來使用，查詢某個元素下的某個標籤節點。
舉例說明：
- 全文件使用：
console.log(document.getElementsByTagName('li'));
console.log('長度', document.getElementsByTagName('li').length)
- 某個元素下的標籤節點
let element = document.getElementById('special');
console.log(element.getElementsByTagName('li'))
- 萬用字元使用
let item = document.getElementsByTagName('*');
console.log(item)
3. getElementsByClassName —— 根據類名獲取元素節點陣列
- 使用方式：getElementsByClassName(class)
- 返回具有相同類名的元素的陣列
- 可以指定多個類名。在字串引數中用空格分隔類名，返回有這兩個類名的元素。（類名標籤順序不重要，只要有這兩個類名就會返回）
- 可以把 getElementById 和 getElementByClassName 結合起來使用，查詢某個元素下的具有相同類名的節點。
舉例說明：
- 全文件使用：
let item = document.getElementsByClassName('fruit');
console.log(item);
- 某個元素下的標籤節點
let element = document.getElementById('special');
console.log(element.getElementsByClassName('apple'))
- 多個類名（類名順序反過來也可以）
console.log(document.getElementsByClassName('apple fruit'))
獲取和設定屬性
獲取和設定屬性分別是兩個方法：getAttribute、setAttribute，這兩個方法不屬於document物件，因此不能通過document物件呼叫，而是通過元素節點物件呼叫。
1. getAttribute —— 獲取節點的屬性值
- 使用方式： object.getAttributu(attribute)
舉例說明
輸出h1標籤的title屬性（注意，我把上述html程式碼中的p改成了h1，為了測試當某個標籤沒有屬性的時候，會輸出什麼）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品清單</title>
</head>
<body>
<h1 title="此處為特價商品">特價商品</h1>
<ul id="special">
<li class="fruit apple">蘋果</li>
<li class="fruit banana">香蕉</li>
</ul>
<!-- <p>熱銷商品</p> -->
<h1>熱銷商品</h1>
<ul id='normal'>
<li>桃子</li>
<li>草莓</li>
<li>西瓜</li>
</ul>
<script>
let headers = document.getElementsByTagName('h1');
for (let item of headers) {
console.log(item.getAttribute('title'));
}
</script>
</body>
</html>
2. setAttribute —— 對屬性節點的值作出修改
- 使用方式：object.setAttribute(attribute, value)
- 如果某個節點有這個屬性，那麼使用 setAttribute 後，新屬性會覆蓋住原來的屬性；如果某個節點沒有這個屬性，那麼 setAttribute 先建立這個屬性，然後設定它的值。
舉例說明
獲取文件裡所有h1元素，無論h1有沒有title，都將其title設定為"new title"，最後，輸出檢驗結果：
let headers = document.getElementsByTagName('h1');
for (let item of headers) {
item.setAttribute('title', 'new title');
console.log(item.getAttribute('title'));
}