dom啦4 Node增删改查

2020-10-28 12:25:14 浏览数 (1)

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		
	</style>
</head>
<body>

<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
<script type="text/javascript">
	//创建节点
	let qq=document.createElement("span");//创建span标签
	//console.log(qq);//输出span标签
	//console.log(typeof qq);//看span标签耳朵类型

	//添加节点
	let ww=document.querySelector("div");//创建div标签
	//console.log(ww.appendChild(qq));//把span标签放到div标签的最后面
	let ee=document.createElement("a");//创建a标签
	//console.log(ww.appendChild(ee));//把a标签放到div标签的最后面
	 


	//插入节点
	let aa=document.createElement("span");
	let ss=document.querySelector("div");
	let dd=document.querySelector("h1");
	let ff=document.querySelector("p");
	//console.log(ss.insertBefore(aa,dd));
	//在div中,把span插入到h1的前面
	//console.log(ss.insertBefore(aa,ff));
	//在div中把span插入到p的前面*/


	//删除节点
	 // 注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除
    //         元素是不能够自杀的
   // console.log(aa.parentNode);//获取span的父节点div.
   // console.log(aa.parentNode.removeChild(aa));//删除掉div的span
   // console.log(ss.parentNode.removeChild(ss));
   // //删除div,通过body来实现
    // 5.克隆节点
    let oDiv = document.querySelector("div");
   console.log(oDiv.cloneNode());
   let x=oDiv.cloneNode(true);
   console.log(x);
</script>
</body>
</html>
dom

0 人点赞