JavaScript的DOM操作主要包括：
- 更新：更新該DOM節(jié)點(diǎn)的內(nèi)容刽辙，相當(dāng)于更新了該DOM節(jié)點(diǎn)表示的HTML的內(nèi)容晶府；
- 遍歷：遍歷該DOM節(jié)點(diǎn)下的子節(jié)點(diǎn)渗勘，以便進(jìn)行進(jìn)一步操作呼胚；
- 添加：在該DOM節(jié)點(diǎn)下新增一個(gè)子節(jié)點(diǎn)谋作，相當(dāng)于動(dòng)態(tài)增加了一個(gè)HTML節(jié)點(diǎn)；
- 刪除：將該節(jié)點(diǎn)從HTML中刪除列吼，相當(dāng)于刪掉了該DOM節(jié)點(diǎn)的內(nèi)容以及它包含的所有子節(jié)點(diǎn)幽崩。
- 表單操作：取值和設(shè)置相應(yīng)值。
在操作DOM之前寞钥，首先要獲取到DOM元素慌申。
1.獲取 & 創(chuàng)建DOM元素
document.getElementById() // 因?yàn)镮D值在html中唯一，所以此方法只能獲取一個(gè)節(jié)點(diǎn)元素
document.getElementsByTagName() // 根據(jù)標(biāo)簽獲取特點(diǎn)標(biāo)簽元素集合
document.getElementsByClassName() // 根據(jù)class值獲取元素集合
document.querySelector() // 選擇器語(yǔ)法獲取符合條件的第一個(gè)元素理郑，IE8以下不支持此語(yǔ)法
document.querySelectorAll() // 選擇器語(yǔ)法選擇符合條件的所有元素集合蹄溉，IE8以下不支持此語(yǔ)法
element.children // 獲取元素下的所有直屬子節(jié)點(diǎn)咨油，只讀屬性，實(shí)時(shí)變化
element.firstElementChild // 獲取元素下第一個(gè)子節(jié)點(diǎn)
element.lastElementChild // 獲取元素下最后一個(gè)子節(jié)點(diǎn)
element.parentElement // 獲取元素最近的一層父元素
document.createElement('tag_name') // 創(chuàng)建指定標(biāo)簽的節(jié)點(diǎn)
2.更新DOM元素
element.innerHTML = '' // 更新元素內(nèi)容类缤，可以包含html標(biāo)簽
element.innerText = '' // 更新元素文本內(nèi)容臼勉，不支持html標(biāo)簽
element.style.property = '' // 更新元素樣式屬性值，property需要更改為駝峰命名
element.className = '' // 更新元素的class名稱
element.setAttribute('property_name','value') // 設(shè)置標(biāo)簽的屬性值
3.添加DOM元素
element.appendChild(element) // 添加節(jié)點(diǎn)為最后一個(gè)子節(jié)點(diǎn)
element.insertBefore(newElement, referenceElement) // 在父元素的指定子節(jié)點(diǎn)前面添加子節(jié)點(diǎn)
4.刪除DOM元素
// 拿到待刪除節(jié)點(diǎn):
var self = document.getElementById('to-be-removed');
// 拿到父節(jié)點(diǎn):
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
5.表單操作
input_element.value // 獲取text,password,hidden,select類(lèi)型input的值
input_element.checked // 獲取多選框的選項(xiàng)是否勾選餐弱，返回值為true / false
input_element.value = 'new_value' // 設(shè)置text,password,hidden,select類(lèi)型input的值
input_element.checked = true / false // 設(shè)置多選框選項(xiàng)是否選擇
