您现在的位置是:首页 > web开发 > JS原生DOM操作总结

JS原生DOM操作总结

web开发作者:dayu日期:4天前点击:2

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操作总结

原文地址:http://www.cnblogs.com/gaoxinwu/p/7224604.html


下一篇       上一篇