javascript中attribute和property的区别详解

 更新时间:2014年06月05日 11:48:47   作者:  
这篇文章主要介绍了javascript中attribute和property的区别详解,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="box", 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;

相关文章

  • javascript学习笔记(五)原型和原型链详解

    javascript学习笔记(五)原型和原型链详解

    许多人对JavaScript的原型及原型链仍感到困惑,网上的文章又大多长篇大论,令读者不明觉厉。我将用最简洁明了的文字介绍JavaScript的原型及原型链。
    2014-10-10
  • 深入理解JavaScript系列(41):设计模式之模板方法详解

    深入理解JavaScript系列(41):设计模式之模板方法详解

    这篇文章主要介绍了深入理解JavaScript系列(41):设计模式之模板方法详解,模板方法(TemplateMethod)定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤,需要的朋友可以参考下
    2015-03-03
  • 详解JS预解析原理

    详解JS预解析原理

    这篇文章主要介绍了JS预解析原理的相关知识,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-06-06
  • JavaScript中String.match()方法的使用详解

    JavaScript中String.match()方法的使用详解

    这篇文章主要介绍了JavaScript中String.match()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • javascript的函数

    javascript的函数

    javascript的函数...
    2007-01-01
  • Javascript模块化编程详解

    Javascript模块化编程详解

    在这篇文章中,我将会回顾一下js模块化编程的基础,并且将会讲到一些真的非常值得一提的进阶话题,包括一个我认为是我自创的模式。
    2014-12-12
  • 如何用JavaScript定义一个类

    如何用JavaScript定义一个类

    其实Javascript中没有类这个定义,但是有类这个概念。很多人都写过这样的代码,就是一个关键字 function,然后定义一个方法名,方法名后紧跟一对括号。如果你在项目中写过这样的代码,那么祝贺你,你可以不费任何吹毛之力,就能一口气读完这篇文章了。
    2014-09-09
  • js图片预加载示例

    js图片预加载示例

    这篇文章主要介绍了js图片预加载示例,需要的朋友可以参考下
    2014-04-04
  • 关于jQuery参考实例2.0 用jQuery选择元素

    关于jQuery参考实例2.0 用jQuery选择元素

    本篇文章小编为大家介绍,关于jQuery参考实例2.0 用jQuery选择元素,有需要的朋友可以参考一下。
    2013-04-04
  • JavaScript对象、属性、事件手册集合方便查询

    JavaScript对象、属性、事件手册集合方便查询

    JavaScript对象、属性、事件手册查询,对于学习js的朋友方便查找。
    2010-07-07

最新评论