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>
运行视图
