原生JS操作DOM节点代码

转载自:https://www.cnblogs.com/daysme/p/6538588.html

DOM节点操作函数总结

  • .parentNode 获取父级元素
  • 移除元素
function remove(el){
    var toRemove = document.querySelector(el)
    toRemove.parentNode.removeChild(toRemove)
}
  • 获取父级元素
document.querySelector().parentNode
  • 获取上一个/下一个元素
document.querySelector().previousElementSibling
document.querySelector().nextElementSibling
  • 清空子元素
let element = document.getElementById('elementID')
while(element.firstChild)element.removeChild(element.firstChild)
  • 检查是否有子元素
if(document.getElementById("elementID").hashChildNodes()){
}
  • DOM加载完成
document.addEventListener("DOMContentLoaded",function(){
    
})
  • 头部追加元素
let parent = document.querySelector('.el')
parent.insertBefore(insertNode,parent.childNodes[0])
  • 尾部追加元素
document.querySelector('.el').appendChlid(document.createElement('div'))
  • 克隆元素
let clonedEl = document.querySelector('.el').cloneNode(true)
原生JS操作DOM节点代码原生JS操作DOM节点代码 宇智波间桐鸣人 发布了48 篇原创文章 · 获赞 6 · 访问量 1万+ 私信 关注
上一篇:自定义属性和充满屏幕


下一篇:原生js学习 选择dom