操作DOM树及常用方法

最新推荐文章于 2022-11-13 09:04:33 发布

qq_36594703

最新推荐文章于 2022-11-13 09:04:33 发布

阅读量369

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36594703/article/details/77019514

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

操作dom树：

appendChild方法：1.添加节点到末尾，2.类似于剪切粘贴的效果

<body>
  <div id="div1">
  <ul id="ulid11">
	<li>aaaa</li>
	<li>bbbb</li>
	<li>cccc</li>
	</ul>
  </div>
  <div id="div2">
   
  </div>
  <input type="button" value="add1" οnclick="add11();"/>
  <script type="text/javascript">
	function add11(){
		var div2=document.getElementById("div2");
		var ulll=document.getElementById("ulid11");
		div2.appendChild(ul11);
	}
	</script>
	</body>

insertBefore()：在摸个节点之前插入一个新的节点，两个参数，第一个要插入的节点，第二个参数在谁之前插入

插入一个节点，节点不存在，创建，创建标签，创建文本，把文本添加到标签上

<body>
  <ul id="ulid21">
	<li id="li11">1111</li>
	<li id="li12">2222</li>
	<li id="li13">3333</li>
  </ul>
	<input type="button" value="insert" οnclick="insert1();"/>
  <script type="text/javascript">
	function insert1(){
	//获取到li13标签，创建li，创建文本，把文本添加到li下面，获取到，吧li添加到ul下面
	var li13=document.getElementById("li13");
	var li14=document.createElement("li");
	var text14=document.createTextNode("5555");
	li14.appendChild(text14);
	//获取到ul
	var ul21=document.getElementById("ulid21");
	ul21.insertBefore(li14,li13);
	}
	</script>
	</body>

removeChild()：删除节点，通过他的父节点删掉，在父节点上执行

<body>
   <ul id="ulid31">
	<li id="li21">1111</li>
	<li id="li22">2222</li>
	<li id="li23">3333</li>
	<li id="li24">4444</li>
   </ul>
   <input type="button" value="remove" οnclick="remove1();"/>
  <script type="text/javascript">
	function remove1(){
		//获取到li24标签，获取父节点Ul标签，通过父节点删除
		var li24=document.getElementById("li24");
		//获取父节点两种方式，通过id，通过parentNode获取
		var ulid31=document.getElementById("ulid31");
		ulid31.removeChild(li24);
	}
	</script>
	</body>

replaceChild()：两个参数，第一个新节点，第二个参数是要被替换的节点，不能自己替换自己，要通过父节点完成替换

<body>
   <ul id="ulid41">
	<li id="li31">1111</li>
	<li id="li32">2222</li>
	<li id="li33">3333</li>
	<li id="li34">4444</li>
   </ul>
   <input type="button" value="replace" οnclick="replace1();"/>
  <script type="text/javascript">
	function replace1(){
		//获取到Li，创建标签li，创建文本，把文本添加到li下面，获取ul标签，替换操作
		var li34=document.getElementById("li34");
		var li35=document.createElement("li");
		var text35=document.createTextNode("5555")
		li35.appendChild(text35);
		var ul41=document.getElementById("ulid41");
		ul41.replaceChild(li35,li34);
	}
	</script>
	</body>

cloneNode(boolean)：复制节点

<body>
   <ul id="ulid41">
	<li id="li31">1111</li>
	<li id="li32">2222</li>
	<li id="li33">3333</li>
	<li id="li34">4444</li>
   </ul>
   <div id="divv">
   </div>
   <input type="button" value="copy" οnclick="copy1();"/>
  <script type="text/javascript">
	function copy1(){
	//获取到Ul,执行复制方法cloneNode(true),把复制之后的内容放到div
	//获取到div,appendChild()方法可以放进去
	var ul41=document.getElementById("ulid41");
	var ulcopy=ul41.cloneNode(true);//复制ul放到类似于剪切板
	var divv=document.getElementById("divv");
	divv.appendChild(ulcopy);//放副本
	}
	</script>
	</body>

总结：

获去节点方法：getElementById(),getElementByName(),getElementByTagName()

插入节点方法：insertBefore()在摸个节点之前插入，appendChild()：在末尾添加，剪切粘贴

删除节点方法：通过父节点删除removeChild()

替换节点方法：通过父节点操作replaceChild();

qq_36594703

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作DOM树及常用方法

操作dom树：appendChild方法：1.添加节点到末尾，2.类似于剪切粘贴的效果 aaaa bbbb cccc function add11(){ var div2=document.getElementById("div2"); var ulll=document.getElementById("ulid11")
复制链接

扫一扫

专栏目录