js--Dom(三)内容节点操作+属性节点操作

最新推荐文章于 2023-04-07 19:02:27 发布

原创最新推荐文章于 2023-04-07 19:02:27 发布 · 744 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

47 篇文章

订阅专栏

本文深入探讨了DOM操作的各种方法，包括innerHTML和innerText的区别，以及如何通过属性相关方法来修改和获取元素属性，如getAttribute和setAttribute。文章通过实例展示了如何使用这些方法进行网页元素的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerHTML


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--innerHTML：设置或获取元素里的文本内容(包含html标记，解析css样式)-->
		    <p id="txt"></p>
    <div id="box"></div>
  <!--  <input type="button"  value="给p标签添加文本内容"/>-->
     <!--  下面的button标签等价于上面的普通按钮 -->
    <button id="txt-btn">给p标签添加文本内容</button>
    <script>
    	var btn1=document.getElementById('txt-btn');
    	btn1.onclick=function(){
    		 var p= document.getElementById('txt');
    		 //设置p元素里的文本内容
    	 p.innerHTML="<h2 style='color:red'>我是p里面的h2</h2>";
    	 //获取p元素里的文本内容
    	 var content=p.innerHTML;
    	   console.log(content);
    	}
    	
    </script>
	</body>
</html>

在这里插入图片描述

innerText


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--innerText：设置或获取元素里的文本内容(不包含html标记，不解析css样式)-->
		    <p id="txt"></p>
    <div id="box"></div>
  <!--  <input type="button"  value="给p标签添加文本内容"/>-->
     <!--  下面的button标签等价于上面的普通按钮 -->
    <button id="txt-btn">给p标签添加文本内容</button>
    <script>
    	var btn1=document.getElementById('txt-btn');
    	btn1.onclick=function(){
    		 var p= document.getElementById('txt');
    		 //设置p元素里的文本内容
    	 p.innerText="<h2 style='color:red'>我是p里面的h2</h2>";
    	 //获取p元素里的文本内容
    	 var content=p.innerText;
    	   console.log(content);
    	}
    	
    </script>
	</body>
</html>

在这里插入图片描述

把元素当成对象来操作属性节点


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 操作属性节点的方式1：把元素当成对象来操作它的属性,	
		两种写法，分别是元素.属性名或元素["属性名"]
		特殊： 如果要操作的属性名是class,那么要把class改成className-->
		  
		<img  id="pic" src="../img/adv_1.jpg" alt="无法显示图片">
		<p class="pt"  id="pp">我是一个段落</p>
		<input type="button" id="btn1" value="改变图片" />
			<input type="button" id="btn2" value="获取p元素的class属性" />
		<script>
			var btn1=document.getElementById('btn1');
			btn1.onclick=function(){
				 //设置img元素的src属性
				 document.getElementById('pic'). src="../img/tly.jpg";
				 //获取img元素的src属性
				var src=   document.getElementById('pic'). src;
				console.log(src);
			}
				var btn2=document.getElementById('btn2');
			btn2.onclick=function(){
				//获取元素的class属性
			var pclass=document.getElementById('pp').className;
			console.log(pclass);
			}
		</script>
	</body>
</html>

在这里插入图片描述

通过元素的属性相关方法来操作属性节点


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 操作属性节点的方式2：通过元素的属性相关的方法来操作属性节点
			方法1：getAttribute(属性名):获取一个属性的值，参数是属性名
			方法2：setAttribute(属性名，属性的值)：设置一个属性的值
			方法3：removeAttribute(属性名)：移除某个属性
		-->
		  
		<img  id="pic" src="../img/adv_1.jpg" alt="无法显示图片">
		<p class="pt"  id="pp">我是一个段落</p>
		<input type="button" id="btn1" value="获取图片的src属性" />
			<input type="button" id="btn2" value="设置图片的src属性" />
				<input type="button" id="btn3" value="移除图片的src属性" />
		<script>
			var btn1=document.getElementById('btn1');
			btn1.onclick=function(){
				
				 //获取img元素的src属性
				var src=   document.getElementById('pic'). getAttribute("src");
				console.log(src);
			}
				var btn2=document.getElementById('btn2');
			btn2.onclick=function(){
				 //设置img元素的src属性
		     var img=document.getElementById('pic');
		     img.setAttribute("src","../img/tly.jpg");
			}
				var btn2=document.getElementById('btn3');
			btn3.onclick=function(){
				 //移除img元素的src属性
		     var img=document.getElementById('pic')
		      img.removeAttribute("src");
			}
		</script>
	</body>
</html>

在这里插入图片描述