原生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)