[网页编程]-19 JavaScript Document节点对象的内容操作

prtyaa 2023-12-27 16:01:34  49476

分类专栏：资讯

注意点:

innerHTML innerText 只适合双标签

如果是要写成追加的信息,就需要写成这样div.innerText +="<a>测试内容识别

<a/>innerHTML;//会获得html中的内容,会识别html信息

var inn2 = div.innerText;//只会获得文本的信息,不会识别html信息

双标签使用:innerHTML innerText

单标签使用:value

innerHTML & innerText

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				border: 2px solid #DC143C;
			}
		</style>
		
		<script type="text/javascript">
			function demo1(){
				//根据id获取节点对象
				var div = document.getElementById("div1")
				//获取节点元素的文本内容
			 var inn =div.innerHTML;//会获得html中的内容,会识别html信息
			 
			 var inn2 = div.innerText;//只会获得文本的信息,不会识别html信息
			 
			 console.log(inn);
			 console.log(inn2);
			 
			 //如果是要写成追加的信息,就需要写成这样div.innerText +="<a>
			 div.innerHTML ="<a> 测试内容识别 <a/>"//会获得html中的内容,会识别html信息
			 div.innerText ="<a> 测试内容识别 <a/>"//只会获得文本的信息,不会识别html信息
			 
			 //innerHTML innerText 只适合双标签  
			 
			 
			}
		</script>
		
		
	</head>
	<body>
		<div id="div1">
			操作元素的内容
			
		</div>
		<hr>
		<input type="button" name="" id="" value="测试" onclick="demo1()" />
		
	</body>
</html>

特殊的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
		   
		   
		   /*
		    
		    * 注意：
		    * 
		    * 
		    * 特殊的标签：
		    * 
		    *   select、textarea
		    * 
		    * 
		    * */
		   
			
			
			
			function  demo2(){
				
				
				//获得select对象
				
				var  sel=document.getElementById("sele");
				
				
				alert(sel.value);
				
				
				
			}
			
			function  demo3(){
				
				var  te= document.getElementById("tex");
				
				alert(te.value);
			}
			
		</script>
		
		
		
	</head>
	<body >
		
		
		<!--特殊的操作-->
		<select id="sele" onchange="demo2()">
			<option value="0">--请选择--</option>
			<option value="1">中国</option>
			<option value="2">美国</option>
			
	</select> <br />
		
		
		<textarea rows="20" cols="20" id="tex">1223455</textarea>
		
		
		
		<input type="button" value="操作元素的文本内容" onclick="demo3()" />
		
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31531

赞同 0

评论 0 条

[网页编程]-19 JavaScript Document节点对象的内容操作

注意点:

innerHTML & innerText

特殊的标签

相关文章

关注我们