DOM的主要操作——增、刪、改、查節點

(1) 查找節點

document.getElementById(‘div1‘)

document.getElementsByName(‘uname‘)

document.getElementsByTagName(‘span‘)

document.getElementsByClassName(‘alert‘)

document.querySelector(‘#div1‘)

document.querySelectorAll(‘.alert‘);

(2) 操作節點的屬性 <a href="" title="">

e.getAttribute(‘href‘)

e.setAttribute(‘href‘, ‘2.html‘)

e.href

自己試試： a.href和a.getAttribute()的返回值有何不同？

(3) 操作節點的樣式

e.style.color

(4) 操作節點的內容

e.innerHTML

e.textContent / innerText

(5) 操作節點的值

input.value

(6) 新建節點

var e = document.createElement(‘div‘)

parent.appendChild(e)

(7) 刪除節點

parent.removeChild(e)

(8) 替換節點

parent.replaceChild(newChild, oldChild)

(9) 克隆節點

var copy = e.cloneNode()

常用DOM操作方法的問題

(1)方法名比較長，會增加文件體積

(2)有些操作比較繁瑣，如刪除、替換

(3)存在瀏覽器兼容性問題

JS原生DOM操作總結