JS原生DOM操作总结

Posted 2020-09-29

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