JS中的attribute和property的区别和联系

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

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对象中的属性；

JS中的attribute和property的区别和联系相关推荐

java中类图概念,程序员眼中的UML(4)--类图释疑之一，Attribute和Property之区别
程序员眼中的UML(4) --类图释疑之一,Attribute和Property之区别上一篇中提出了很多问题,其中最令人费解的可能就是Attribute和Property之区别了吧.我在网络上寻找良 ...
Attribute和Property的区别
Attribute和Property的区别 attribute是XML元素中的概念,用于描述XML标签的附加信息,即XML标签的属性,property是JavaScript对象中的概念,用于描述Jav ...
html offsetwidth 字符串宽度,基于js中style.width与offsetWidth的区别(详解)
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如时,用 style.wid ...
js中的target与currentTarget的区别转
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
node.js中exports与module.exports的区别分析
前言关于Node.js中的exports和module.exports,很多时候都比较容易让人混淆,弄不清楚两者间的区别.那么我们就从头开始理清这两者之间的关系. 来源在开发Node.js应用的时 ...
js中构造函数与普通函数的区别
构造函数不仅只出现在JavaScript中,它同样存在于很多主流的程序语言里,比如c++.Java.PHP等等.与这些主流程序语言一样,构造函数在js中的作业一样,也是用来创建对象时初始化对象,并且总 ...
js中关于length与size的区别
length与size的区别用了很长时间的length的一直没考虑过其与size的区别,今天同事问起,特意查找资料,将两者的相同点与共同点列出来. 相同点:在jQuery中用于返回元素的个数,siz ...
JS中的let和var的区别
ES6 新增了let命令,用来声明局部变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 在ES6之前,我们都是用var来声明变量,而且JS只有函 ...
php中的foreach和js中的foreach的用法和区别
PHP中的foreach循环: 主要用于遍历数组例如: (1)// $colors=array("red","yellow","blue" ...
js中(function(){}()),(function(){})(),$(function(){});之间的区别
1. (function(){}())与(function(){})() 这两种写法,都是一种立即执行函数的写法,即IIFE (Immediately Invoked Function Express ...

JS中的attribute和property的区别和联系

JS中的attribute和property的区别和联系相关推荐

最新文章

热门文章