attribute和property这两个单词,都有属性的意思,attribute有属性、特质的意思,property则有性质,性能的意思。

首先需要明确的是,在规范中,读取和设置attribute的方法是getAttribute/setAttribute/removeAttribute,比如box.setAttribute('somekey','somevalue')

而想要访问元素的property,则需要用.(点)的方法,比如,box.somekey,下面先说attribute:

<div id="box" test1="test2" game1="gamesomeabc">box content</div>

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

var box = document.getElementById('box');
box.getAttribute('test1') // test2
box.attribute[0].value // box
box.attribute[3].value // ttt

并且,attribute是动态变化的,如下图:

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

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

box.getAttribute('id') // box
box.id // box
box.newkey // undefined box.getAttribute('newkey') //newvalue

所以说:规范中,浏览器会默认的将一些attribute与property共用,比如id,class,style等,我们可以通过getAttribute()或者点的方式进行获取,而如果setAttribute的属性是浏览器中不共用的,我们就只能通过getAttribute进行获取。

但是注意:这里是指规范,而IE6、IE7是不规范的。而这里就是个大坑。

box.setAttribute('test1','abc');
alert(box.test1); //IE6/IE7 弹出abc IE8+弹出undefined

虽然说,有些属性(id,class,title)是attribute和property共用的,但是他们也会出现不一致的情况。

<input type="radio" checked="checked" id="someRadio">

var someRadio = document.getElementById('someRadio');
alert(someRadio.checked + '--' + someRadio.getAttribute('checked')); //IE6/7 弹出 true--true IE8+ true--checked

由此可见,attribute很显然,就访问的元素的HTML标签下的值,而property访问的是DOM元素引用(相当于一个对象)的值。

而IE6/7是不去分attribute和property的,这就给兼容的时候带来了很大的问题,我们来看看jQuery对于attribute的兼容方式(大概思路):

var div = document.createElement('div');
div.setAttribute('className', 't');
console.log(div.className !== 't'); // IE6/7 打印出false chrome打印出false

jQuery这里先用setAttribute来设置className为t,然后用div.className来取值,按照规范,这里是取不到的,所以在IE8+浏览器,这里返回false,但是IE6/7对attribute和property不进行区分,所以导致div.className也为t,返回true,这段代码在support模块中,用处是判断setAttribute和getAttribute是否安全(是否可用)。

如果不安全,在设置attribute是就要用到别的方法:这里用到了getAttributeNode和setAttribute方法,虽然还是无法将attribute和property分开,但是解决了大部分IE67的问题。

    function setIE67Attribute(box, key, value) {
var attributeNode = document.createAttribute(key);
box.setAttributeNode(attributeNode);
attributeNode.value = value;
} function getIE67Attribute(box, key) {
return box.getAttributeNode(key).value;
} setIE67Attribute(box, 'customkey', 'customvalue');
alert(getIE67Attribute(box,'customkey')); //customvalue
alert(box.customkey);//customvalue
box.abc = 'def';
alert(getIE67Attribute(box,'abc'));//abc
alert(box.getAttribute('abc'));//abc

到这里,attribute这个东西的兼容性还有很多,坑多的是,详情移步jQuery源代码吧。请看这里:jQuery.attributes源码分析(attr/prop/val/class)

关于attribute和property的兼容性:attribute和property兼容性分析

参考:

  http://www.jb51.net/article/50686.htm

  http://www.liyao.name/2013/09/differences-between-property-and-attribute-in-javascript.html

  http://www.cnblogs.com/rubylouvre/archive/2010/03/07/1680403.html

  http://ju.outofmemory.cn/entry/36093

  http://www.cnblogs.com/aaronjs/p/3387906.html

  http://www.jb51.net/article/29263.htm

  http://www.cnblogs.com/wangfupeng1988/p/3631853.html

  http://www.cnblogs.com/wangfupeng1988/p/3639330.html

  http://www.cnblogs.com/wangfupeng1988/p/3626300.html

Javascript中的attribute和property分析的更多相关文章

  1. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. HTML中的attribute和property

    一.概述 attribute和property是常常被弄混的两个概念. 简单来说,property则是JS代码里访问的: document.getElementByTagName('my-elemen ...

  3. javaScript中with函数用法实例分析

    javaScript 中的 with 函数 ,即所谓的with 语句,可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性,要给对象创建新的属性,必须明确地引用该对象. with 函 ...

  4. attribute和property兼容性分析

    上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析 ...

  5. JavaScript 中 Property 和 Attribute 的区别详解

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  6. JavaScript中的property和attribute

    property,attribute都作“属性”解,但是attribute更强调区别于其他事物的特质/特性. 而在JavaScript中,property和attribute更是有明显的区别.众所周知 ...

  7. javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  8. JavaScript特性(attribute)、属性(property)和样式(style)

    最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...

  9. JavaScript的attribute和property辨析

    1.Attribute Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置. <input type='text' id='txt' ...

随机推荐

  1. 常见Web Service 使用网址

    下面的网址是常用Web Service http://www.webxml.com.cn/zh_cn/web_services.aspx 里面的很多Web Service接口...可以用到的,很有用!

  2. 《think in python》学习-9

    think in python think in python -9 案例分析:文字游戏 从文本文件中读取文字 作者提供了一个文本文件words.txt 地址 本章后面案例也会用带该文件中的词组 fi ...

  3. Android环境开发搭建

    今天第一次接触安卓,从开发环境的配置到程序的运行,足足搞了一天,也没有整出来. 1.安装JDK 在JDK官网上下载了最新的JDK,安装成功后进行环境的配置.JAVA_HOME:C:\Program F ...

  4. JavaScript input type=file 获取文件大小及类型限制

    <input name="txtName" type="file" id="pic" onchange="loadImage ...

  5. MRP工作台任务下达之x组织屏蔽全部发放功能

    应用 Oracle   Manufacturing Planning 层 Level Function 函数名 Funcgtion Name MRPFPPWB-390 表单名 Form Name MR ...

  6. Flink Program Guide (6) -- 窗口 (DataStream API编程指导 -- For Java)

    窗口(Window) 本文翻译自文档Windows ----------------------------------- Flink使用窗口的概念,根据element的时间戳或者其他指标,将可能无限 ...

  7. 在非MVC环境下使用 Razor引擎

    Razor引擎下载地址: http://github.com/Antaris/RazorEngine 解析Model: string template = "Hello @Model.Nam ...

  8. Linux PCI网卡驱动的详细分析

    学习应该是一个先把问题简单化,在把问题复杂化的过程.一开始就着手处理复杂的问题,难免让人有心惊胆颤,捉襟见肘的感觉.读Linux网卡驱动也是一 样.那长长的源码夹杂着那些我们陌生的变量和符号,望而生畏 ...

  9. ubuntu下C编程,编译基础( 转)

    buntu下C编程,编译基础     C 编程中相关文件后缀 .a 静态库 (archive) .c C源代码(需要编译预处理) .h C源代码头文件 .i C源代码(不需编译预处理) .o 对象文件 ...

  10. 移动网络山寨版(OpenBTS)的意义或者无意义 【1】

    在美国内华达州北部,靠近加州的峡谷中,有一片平坦的沙漠,名叫黑岩沙漠(Black Rock Desert).自从1986年以来,每年夏天,在这片沙漠中,都会举办一个为期八天的狂欢节.这个狂欢节的名字叫 ...