Javascript中的attribute和property分析

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‘) // test2box.attribute[0].value // boxbox.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源代码吧。

参考:

  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分析

时间: 2024-10-26 21:42:32

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

javascript中遇到Cannot read property &#39;split&#39; of undefined问题

function NewDate(dateTime) { var fulldate = dateTime.split('-'); var day = fulldate[2].split(" "); var time = day[1].split(":"); var date = new Date(); date.setFullYear(fulldate[0]); date.setMonth(fulldate[1] - 1); date.setDate(day[0])

HTML中的attribute和property

一.概述 attribute和property是常常被弄混的两个概念. 简单来说,property则是JS代码里访问的: document.getElementByTagName('my-element').prop1 = 'hello'; attribute类似这种: <my-element attr1="cool" /> JS代码里访问attribute的方式是getAttribute和setAttribute: document.getElementByTagName

在Javascript 中创建JSON对象--例程分析

作者:iamlaosong 要想用程序从网页上抓数据,需要熟悉HTML和JavaScript语言,这里有一个在Javascript 中创建JSON对象的例程,学习并掌握其内容,在此对此例程做个注释,记录我掌握的知识,以备将来验证是否正确. 程序很简单,分三部分: 1.<h2>部分:用大字符显示标题: 2.<p>部分:显示一段信息的结构,但无内容,内容在后面添加: 3.<scrip>部分:Javascript程序,先定义了一个JSON结构的变量JSONObject,然后,

attribute和property兼容性分析

上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析(attributes模块),首先,贴出测试的HTML代码: <input id="username" type="text" value="lonelyclick"> <button value="abc" i

JavaScript 中 Property 和 Attribute 的区别详解

property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property是DOM中的属性,是JavaScript里的对象: attribute是HTML标签上的特性,它的值只能够是字符串: 基于JavaScript分析property 和 attribute html中有这样一段代码: <input id="in_1" value="1&quo

JavaScript中的property和attribute的区别

时间: 2013-09-06 | 10:24 作者: 玉面小飞鱼 分类: DOM, js相关, 前端技术 2,222 次浏览 1. 定义 Property:属性,所有的HTML元素都由HTMLElement类型表示,HTMLElement类型直接继承自Element并添加了一些属性,添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className.DOM节点是一个对象,因此,他可以和其他的JavaScript对象一样添加自定义的属性以及方

javascript中attribute和property的区别详解

DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为"特性",property翻译成中文术语为"属性",从中文的字面意思来看,确实是有点区别了,先来说说attribute. attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数

JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法

今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时都是正常的,但是在"08","09"就会返回0 (这种现象出现在ie内核的浏览器中,如360浏览器就会出现这种错误)(谷歌,火狐不受影响). 查阅资料得知着这种现象原因: 大神的解释: 01--07自然没有问题,但是09,08都是不合格的八进制形式,所以被按照0处理了.

有关attribute和property,以及各自对select中option的影响

这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性.   attribute property 设置方法 option.setAttribute('selected', true) option.getAttribute('selected') option.selected = true dom节点表现 会表现在html节点上.打开控制台,可以看到 <option selected=true></option> 不会表现在html中.打开控制台,孤零零的 :