JS原生DOM操作总结

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)存在浏览器兼容性问题