070|attribute和元素节点属性

最新推荐文章于 2021-05-08 14:53:37 发布

Asteroid 325

最新推荐文章于 2021-05-08 14:53:37 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/weixin_43846020/article/details/107802946

版权

JS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

attribute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>070attribute和元素节点属性</title>
		<script>
			/*
			  setAttribute 
			  getAttribute
			  removeAttribute()
			*/
		   window.onload=function(){
			   var oDiv=document.getElementById("div1");
			   
			   alert(oDiv.id);//div1
			   alert(oDiv.title);//hello 
		alert(oDiv.getAttribute("id"));//div1[用Attribute]
		alert(oDiv.getAttribute("title"));//hello[用Attribute]
		/*
		 Attribute跟直接获取的区别
		 1.class的访问
		 2.支持自定义属性
		 3.去除属性	   
		*/
	   //	 1.class的访问
			   alert(oDiv.className);// box[不用Attribute]
              alert(oDiv.getAttribute("class"));//box[用Attribute]
			  
				alert(oDiv.xxx);//undefined[自定义的获取不到][不用Attribute]
				alert(oDiv.getAttribute("xxx"));//yyy[用Attribute]
		//	 2.支持自定义属性	   
			   oDiv.zzz="ooo";
			   alert(oDiv.zzz);//ooo,但是标签里不会显示出来zzz[不用Attribute]
			   
			   oDiv.setAttribute("class","box5");//标签里会显示出来class="box5"[用Attribute]
			   oDiv.setAttribute("zzz","ooo");//标签里会显示出来zzz="ooo"[用Attribute]
		//3.去除属性	   
			   oDiv.className="";//只是把clas设为空字符窜代替[用Attribute]
			   oDiv.removeAttribute("title");//直接去掉title属性[不用Attribute]
			   
		   }
		</script>
	</head>
	<body>
		<div id="div1" title="hello" class="box" xxx="yyy">div</div>
	</body>
</html>

在这里插入图片描述

元素节点属性innerHTML,innerText

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素节点的属性</title>
		<script>
			/*
			 innerHTML:获取标签间的内容
			 innerText 获取标签间纯文本 不会解析标签，设置纯文本
			 
			*/
			window.onload=function(){
				var oDiv=document.getElementById("div1");
				alert(oDiv.innerHTML);//div文本<em>em文本</em><strong>strong文本</strong>
				//赋值
				oDiv.innerHTML="<h1>hello world</h1>";//变成h1号文字
				
				//innerText
				//alert(oDiv.innerText);//div文本em文本strong文本
				//oDiv.innerText="<h1>hello world</h1>";//<h1>hello world</h1>
				
				
			}
		</script>
	</head>
	<body>
		<div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素节点的属性</title>
		<script>
			/*
			 innerHTML:获取标签间的内容
			 innerText 获取标签间纯文本 不会解析标签，设置纯文本
			 
			*/
			window.onload=function(){
				var oDiv=document.getElementById("div1");
				//alert(oDiv.innerHTML);//div文本<em>em文本</em><strong>strong文本</strong>
				//赋值
				//oDiv.innerHTML="<h1>hello world</h1>";//变成h1号文字
				
				//innerText
				alert(oDiv.innerText);//div文本em文本strong文本
				oDiv.innerText="<h1>hello world</h1>";//<h1>hello world</h1>
				
				
			}
		</script>
	</head>
	<body>
		<div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>
	</body>
</html>