DOM 基本操作( 增 删 改 插 )
1.增(动态创建dom元素)
document.creatElement();
创建元素节点
document.creatElementTextNode();
创建文本节点
document.creatElementComment();
创建注释节点
document.creatElementDocumentFragment();
创建文档节点
2.删(剪贴操作)
parent.removeChiled();
删除parent父元素中的指定子元素
child.remove();
删除child元素
3.改
parent.replaceChild(new,origin);
新元素替换老元素
4.插
parentnode.appendChiled();
追加到当前元素的内容之后,只能传一个节点,且不直接支持传字符串
parentnode.append();
追加到当前元素的内容之后,可以同时传入多个节点或字符串,没有返回值;
parentnode.innsertBefor(a,b)
在父级元素element下的子元素a之前添加子元素b
5.下面这个代码详细理解上述DOM基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<p></p>
<span></span>
<h1></h1>
<div></div>
<i></i>
<a href="#"></a>
</div>
<script>
var strong = document.createElement('strong')
var p = document.createElement('p')
var span = document.createElement('span')
//创建元素节点
var div = document.getElementsByClassName('box')[0]
//通过DOM获取元素节点
var arr = []
//创建空数组用来接收div子元素节点
for (var i = 0; i < div.children.length; i++) {
arr[i] = div.children[i]
}
//用for循环把div的子元素节点存入数组arr
div.append(p)
div.appendChild(span)
//给父元素div后追加子元素p和span(先执行的在前面)
div.insertBefore(strong, arr[1])
//添加操作在父元素div中的第二个子元素节点之前添加strong元素
div.removeChild(arr[2])
//删除父元素div中的第三个子元素节点
arr[3].remove()
//删除第四个子元素节点
div.replaceChild(a, arr[0])
//让a元素与父级元素div中的第一个子元素节点替换
</script>
</body>
</html>