JS-DOM对象 替换节点与克隆节点

JS-DOM对象

替换节点
替换节点:
		父节点.replaceChild(节点1,节点2)
		节点1:是新节点
		节点2:老节点
		返回值被替换额节点
		如果新节点为父节点中已有节点,效果为老节点删除,被替换成为新节点
		 


	
		
		
	
	
		
  • 苹果
  • 香蕉
  • 橘子
  • 菠萝
克隆节点
节点.cloneNode(boolean) 克隆节点
				true   当前节点包含其字内容全部克隆
				false  只克隆当前节点,属性+属性值会克隆,id值也会相同需要修改
				html属性,css样式+js功能如果定义在标签上标签上的内容都会被克隆,但是js中的css中单独的语法,不会被克隆

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<ul id="src_ul">
		<li>redli>
		<li>yellowli>
		<li>blueli>
	ul>
	<button onclick="copy();">复制button>
	<hr />
	<div id="copy_div">div>

	<script type="text/javascript">
		function copy() {
      
			// 获取要复制的元素
			var src_ul = document.getElementById("src_ul");
			// 复制 true深度克隆,可以克隆结构和内容
			var copy_ul = src_ul.cloneNode(true);
			// 将复制好的内容添加到div中
			document.getElementById("copy_div").appendChild(copy_ul);
		}
	script>
	body>
html>

innerHTML与innerText的区别
innerHTML可以往标签中添加|读取html节点
innerText只能读取或添加文本内容

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div class="div1"><p>div1p>div>
		<div class="div2"><p>div2p>div>
		
		<script>
			/* 分别获取2个div标签对中的内容 */
			var div1=document.getElementsByClassName("div1")[0];
			var div2=document.getElementsByClassName("div2")[0];
			console.log(div1.innerHTML);
			console.log(div2.innerText);
			/* 设置2个div标签对中的内容 */   
			//覆盖
			 div1.innerHTML="哈哈我是div1";
			div2.innerText = "呵呵我是div2"; 
			
			//区别
			//innerHTML可以往标签中添加|读取html节点
			div1.innerHTML+="

我是标题div1

"
; //追加 += 在原内容基础上追加 //innerText只能读取或添加文本内容 div2.innerText+="

我是标题div2

"
;
script> body> html>

你可能感兴趣的:(学习总结)