php中，DOM是PHP語(yǔ)言與xml/html標(biāo)簽之間溝通的橋梁，在js中也同樣，是js與xml/html之間溝通的一個(gè)橋梁。所以學(xué)習(xí)DOM就是通過(guò)js來(lái)對(duì)HTML標(biāo)簽內(nèi)容做增、刪、改、查等操作。
元素節(jié)點(diǎn)獲取
//通過(guò)ID獲取具體節(jié)點(diǎn)
var it = document.getElementById('username');
//通過(guò)標(biāo)簽訪問(wèn)具體節(jié)點(diǎn)，獲取的形式為數(shù)組或集合形式
var hh = document.getElementsByTagName('h2');
//通過(guò)name標(biāo)簽訪問(wèn)具體節(jié)點(diǎn)，獲取的形式為數(shù)組或集合形式
var it = document.getElementsByName('username');
文本節(jié)點(diǎn)獲取
<div>today is very<span>good</span></div>
若想獲取這個(gè)文本節(jié)點(diǎn)，需要借助元素節(jié)點(diǎn)先獲取div，然后在獲得其內(nèi)部文本節(jié)點(diǎn)
var it3 = document.getElementsByTagName('div')[0];
//獲得div內(nèi)部第一個(gè)子節(jié)點(diǎn)對(duì)象并獲得文本信息
console.log(it3.lastChild.wholeText);
屬性節(jié)點(diǎn)獲取
節(jié)點(diǎn).attributes：把該節(jié)點(diǎn)所有屬性以數(shù)組形式返回
節(jié)點(diǎn).nodeTyoe：返回節(jié)點(diǎn)類型，1.元素節(jié)點(diǎn) 2.屬性節(jié)點(diǎn) 3.文本節(jié)點(diǎn) 4.document節(jié)點(diǎn)
屬性值操作
//獲取屬性值
節(jié)點(diǎn).getAttribute(屬性名稱)；
//設(shè)置屬性值
節(jié)點(diǎn).setAttrubute(屬性名稱，值)；
兄弟節(jié)點(diǎn)獲取
firstChild，lastChild：子節(jié)點(diǎn)獲得第一個(gè)/最后一個(gè)節(jié)點(diǎn)
nextSibling：獲得下一個(gè)兄弟節(jié)點(diǎn)
previousSibling：獲得上一個(gè)兄弟節(jié)點(diǎn)
childNodes：獲取全部子節(jié)點(diǎn)，主流瀏覽器會(huì)把空白節(jié)點(diǎn)算上，而老版本IE不會(huì)
父節(jié)點(diǎn)獲取
parentNode：獲取當(dāng)前元素父節(jié)點(diǎn)
節(jié)點(diǎn)創(chuàng)建和追加
父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn));添加節(jié)點(diǎn)
父節(jié)點(diǎn).insertBefore(要插入的節(jié)點(diǎn)，插入位置的節(jié)點(diǎn))
父節(jié)點(diǎn).replaceChild(要替換的節(jié)點(diǎn)，被替換的節(jié)點(diǎn))
通過(guò)js動(dòng)態(tài)創(chuàng)建節(jié)點(diǎn)如下：
<ul><li mean="熱情">red</li></ul>
具體js代碼：
//創(chuàng)建ui標(biāo)簽
var ull = document.createElement('ul');
//創(chuàng)建li標(biāo)簽
var lii = document.createElement('li');
//創(chuàng)建文本
var txt = document.createTextNode('red');
//為lii設(shè)置mean屬性
lii.setAttribute('mean','熱情');
//給lii節(jié)點(diǎn)添加文本
lii.appendChild(txt);
//給ull節(jié)點(diǎn)添加lii節(jié)點(diǎn)
ull.appendChild(lii);
//給body節(jié)點(diǎn)添加ull
document.body.appendChild(ull);
節(jié)點(diǎn)復(fù)制操作
被復(fù)制節(jié)點(diǎn).cloneNode(false/true)：false淺復(fù)制（本身節(jié)點(diǎn)） true深復(fù)制（本身和內(nèi)部子節(jié)點(diǎn)都復(fù)制）
節(jié)點(diǎn)刪除
節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))
子節(jié)點(diǎn).parentNode.removeChild(子節(jié)點(diǎn))
DOM對(duì)CSS樣式操作
- 獲取CSS樣式
節(jié)點(diǎn).style.css.樣式名稱 - 設(shè)置CSS樣式（有就修改，沒(méi)有則添加）
元素節(jié)點(diǎn).style.css.樣式名稱 = 值
注意：
DOM操作CSS樣式只能操作"行內(nèi)樣式"（CSS樣式分為行內(nèi)、內(nèi)部、外部）
操作的屬性如果帶橫杠，需要把橫杠去掉，并把緊接著的字母大寫(xiě)。
