attribute和property的区别 (转载)

DOM元素的attribute和property很容易混倄在一起，分不清楚，两者是不同的东西，但是两者又联系紧密。很多新手朋友，也包括以前的我，经常会搞不清楚。

attribute翻译成中文术语为“特性”，property翻译成中文术语为“属性”，从中文的字面意思来看，确实是有点区别了，先来说说attribute。

attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，attributes是一个类数组的容器，说得准确点就是NameNodeMap，总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

<div class="box" id="box" gameid="880">hello</div>

上面的div元素的HTML代码中有class、id还有自定义的gameid，这些特性都存放在attributes中，类似下面的形式：

[ class="box", id="testBox", gameid="880" ]

可以这样来访问attribute节点：

var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box

但是IE6-7将很多东西都存放在attributes中，上面的访问方法和标准浏览器的返回结果又不同。通常要获取一个attribute节点直接用getAttribute方法：

console.log( elem.getAttribute('gameid'); // 880

要设置一个attribute节点使用setAttribute方法，要删除就用removeAttribute：

elem.setAttribute('testAttr', 'testVal');
console.log( elem.removeAttribute('gameid') ); // undefined

attributes是会随着添加或删除attribute节点动态更新的。

property就是一个属性，如果把DOM元素看成是一个普通的Object对象，那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。要添加和删除property也简单多了，和普通的对象没啥分别：

elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
delete elem.gameid // 删除

之所以attribute和property容易混倄在一起的原因是，很多attribute节点还有一个相对应的property属性，比如上面的div元素的id和class既是attribute，也有对应的property，不管使用哪种方法都可以访问和修改。

console.log( elem.getAttribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello

但是对于自定义的attribute节点，或者自定义property，两者就没有关系了。

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // null

对于IE6-7来说，没有区分attribute和property：

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

很多新手朋友估计都很容易掉进这个坑中。

DOM元素一些默认常见的attribute节点都有与之对应的property属性，比较特殊的是一些值为Boolean类型的property，如一些表单元素：

<input type="radio" checked="checked" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // checked
console.log( radio.checked ); // true

对于这些特殊的attribute节点，只有存在该节点，对应的property的值就为true，如：

<input type="radio" checked="anything" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // anything
console.log( radio.checked ); // true

最后为了更好的区分attribute和property，基本可以总结为attribute节点都是在HTML代码中可见的，而property只是一个普通的名值对属性。

// gameid和id都是attribute节点
// id同时又可以通过property来访问和修改
<div gameid="880" id="box">hello</div>
// areaid仅仅是property
elem.areaid = 900;

转载于:https://www.cnblogs.com/joey-home/archive/2012/09/05/2672137.html

attribute和property的区别 (转载)相关推荐

java中类图概念,程序员眼中的UML(4)--类图释疑之一，Attribute和Property之区别
程序员眼中的UML(4) --类图释疑之一,Attribute和Property之区别上一篇中提出了很多问题,其中最令人费解的可能就是Attribute和Property之区别了吧.我在网络上寻找良 ...
Attribute和Property的区别
Attribute和Property的区别 attribute是XML元素中的概念,用于描述XML标签的附加信息,即XML标签的属性,property是JavaScript对象中的概念,用于描述Jav ...
属于attribute还是property。
在获取比较值的时候会用in来判断是否可以用[x]方式,其实是判断该属性是属于attribute还是property. 那attribute和property到底是什么呢,有什么区别呢?这个或许很多人都 ...
对于DOM的attribute和property的一些思考
2019独角兽企业重金招聘Python工程师标准>>> 前段时间,观看了WTP的一篇文章"DOM的attribute和property",觉得写的很好,感谢WTP ...
Attribute 和 Parameter 的区别
(1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为链接关系时,被链接的组件通过getParameter ...
.NET 的 WCF 和 WebService 有什么区别?(转载)
.NET 的 WCF 和 WebService 有什么区别?(转载) [0]问题: WCF与 Web Service的区别是什么? 和ASP.NET Web Service有什么关系? WCF与ASP ...
JavaScript DOM 4 - 属性 attribute vs property
1: 获取网页元素的属性值 HTML里面的标签,都有一些属性(attribute),比方: <img src="http://www.abc.com/logo.png" cl ...
postfix中recipient/client/sender/helo四者的区别转载
postfix在main.cf中用下面四个做限制,那么这四者到底有什么区别? smtpd_recipient_restrictions smtpd_client_restrictions smtpd_ ...
简述Field,Attribute,Property的区别
您要是关注我这个,说明您是行内人,那我就开门见山了,用代码来诠释吧 //Field protected string _Version; //Attribute [XmlElement("V ...
[原]简述Field,Attribute,Property的区别
您要是关注我这个,说明您是行内人,那我就开门见山了,用代码来诠释吧 //Field protected string _Version; //Attribute [XmlElement("V ...

attribute和property的区别 (转载)

attribute和property的区别 (转载)相关推荐

最新文章

热门文章