DOM是針對xml并經(jīng)過擴展應用于html的應用程序編程接口占键，前端工程師借助DOM并使用前端腳本語言來擁有對頁面內(nèi)容及結構的控制權。
- DOM可以將任何html或xml文檔描繪成一個“多層節(jié)點結構”擦剑。
- DOM對象中擁有許多不同類型的節(jié)點，這些節(jié)點都繼承自Node類型存谎，因此所有節(jié)點都共享著相同的屬性和方法返顺。
【節(jié)點的共有屬性及方法】
-
屬性：nodeType，該屬性表明節(jié)點的類型站绪。
<p id="p">我是一個段落</p>
var node=document.getElementById('p');
alert(node.nodeType)//1
alert(node.childNodes[0].nodeType)//3
alert(node.ownerDocument.nodeType)//9
這是一個例子，nodeType的值是從1~12的數(shù)字丽柿，分別表示各種不同的類型恢准，例子中，node是<p>他是一個元素節(jié)點甫题，nodeType=1馁筐；他的子節(jié)點是文本節(jié)點，nodeType=3坠非；它屬于的文檔是一個文檔節(jié)點敏沉，nodeType=9；
還有很多節(jié)點類型炎码，只是我沒咋看見盟迟，所以先不寫了。 -
屬性：childNodes潦闲，該屬性保存著一個NodeList對象攒菠，它是一種類 數(shù)組對象，用于保存一組有序的節(jié)點歉闰，可以通過位置來訪問這些節(jié)點辖众。
var n1=node.childNodes[0];
var n2=node.childNodes.item(1);
var length=node.childNodes.length;
發(fā)現(xiàn)該屬性的表現(xiàn)形式類似數(shù)組卓起，但他并不是Array的實例。但是我們可以將它轉(zhuǎn)化為數(shù)組凹炸。參考arguments對象如何轉(zhuǎn)化為數(shù)組 - 屬性：parentNode戏阅，該屬性指向文檔樹中的父節(jié)點。
- 屬性：previousSibling,該屬性表示該節(jié)點的前一個兄弟節(jié)點啤它。如果該節(jié)點為第一個兄弟節(jié)點奕筐，那么該屬性值為null。
- 屬性：nextSibling,該屬性表示該節(jié)點的后一個兄弟節(jié)點蚕键。如果該節(jié)點為最后一個兄弟節(jié)點救欧，那么該屬性值為null。
- 屬性：firstChild锣光，該屬性表示該節(jié)點的第一個子節(jié)點笆怠。
- 屬性：lastChild，該屬性表示該節(jié)點的最后一個子節(jié)點誊爹。
- 屬性：owerDocument蹬刷，該屬性表示整個文檔的文檔節(jié)點。
- 方法：hasChildNodes()频丘，該方法在節(jié)點包含一個或多個子節(jié)點時返回true办成。
-
方法：appendChild()，該方法用于向列表的末尾添加一個節(jié)點搂漠。
node.appendChild(newnode); -
方法：insertBefore()迂卢，該方法用于在指定節(jié)點之前插入一個節(jié)點。下面這個例子是在空節(jié)點之前插入桐汤，也就是放在最后咯而克。
node.appendChild(newnode,null); -
方法：replaceChild()，該方法是要替換某個節(jié)點怔毛，所以接受兩個參數(shù)员萍，第一個是新節(jié)點，第二個是被替換的節(jié)點拣度。
node.replaceChild(newnode,node.childNodes[0]) -
方法：removeChild()碎绎，這個方法只有一個參數(shù)就是要移除的參數(shù)。
node.removeChild(node.childNodes[0]); -
方法：cloneNode()抗果，用于為調(diào)用這個方法的節(jié)點創(chuàng)建一個副本筋帖，接受兩個參數(shù)，true：表示深度復制窖张，及復制節(jié)點及其整個子節(jié)點樹幕随。false：執(zhí)行淺復制，只復制節(jié)點本身宿接。
var newnode=node.childNodes[0].cloneNode(true);
node.appendChild(newnode); - 方法：normalize()赘淮，作用時連接該節(jié)點內(nèi)的兩個文本節(jié)點之間的空白辕录。
【需要注意】新增、插入梢卸、替換走诞、移除節(jié)點都是針對父節(jié)點的方法。父節(jié)點應用這些方法來調(diào)整子節(jié)點蛤高。
【Document類型】
文檔節(jié)點是每個文檔的根節(jié)點蚣旱，節(jié)點即對象，文檔節(jié)點及document對象是HTMLDocument的一個實例戴陡，是window對象的一個屬性塞绿，所以可將其作為全局對象來訪問。
-
該對象的屬性：
alert(document.nodeType);//9
alert(document.nodeName);//#document
alert(document.nodeValue);//null
其余呢恤批，沒有父節(jié)點异吻，所以為null，沒有所屬文檔喜庞，本身就是一個文檔诀浪，存在子節(jié)點。 -
子節(jié)點
var body=document.body;
var html=document.documentElement;
另外還有文檔類型節(jié)點延都，注釋節(jié)點雷猪，也都可能是document的子節(jié)點，但是由于瀏覽器之間差異性太大晰房，也沒什么用求摇，我就不多深理解啦。 -
文檔信息
- title:包含著,<title>元素中的文本
document.title='test'; - 與網(wǎng)頁請求有關的三個屬性：url domain referrer
- url屬性包含頁面完整的url（即地址欄中顯示的url）
- domain屬性中只包含頁面的域名
- referer屬性是來源頁面的URL殊者，可能會包含空字符串
- title:包含著,<title>元素中的文本
這三個屬性月帝，只有domain是可以設置的，但不能給domain設置任何值幽污。只有domain值一樣的頁面，才可以互相訪問對方包含的js對象簿姨。
所有這些請求都包含在請求的http頭部距误，只不過是通過這些屬性，讓我們能夠訪問他們而已扁位。
-
查找元素
- 方法一：接受一個取得元素的id
var node=document.getElementById('a');
【注意】
1准潭、IE8及較低版本不區(qū)分大小寫，所a與A會被認為是一樣的域仇，但是其他瀏覽器都會區(qū)分刑然。
2、IE7及較低版本會有一個怪癖：當（input暇务、textarea泼掠、button怔软、select）的name屬性與給定參數(shù)id的值一樣時，且前者在真正的id前面時择镇，會被取代挡逼。 - 方法二：要取得元素的標簽名
var nodes=document.getElementsByTagName('p');
這個方法會返回一個HTMLCollection對象，作為一個動態(tài)集合腻豌，該對象與nodelist對象很相似家坎，可以用.item(index)、[index]來訪問集合中的元素吝梅。
但是HTMLCollection對象有自己的方法虱疏，.namedItem(string)、[string]利用名字來訪問集合中的某一個元素苏携。 - 方法三：要取得元素的name
var radios= document.getElementsByName('color')做瞪；
這個也會返回一個HTMLCollection對象。
- 方法一：接受一個取得元素的id
