jsDOM

1. DOM的概念

DOM中的D，表明「文檔」.

若是沒有文檔，DOM也就無從談起，當你建立的網頁加載到瀏覽器時，DOM在幕後就悄然而生，，此時你的這個網頁文檔就是一個文檔對象，也就是DOM中的D.css

DOM中的O，表明「對象」.

對象的相關知識咱們已經再上一章節學習過，主要包括用戶自建對象，內建對象及宿主對象，那麼這裏的O表明的就是宿主對象，也就是瀏覽器給咱們提供的這部分對象。html

DOM中的M，表明「模型」.

這裏首先要知道字面的模型是什麼意思？生活中咱們常見的模型主要有飛機模型，汽車模型，人體模型等，不論是什麼模型，他們都是某種事物的表現形式。就像飛機模型表明着一架真正的飛機，一張城市地圖表明着某一座城市同樣。那麼，在這裏的模型就指的是咱們這個網頁，這個網頁裏的各類HTML元素都是構成這個模型的組件，他們相互包含又相互並列存在，構成一種父子、兄弟的關係，也就相似於一棵樹的各個分支同樣，許多的分支組成了這一棵樹，這棵樹就是一個模型。web

2. 節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>節點的概念</title>
</head>
<body>
 	<h1>這是一個標題</h1>
    <p title="這段文字的說明">這是一段文字說明，也是一個段落</p>
    <p>測試數據</p>
    <ul id="purchases">
        <li class="sale">這是一個列表</li>
        <li class="sale">這是一個列表</li>
        <li class="sale">這是一個列表</li>
        <li class="sale">這是一個列表</li>
    </ul>
</body>
</html>
複製代碼

2.1 節點的概念

咱們以這個網頁結構爲例，DOCTYPE以後，一個html標籤標識了整個文檔的開始，這個網頁裏的全部其餘元素都包含在這個標籤當中。那麼，按照咱們剛纔說過的父子、兄弟關係來表示的的話，html標籤至少是一個父親，由於全部的元素其餘元素都包含在其內部，他既沒有父親也沒有兄弟，若是你要較真非要說它從哪裏來，那麼，咱們就把它比做女媧。再深刻一層咱們發現和兩個分支,他們位於同一層且相互不包含，所以上他們就是兄弟關係，屬於平輩。他們的父親都是html標籤。往下深刻，以此類推，都可以用父子、兄弟關係來描述這樣一個網頁，構成這些父子兄弟的元素分隔點，咱們就稱其爲節點。數組

2.2 節點分類

元素節點

以這個網頁爲例，它的元素節點就是構成這個網頁結構的這些html標籤，具體到這個網頁就是<\h1>、<\p>、<\ul>這些元素就被成爲元素節點。瀏覽器

文本節點

在一個網頁中大部分的內容都由文原本提供，如這個網頁裏 p 標籤所包含的那段文字，他就是一個文本節點，通常網頁裏的文本節點老是被包含在元素節點內部，但不是全部的元素節點都包含文本節點。markdown

屬性節點

屬性節點是元素節點的更具體描述，例如能夠描述出他的類型，說明等，好比大部分元素都具有title屬性，這個屬性就是用來對每一個元素的內容加以說明，這個節點就是屬性節點。學習

3. 獲取元素

3.1 獲取元素的方法

經過元素節點的id屬性獲取

document.getElementById(id)
複製代碼

經過元素獲取，它返回的是一個對象的數組

var Uli = document.getElementsByTagName(li)
var count = Uli.length
console.log(count)
> 4
for(var i=0; i<count; i++){
    // 彈出四次Object,返回的是一個對象數組
    alert(typeof Uli[i])
}
複製代碼

兩個結合使用

假如咱們給ul設置一個id爲purchases的屬性，咱們來獲取這個id屬性值包含多少個列表項。測試

var shopping = document.getElementById("purchases")
var items = shopping.getElementsByTagName("*")
console.log(items.length)
複製代碼

經過元素的class屬性獲取

// 語法
document.getElementsByClassName("class")
複製代碼

備註：這個方法返回值與getElementsByTagName()相似，返回的是具備相同類名的元素數組對象。特別注意中間的Elements這個單詞最後是加了s的，注意跟getElementById()進行區別。ui

經過css選擇器獲取元素

// 獲取文檔中 id="purchases" 的元素：
document.querySelector('#purchases')

// 獲取文檔中第一個P元素
document.querySelector("p")

// 獲取文檔中class="sale"的第一個P元素
document.querySelector("p.sale")

// 獲取文檔中有p元素有title屬性的第一個p元素
document.querySelector("p[title]")
/** 如下實例演示了多個選擇器的使用方法。 假定你選擇了兩個選擇器: <h2> 和 <h3> 元素。 如下代碼將爲文檔的第一個 <h2> 元素添加背景顏色： **/
document.querySelector("h2, h3").style.backgroundColor = "red";
複製代碼

querySelectorAll()獲取所有元素，返回一個數組對象

var lisale = document.querySelectorAll("li.sale")
for(var i=0; i<lisale.length; i++){
    lisale[i].style.color = "red"
}
複製代碼

3.2 知識點總結

一份文檔就是一顆節點樹
節點分爲不一樣類型：元素節點，屬性節點，文本節點
getElementById()返回一個對象，該對象對應着文檔裏的一個特定的元素節點
getElementsByTagName()和getElementsByClassName()都返回的是一個數組對象，他們分別對應着一組特定的元素節點。
每一個節點都是一個對象
querySelector()能夠經過css選擇器，屬性選擇器，元素標籤獲取元素，返回一個特定的元素節點，擁有多個一樣元素節點的只返回第一個。
querySelectorAll()返回的是一個數組對象，對應一組特定的元素節點

4. 獲取和設置屬性

經過以上咱們學過的獲取元素方法獲得元素後，咱們就能夠設法獲取他的各個屬性，相應的也能夠更改屬性節點的值。url

4.1 getAttribute()獲取屬性

語法：獲取到元素對象，經過對象.getAttribute()的方式獲取對象的屬性，她只有一個參數，是你打算查詢屬性的名字。

Object.getAttribute(attribute)
複製代碼

備註：這個方法他不屬於document，因此不能使用document對象調用。他只能經過元素節點對象調用。

// getAttribute()獲取屬性
var Plist = document.getElementsByTagName('p')
for(var i=0; i<Plist.length; i++){
    // 綜合運用咱們學過的條件判斷語句，讓有屬性時才執行
    if(Plist[i].getAttribute('title') != null){
        alert(Plist[i].getAttribute('title'))
    };   
}
複製代碼

改進代碼，寫更少最好：

var Plist = document.getElementsByTagName('p');
for(var i=0; i<Plist.length; i++){
	var title_text = Plist.getAttribute('title')
// if寫在一行的時候不須要大括號，單純的檢查值是否存在能夠這樣簡寫
	if(title_text) alert(title_text)
}
複製代碼

4.2 setAttribute()修改元素節點的屬性值

setAttribute()方法用來修改元素節點屬性的值，與getAttribute()同樣只能用在元素節點。

Object.setAttribute("屬相名", "值")
複製代碼

備註：這個方法有兩個參數，第一個參數是要修改的屬性名，第二個是要修改的值。

修改屬性綜合案例練習：

// setAttribute()修改屬性值
var Plist = document.getElementsByTagName('p')
for(var i=0; i<Plist.length; i++){
    // 綜合運用咱們學過的條件判斷語句，讓有屬性時才執行
    if(Plist[i].getAttribute('title')){
        console.log(Plist[i].getAttribute('title'))
        Plist[i].setAttribute("title", "這是我修改後的值")
        console.log(Plist[i].getAttribute("title"))
    };   
}
> 這段文字的說明
> 這是我修改後的值
複製代碼

setAttribute()還能夠直接給元素增長屬性，而且賦值

var Plist = document.getElementsByTagName('p')
for(var i=0; i<Plist.length; i++){
    var title_text = Plist[i].getAttribute('title');
    if(title_text){
        // 判斷存在title屬性，直接返回
        console.log(title_text);
    }else{
        // 不然不存在，爲其增長並打印出結果
        Plist[i].setAttribute('title',"我爲另外一個空白增長");
        new_title_text = Plist[i].getAttribute('title');
        console.log(new_title_text);
    };  
};
> 這段文字的說明
> 我爲另外一個空白增長
複製代碼

5.DOM知識點總結

本章主要學習了DOM提供的五個方法

getElementById() 返回一個特定元素節點對象
getElementsByTagName()
getElementsByClassName() 這兩個返回一組特定的數組對象
getAttribute() 獲取屬性值
setAttribute() 修改屬性值，設置屬性和值
querySelector() 能夠經過css選擇器、元素、屬性獲取元素，多個返回第一個
querySelectorAll()返回一組特定的數組對象

JavaScript DOM知識點梳理