1.查找
DOM1:getElementById(),getElementsByTagName()
DOM扩展:querySelector()(返回第一个匹配的元素),querySelectorAll()(返回全部匹配的元素)
HTML5:getElementsByClassName()
2.插入
appendChild():末尾插入
insertBefore():特定位置插入
3.替换
replaceChild():接受两个参数,第一个为要插入的节点,第二个为要替换的节点
4.删除
removeChild()
实例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dom节点操作</title> </head> <body> <ul id="list"><li>1</li><li>2</li><li>3</li></ul> <button id="add">插入</button> <button id="replace">替换</button> <button id="remove">删除</button> <script > var list=document.getElementById('list'); var add=document.querySelector('#add'); var replace=document.querySelector('#replace'); var remove=document.querySelector('#remove'); var li=document.createElement('li'); li.innerHTML='hello'; function addNode(){ //尾插 //list.appendChild(li) //任意位置插 list.insertBefore(li,list.childNodes[2]) } function replaceNode(){ //替换任意位置,要替换第一个或者最后一个只需将第二个参数改为list.firstChild / lastChild list.replaceChild(li,list.childNodes[1]) } function removeNode(){ //移除首/尾元素 //list.removeChild(list.firstChild) // list.removeChild(list.lastChild) //移除任意位置上的元素 list.removeChild(list.childNodes[1]) } add.addEventListener('click',addNode); replace.addEventListener('click',replaceNode); remove.addEventListener('click',removeNode); </script> </body> </html>
运行视图
来源:https://www.cnblogs.com/xingguozhiming/p/8647804.html