目錄：
1、節點類型之Document類型
2、節點類型之Element類型
3、節點類型之Text類型
4、綜合小示例 -- 動態添加外部樣式文件
5、查找元素的擴展方法
接上篇，我們先來看常用的三種節點類型。
Document 類型
js通過Document類型表示文檔。
在瀏覽器中，document對象是HTMLDocument(繼承自Document類型) 的一個實例，表示整個HTML頁面。
而且，document對象是window對象的一個屬性，可以將其作為全局對象來訪問。
1、訪問子節點
有兩個內置的訪問其子節點的快捷方式，documentElement和childNodes
例子：
<html> <head> <title>Sample Page</title> </head> <body> <p>Hello world!</p> </body> </html>
這個頁面經過瀏覽器解析后，其文檔只包含一個子節點，即<html>元素。
// 訪問文檔子節點 documentElement 和 childNodes var html = document.documentElement; // 取得對 <html>的引用 alert(html === document.childNodes[0]); // true alert(html === document.firstChild); // true
另外還有個 body 屬性，直接指向 <body>元素
var body=document.body;
2、訪問文檔信息
作為HTMLDocument的一個實例，document對象還有一些標准的Document對象沒有的屬性。這些屬性提供了document對象所表現的網頁的一些信息：title, URL, domain, referrer
// 文檔信息： title, URL, domain, referrer var originalTitle = document.title; var url = document.URL; var domain = document.domain; var referrer = document.referrer;
3、查找元素
Document類型提供了兩個方法 getElementById() 和 getElementByTagName()
根據Id取得元素 ： getElementById(ID)
假設有div片段
<div id="myDiv">Some text</div>
可以用如下代碼取得這個元素
var div = document.getElementById("myDiv"); // 取得 <div> 元素的引用
注意:
1、上面的參數大小寫必須嚴格匹配。
2、如果頁面中多個元素的ID值相同，getElementById()只返回文檔中第一次出現的元素。
根據標簽名取得元素 getElementsByTagName(標簽名)
返回值：包含0或多個元素的NodeList，在HTML文檔中，這個方法會返回一個HTMLCollection對象，作為一個“動態”集合，該對象與NodeList非常類似。
示例：取得頁面中所有的<img>元素
// 取得頁面中所有的 <img> 元素 var images = document.getElementsByTagName("img"); alert(images.length); //輸出圖像數量 alert(images[0].src); //輸出第一個圖像的 src 特性 alert(images.item(0).src); //輸出第一個圖像的 src 特性
Element 類型
這是我們最常接觸的類型，HTML主體結構中所有標簽都是這個類型。
要訪問元素的標簽名，可以使用nodeName屬性，也可以使用tagName屬性；這兩個屬性會返回相同的值。例子：
<div id="myDiv">Some text</div>
可以像下面這樣取得這個元素及其標簽名：
alert(div.tagName); //"DIV" alert(div.tagName == div.nodeName); //true
div.tagName輸出的是 DIV 而非 div , 在HTML中，標簽名始終以全部大寫表示。
1、HTML元素
所有HTML元素都由HTMLElement類型表示，不是直接通過這個類型，也是通過它的子類型來表示。
HTMLElement類型直接繼承自Element並添加了一些屬性。
每個HTML元素都存在着下列標准特性。
id，元素在文檔中的唯一標識符
title, 有關元素的附加說明信息，一般通過工具提示條顯示出來
lang, 元素內容的語言代碼，很少使用
dir, 語言的方向，值為 ltr 或 rtl （ l:left, t:to, r:right ）, 很少使用
className, 與元素的class特性對應，即為元素指定的CSS類
例子：
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr">Some text</div>
示例：通過js 取得標准特性值
var div = document.getElementById("myDiv"); alert(div.id); //"myDiv" alert(div.className); //"bd"
其他title, lang, dir取得方法類似
2、取得特性值
每個元素都有一或多個特性，這些特性的用途是給出相應元素或其內容的附加信息。
操作特性的DOM方法主要有三個，分別是getAttribute()、setAttribute()和removeAttribute()。
接上面例子，獲取特性值。
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
通過getAttribute()方法也可以取得自定義特性
<div id="myDiv" data-geo="China">Hello world!</div>
取得自定義值：
var geo = div.getAttribute("data-geo");
原生的元素特性，可以通過DOM元素本身的屬性來訪問, 例如 div.id ，
自定義的只能通過getAttribute()來訪問。
一般使用對象的屬性，只有取得自定義特性的情況下才用getAttribute()方法。
3、設置特性值
通過 setAttribute() 方法既可以操作HTML特性也可以操作自定義特性。
通過這個方法設置的特性名會統一轉成小寫。
如果特性不存在會創建該屬性並設置相應的值。
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "someOtherClass");
div.setAttribute("data-date", "2019-9-1");
原生的特性也可以通過屬性賦值的方法設置。
div.align = "left";
使用removeAttribute()方法徹底刪除元素的特性，如
div.removeAttribute("class");
綜合示例：創建元素
使用document.createElement()方法可以創建新元素，例子：
//1、創建一個 <div> 元素 var div = document.createElement("div"); // 2、添加特性 div.id = "myNewDiv"; div.className = "box"; // 3、加到文檔樹中 document.body.appendChild(div);
Text 類型
這個類型比較簡單，介紹一個創建文本節點的方法， createTextNode()，例子
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode) var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element);
DOM操作綜合例子 – 添加外部樣式文件
以引入樣式文件為例
<link rel="stylesheet" type="text/css" href="styles.css" />
使用js構建這個引用
var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "style.css"; var head = document.getElementsByTagName("head")[0]; head.appendChild(link);
用函數來封裝一下
function loadStyles(url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; var head = document.getElementsByTagName("head")[0]; head.appendChild(link); }
調用該函數：
loadStyles("styles.css");
常用的動態加載js文件，也可采用類似做法。
查找元素的擴展方法
選擇符 API
Document類型中我們介紹了通過 getElementById()和getElementsByTagName()來查找元素，不過這兩種方法對一些更加個性化的查詢就有點力不從心了。
Selectors API可以讓瀏覽器原生支持CSS查詢。
通過DOM擴展方法可以通過CSS選擇符來查詢，核心的兩個方法：querySelector()和querySelectorAll()
querySelector()方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有，返回null
示例：
獲取文檔中第一個 <p> 元素：
document.querySelector("p");
獲取文檔中 class="example" 的第一個元素:
document.querySelector(".example");
獲取文檔中 class="example" 的第一個 <p> 元素:
document.querySelector("p.example");
獲取文檔中有 "target" 屬性的第一個 <a> 元素：
document.querySelector("a[target]");
querySelectorAll()返回的是一個NodeList的實例。
只要傳給querySelectorAll()方法的CSS選擇符有效，該方法都會返回一個NodeList對象，而不管找到多少匹配的元素。如果沒找到匹配的元素，NodeList就是空的。
// 獲取文檔中所有的 <p> 元素
var x = document.querySelectorAll("p");
// 設置第一個 <p> 元素的背景顏色
x[0].style.backgroundColor = "red";
插入標記技術innerHTML和outHTML
獲取修改html時，直接使用插入標記技術更加方便。
innerHTML和outHTML這兩個DOM擴展已經納入了HTML5規范。
1、innerHTML屬性
<div id="content">
<p>
Hello world!
</p>
</div>
對應上面的<div>元素來說，它的 innerHTML屬性會返回如下字符串
<p>
Hello world!
</p>
2、outHTML屬性
<div id="content">
<p>
Hello world!
</p>
</div>
對應上面的<div>元素來說，它的 outerHTML屬性會返回與上面相同的代碼，包括<div>本身。
同樣也可以設置值，如
var div = document.getElementById("content");
div.outerHTML = '<p>remove div</p>';
總結
我們介紹了DOM1級常用的操作，DOM1 級主要定義的是HTML和XML文檔的底層結構。
DOM2和DOM3級則是在這個結構的基礎上引入了更多的交互能力，也支持了更高級的XML特性，一個常用的功能就是用來設置樣式：
任何支持style特性的HTML元素在JavaScript中都有一個對應的style屬性，我們可以通過這個屬性設置樣式，如
var div = document.getElementById("content");
div.style.backgroundColor = "red";
div.style.border = "1px solid black";
也可以使用cssText, 一次設置多個樣式屬性，推薦使用。
div.style.cssText = "background-color:green; border:3px solid red;";
理解DOM的關鍵，就是理解DOM對性能的影響。
DOM操作往往是js中開銷最大的部分，應盡量減少DOM操作。
（通過合並操作減小操作的次數）
祝編程開心 ：）
