什么是DOM
DOM：Do
js的組成部分
一套標(biāo)準(zhǔn)，目前有DOM1和DOM2這兩種標(biāo)準(zhǔn)
我們可以使用DOM操作來(lái)操作頁(yè)面中的元素。
DOM節(jié)點(diǎn)
子節(jié)點(diǎn)
childNode：返回值一個(gè)數(shù)組，放的是父節(jié)點(diǎn)中所有的子節(jié)點(diǎn)
nodeType:返回值是一個(gè)數(shù)組，1表示元素節(jié)點(diǎn)，3表示文本節(jié)點(diǎn)
在某些瀏覽器中，如火狐，使用childNode獲取所有元素節(jié)點(diǎn)時(shí)會(huì)把空格等一起或取出來(lái)，此時(shí)就需要使用nodeType來(lái)判斷。
示例：
? ? ? ? // 使用childNode獲取到所有的li標(biāo)簽，并將背景顏色改為紅色
? ? ? ? window.onload = function? () {
? ? ? ? ? ? var oUl = document.getElementById('ul');
? ? ? ? ? ? for (var i = 0; i < oUl.childNodes.length; i++) {
? ? ? ? ? ? ? ? // 判斷nodeType的值是否為1
? ? ? ? ? ? ? ? if (oUl.childNodes[i].nodeType == 1) {
? ? ? ? ? ? ? ? ? ? oUl.childNodes[i].style.backgroundColor = 'red';
? ? ? ? ? ? ? ? };
? ? ? ? ? ? };
? ? ? ? }
childern： 取子節(jié)點(diǎn)，與childNode相比，chlidren不會(huì)把非標(biāo)簽元素解析出來(lái)，不用擔(dān)心兼容性問(wèn)題
父節(jié)點(diǎn)
parentNode
首尾子節(jié)點(diǎn)
IE下的語(yǔ)法 火狐下的語(yǔ)法 含義
firstChild firstElementChild 首
lastChild lastElementChild 尾
兄弟節(jié)點(diǎn)
IE下的語(yǔ)法 火狐下的語(yǔ)法 含義
nextSibling nextElementSibling 下一個(gè)
previousSilbing previousElementSibling 上一個(gè)
添加元素
createElement(元素名):創(chuàng)建一個(gè)元素
父元素.appendChild（子元素）將子元素添加進(jìn)父元素中(添加在最后邊)
示例：點(diǎn)擊一次按鈕，添加一個(gè)li標(biāo)簽
? ? ? ? window.onload = function() {
? ? ? ? ? ? var oBtn = document.getElementById('btn');
? ? ? ? ? ? var oUl = document.getElementById('ul');
? ? ? ? ? ? var oText = document.getElementById('text');
? ? ? ? ? ? oBtn.onclick = function () {
? ? ? ? ? ? ? ? // 創(chuàng)建一個(gè)新標(biāo)簽
? ? ? ? ? ? ? ? var oLi = document.createElement('li');
? ? ? ? ? ? ? ? // 將輸入框中的文字寫(xiě)在新li標(biāo)簽中
? ? ? ? ? ? ? ? oLi.innerHTML = oText.value;
? ? ? ? ? ? ? ? // 將新標(biāo)簽添加在父標(biāo)簽里
? ? ? ? ? ? ? ? oUl.appendChild(oLi);
? ? ? ? ? ? }
? ? ? ? }
? ?
? ?
? ? ? ?
父元素.insertBefore(子元素，在誰(shuí)之前插入),在誰(shuí)之前插入子元素
? ? ? ? window.onload = function() {
? ? ? ? ? ? var oBtn = document.getElementById('btn');
? ? ? ? ? ? var oUl = document.getElementById('ul');
? ? ? ? ? ? var oText = document.getElementById('text');
? ? ? ? ? ? oBtn.onclick = function () {
? ? ? ? ? ? ? ? // 創(chuàng)建一個(gè)新標(biāo)簽
? ? ? ? ? ? ? ? var oLi = document.createElement('li');
? ? ? ? ? ? ? ? // 將輸入框中的文字寫(xiě)在新li標(biāo)簽中
? ? ? ? ? ? ? ? oLi.innerHTML = oText.value;
? ? ? ? ? ? ? ? // 將新標(biāo)簽添加在父標(biāo)簽里
? ? ? ? ? ? ? ? // oUl.appendChild(oLi);
? ? ? ? ? ? ? ? var aLi = document.getElementsByTagName('li');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 在第0個(gè)元素之前插入新元素
? ? ? ? ? ? ? ? oUl.insertBefore(oLi, aLi[0]);
? ? ? ? ? ? }
? ? ? ? }
? ?
? ?
? ? ? ?
刪除元素
父元素.removeChild(要?jiǎng)h除的元素)：刪除父元素中的某個(gè)子元素
示例：點(diǎn)擊刪除，刪除某個(gè)元素
? ? ? ? window.onload = function() {
? ? ? ? ? ? var oBtn = document.getElementsByTagName('a');
? ? ? ? ? ? var oUl = document.getElementById('ul');
? ? ? ? ? ? for (var i = 0; i < oBtn.length; i++) {
? ? ? ? ? ? ? ? oBtn[i].onclick = function() {
? ? ? ? ? ? ? ? ? ? oUl.removeChild(this.parentNode);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? }
? ?
? ?
? ? ? ?
? ? ? ?
? ? ? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ? ? ?
? ? ? ?
? ?
? ?
