首页 > 代码库 > JS原生DOM操作总结
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)存在浏览器兼容性问题
JS原生DOM操作总结