javascript代码实例教程-Javascript中的attribute和property分析

发布时间:2019-01-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Javascript中的attribute和property分析脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 attribute和PRoPErty这两个单词,都有属性的意思,attribute有属性、特质的意思,property则有性质,性能的意思。

 

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

 

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

 

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

每个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容易混x在一起的原因是,很多attribute节点还有一个相对应的property属性,比如上面的p元素的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 p = document.createElement('p');

p.setAttribute('classname', 't');

console.LOG(p.className !== 't'); // IE6/7 打印出false chrome打印出false

jquery这里先用setAttribute来设置className为t,然后用p.className来取值,按照规范,这里是取不到的,所以在IE8+浏览器,这里返回false,但是IE6/7对attribute和property不进行区分,所以导致p.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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Javascript中的attribute和property分析全部内容,希望文章能够帮你解决javascript代码实例教程-Javascript中的attribute和property分析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。