DOM定義:
文檔對象模型 (DOM) 是HTML和XML文檔的編程接口驰吓。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問，以改變文檔的結構百新，樣式和內(nèi)容。
DOM 提供了一種表述形式將文檔作為一個結構化的節(jié)點組以及包含屬性和方法的對象庐扫。從本質上說饭望，它將web 頁面和腳本或編程語言連接起來了。
image
document對象
每個載入瀏覽器的HTML文檔都會成為document對象形庭，document對象包含文檔的基本信息铅辞，我們可以用通過JavaScript對HTML頁面中的所有元素進行訪問修改。
TIM圖片20190219134010.png
document對象常用屬性：
-
doctype萨醒、head斟珊、body
TIM圖片20190219134331.png - activeElement:
activeElement屬性返回當前文檔中獲得焦點的那個元素。 - location
TIM圖片20190219135102.png
location屬性返回一個只讀對象富纸，提供了當前文檔的 URL信息囤踩。
// 假定當前網(wǎng)址為http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"
TIM圖片20190219135025.png
// 跳轉到另一個網(wǎng)址
document.location.assign('http://www.google.com')
// 優(yōu)先從服務器重新加載
document.location.reload(true)
// 優(yōu)先從本地緩存重新加載（默認值）
document.location.reload(false)
// 跳轉到另一個網(wǎng)址，但當前文檔不保留在history對象中晓褪，
// 即無法用后退按鈕堵漱，回到當前文檔
document.location.assign('http://www.google.com')
// 將location對象轉為字符串，等價于document.location.href
document.location.toString()
雖然location屬性返回的對象是只讀的涣仿，但是可以將URL賦值給這個屬性勤庐，網(wǎng)頁就會自動跳轉到指定網(wǎng)址示惊。
document.location = 'http://www.example.com';
// 等價于
document.location.;
- 實現(xiàn)當前頁面的刷新：
document.location = '當前頁面地址'
document.location.reload(true)
document.location.assign('當前頁面地址')
- readyState：
readyState屬性返回當前文檔的狀態(tài)，共有三種可能值：
-
loading：加載HTML代碼階段愉镰，尚未解析完成米罚。 -
interactive：加載外部資源階段。 -
complete：全部加載完成丈探。
- cookie
cookie是存儲在客戶端的文本阔拳。
TIM圖片20190219135928.png - innerText
innerText是一個可寫屬性，返回元素包含的文本內(nèi)容类嗤，在多層次的時候會按照元素由淺到深的順序拼接成其內(nèi)容糊肠。
document.innerText:會過濾掉所有的標簽，只顯示內(nèi)容的拼接遗锣。
<p>
123
<span>456</span>
</p>
//最終的顯示為123456
- innerHTML货裹、outerHTML
innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容精偿，而是返回元素的HTML結構弧圆，在寫入的時候也會自動創(chuàng)建DOM。
<p>
123
<span>456</span>
</p>
p.innerHTML,最終顯示：
123
<span>456</span>
document對象常用的方法：
- write():
document.write方法用于向當前文檔寫入內(nèi)容笔咽。只要當前文檔還沒有用close方法關閉搔预，它所寫入的內(nèi)容就會追加在已有內(nèi)容的后面。
document.open();
document.write("hello");
document.write("world");
document.close();
- 如果頁面已經(jīng)渲染完成再調用
write方法叶组，它會先調用open方法拯田，擦除當前文檔所有內(nèi)容，然后再寫入甩十。 - 如果在頁面渲染過程中調用
write方法船庇，并不會調用open方法。 - 需要注意的是侣监，雖然調用
close方法之后鸭轮，無法再用write方法寫入內(nèi)容，但這時當前頁面的其他DOM節(jié)點還是會繼續(xù)加載橄霉。 - 除了某些特殊情況窃爷，應該盡量避免使用document.write這個方法。
- Element
- 除了
document對象姓蜂，在DOM中最常用的就是Element對象了按厘，Element對象表示HTML元素。 -
Element對象可以擁有類型為元素節(jié)點覆糟、文本節(jié)點刻剥、注釋節(jié)點的子節(jié)點，DOM提供了一系列的方法可以進行元素的增滩字、刪、改、查操作 -
Element有幾個重要屬性
-
nodeName：元素標簽名麦箍，還有個類似的tagName -
nodeType：元素類型 -
className：類名 -
id：元素id -
children：子元素列表（HTMLCollection） -
childNodes：子元素列表（NodeList） -
firstChild：第一個子元素 -
lastChild：最后一個子元素 -
nextSibling：下一個兄弟元素 -
previousSibling：上一個兄弟元素 -
parentNode漓藕、parentElement：父元素
查詢元素
- getElementById()
getElementById方法返回匹配指定ID屬性的元素節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點挟裂，則返回null享钞。這也是獲取一個元素最快的方法。
TIM圖片20190219141605.png - getElementsByClassName()
getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象）诀蓉，包括了所有class名字符合指定條件的元素（搜索范圍包括本身）栗竖，元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用渠啤，也可以在任何元素節(jié)點上調用狐肢。
TIM圖片20190219141815.png - getElementsByTagName()
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象沥曹，也就是說份名，搜索結果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中妓美。這個方法不僅可以在document對象上調用僵腺，也可以在任何元素節(jié)點上調用。
TIM圖片20190219141941.png - 或者id = 'ct'的div里面的p元素
ct.getElementsByTagName('p')
TIM圖片20190219142317.png - querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點壶栋。如果有多個節(jié)點滿足匹配條件辰如，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點贵试，則返回null丧没。
document.querySelector('#ct');
docyument.querySelector('#ct a');
querySelector方法無法選中CSS偽元素。
- querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點锡移，返回的是NodeList類型的對象呕童。NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結果中淆珊。
TIM圖片20190219142707.png
querySelector兼容性：caniuse.com
創(chuàng)建元素
- createElement()
createElement方法用來生成HTML元素節(jié)點夺饲。
createElement方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性施符。如果傳入大寫的標簽名往声，會被轉為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null戳吝，會報錯浩销。
document.createElement('div') - createTextNode()
createTextNode方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內(nèi)容听哭。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
- createDocumentFragment()
createDocumentFragment方法生成一個DocumentFragment對象慢洋。
var docFragment = document.createDocumentFragment();
//沒有參數(shù)
DocumentFragment對象是一個存在于內(nèi)存的DOM片段塘雳，但是不屬于當前文檔，常常用來生成較復雜的DOM結構普筹，然后插入當前文檔败明。這樣做的好處在于，因為DocumentFragment不屬于當前文檔太防，對它的任何改動妻顶，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)蜒车。
修改元素
- appendChild()
把一個DOM對象添加到父容器上讳嘱。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- insertBefore()
在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
- replaceChild()
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);
刪除元素
- removeChild()
parentNode.removeChild(childNode); - clone元素
cloneNode()方法用于克隆元素，方法有一個布爾值參數(shù)酿愧，傳入true的時候會深復制沥潭，也就是會復制元素及其子元素（IE還會復制其事件），false的時候只復制元素本身.
node.cloneNode(true);
屬性操作
- getAttribute()
getAttribute()用于獲取元素的attribute值
node.getAttribute('id'); - createAttribute()
createAttribute()方法生成一個新的屬性對象節(jié)點寓娩，并返回它叛氨。
attribute = document.createAttribute(name);
createAttribute方法的參數(shù)name，是屬性的名稱棘伴。 - setAttribute()
setAttribute()方法用于設置元素屬性
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
等同于
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
- romoveAttribute()
removeAttribute()用于刪除元素屬性
node.removeAttribute('id');
classList()
- 添加
class
xx.classList.add('active') - 刪除
class
xx.classList.remove('active') - 是否包含某個
class
xx.classList.contains('active')
示例：
TIM圖片20190219145510.png
