脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → attribute和property的区别

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;

您可能感兴趣的文章:

相关文章

  • THREE.JS入门教程(1)THREE.JS使用前了解

    THREE.JS入门教程(1)THREE.JS使用前了解

    Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D,本文介绍下THREE.JS基础/浏览器支持/设置场景/构建网格表面/材质/光/渲染循环/通用的对象属性等等，感兴趣的朋友可以了解下哦
    2013-01-01
  • 可以关闭计算机的js脚本

    可以关闭计算机的js脚本

    可以关闭计算机的js脚本...
    2007-02-02
  • 讲解JavaScript中for...in语句的使用方法

    讲解JavaScript中for...in语句的使用方法

    这篇文章主要介绍了讲解JavaScript中for...in语句的使用方法,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 轻松学习JavaScript函数中的 Rest 参数

    轻松学习JavaScript函数中的 Rest 参数

    ES6 引入 rest 参数用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。下面我们来详细了解一下吧
    2019-05-05
  • AngularJS 指令详细介绍

    AngularJS 指令详细介绍

    本文主要介绍AngularJS 指令,这里详细介绍AngularJS 指令知识并提供实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • 有关javascript的性能优化 (repaint和reflow)

    有关javascript的性能优化 (repaint和reflow)

    本篇文章，小编将为大家介绍，有关javascript的性能优化(repaint和reflow)，有需要的朋友可以参考一下
    2013-04-04
  • JavaScript DOM 学习第二章 编辑文本

    JavaScript DOM 学习第二章 编辑文本

    在这一章我会给出一个在CMS里非常有用的更新页面的代码。在任一段落点击鼠标你就可以修改了。完成以后点击按钮，修改的文本就显示了。
    2010-02-02
  • JavaScript中的getDay()方法使用详解

    JavaScript中的getDay()方法使用详解

    这篇文章主要介绍了JavaScript中的getDay()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • js正则相关知识点专题

    js正则相关知识点专题

    本篇内容是小编整理的关于脚本之家精选的JS正则的优秀文章，适合大家学习JS正则的相关内容，有需要的朋友参考下。
    2018-05-05
  • javascript类型系统——日期Date对象全面了解

    javascript类型系统——日期Date对象全面了解

    下面小编就为大家带来一篇javascript类型系统——日期Date对象全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论