attribute属性property属性

78 阅读 0 评论 52 点赞

我是靠谱客的博主怡然豌豆，最近开发中收集的这篇文章主要介绍attribute属性property属性，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		1.什么是attribute,什么是property属性？
		attribute:
		   html自定义属性  html预定义属性
		property:
		   js原生对象的直接属性
		   每一个预定义的attribute都会有一个property与之对应
		
		
		2什么是布尔值属性，什么是非布尔值属性？同步关系
		布尔值属性:你的property是布尔值类型   checked就是布尔值属性  
		   改变property不会同步attribute
		   在没有动过property时，
		       attribute会同步property
		       一旦动过就不会同步
		非布尔值属性:你的property是非布尔值类型  name就是非布尔值属性 在非布尔值属性里面,property和attribute会实时同步
		
		4用户操作的是property
		浏览器认谁？浏览器认property
		
		-->
	</head>
	<body>
		<input type="checkbox" checked="checked" name="lyp"  />  <!--checked既是input标签的attribute(对于html),又是input节点的property(对于js)-->
	     <script type="text/javascript">
			 
	     	var l= document.querySelector("input[type=checkbox]")
			//布尔值属性:你的property是布尔值类型   checked就是布尔值属性  改变property不会同步attribute
			debugger
			l.setAttribute("checked","checked1") //操作标签的attribute
			l.setAttribute("checked","checked2")
			
			l.checked = true
			l.checked = "checked3"  //操作节点的property
			l.checked = "checked4"
			
			
			
			debugger
			//非布尔值属性:你的property是非布尔值类型  name就是非布尔值属性 在非布尔值属性里面,property和attribute会实时同步
			l.setAttribute("name",'lalala')
			
			l.name = "heheh"
			
			//浏览器只认property
			
	     </script>
	</body>
</html>