JS中的attribute和property的区别和联系_js dom中,property和attribute的区别和联系-优快云博客

本文详细解析HTML中的属性（attribute）与JavaScript对象中的属性（property）之间的区别，通过实例展示如何在实际应用中操作这些属性，并强调属性在DOM元素上的同步与非同步特性。

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

查了好久，终于查到一个靠谱的了！

attribute和property到底是什么呢，有什么区别呢？这个或许很多人都没留意，或许认为是同一个东西。
要明确attribute和property是不同的东西就要先知道它们分别是什么，这个很难说得清，举些例子就明白了。
这里我们先以ff为标准，后面再说ie的区别。以div为例，查查网页制作完全手册，会找到它有以下属性：
ALIGN      align
CLASS      className
ID            id
TITLE       title
...            ...
其中第一列就是attribute，第二列就是property。

attribute是dom元素在文档中作为html标签拥有的属性；

property就是dom元素在js中作为对象拥有的属性。

所以：

对于html的标准属性来说，attribute和property是同步的，是会自动更新的，

但是对于自定义的属性来说，他们是不同步的，

先给出例子：

body>
  <ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>
<div id="t" tt="1">test</div>
<script>

var o = document.getElementById('t');
o["tt"]="2";
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);

o.setAttribute("tt","3");
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
</script>

测试结果：

test

1 2 3 2

这个是自定义的属性；可以看出来attribute和property是不一样的；

div id="t2" title="title">test2</div>
<script type="text/javascript">
	var o2=document.getElementById("t2");
	
	o2.setAttribute("title", "ninini");
	o2["title"]="nihao";
	document.writeln(o2.getAttribute("title"));
document.writeln(o2["title"]);

</script>

测试结果：

test2

nihao nihao

将赋值语句倒过来一下，可以发现，浏览器以后面赋值的为准；

<script type="text/javascript">
	var o2=document.getElementById("t2");
	o2["title"]="nihao";
	o2.setAttribute("title", "ninini");
	document.writeln(o2.getAttribute("title"));
document.writeln(o2["title"]);
</script>

测试结果：

test2

ninini ninini

PS：需要记住的是： attribute指的是html标签中的属性；

property指的是js对象中的属性；