JS魔法堂:属性、特性,傻傻分不清楚

时间:2023-12-20 22:55:02

一、前言                                

或许你和我一样都曾经被下面的代码所困扰

var el = document.getElementById('dummy');
el.hello = "test";
console.log(el.getAttribute('hello')); // IE67下输出test,其他浏览器输出null

“搞毛啊?”,苦逼的Jser对着浏览器大呼一声。然后就用下面蹩脚的方式草草处理掉了。

function getAttr(el, prop){
return el[prop] || el.getAttribute(prop);
} // 相应的赋值函数
function setAttr(el, prop, val){
  el[prop] = val;
}
// 相应的清理函数
function removeAttr(el, prop){
  delete el[prop];
}

虽然算是搞定了,但那到底什么是属性(Property)?什么是特性(Attribute)?还是傻傻分不清楚。有幸拜读了司徒正美的书,终于明白两者的区别,下面的内容为书中内容和项目中踩坑得来,实属不易啊!

二、从语义理解Property和Attribute                  

Property和Attribute均为外来词,首先我们看看它们的翻译究竟是什么先吧!

Property:属性、所有权,强调主题对象的特征

Attribute:属性、特性,强调主题对象的有别其他对象的特征

从上述语义推断,Attribute应该是Property的子集。

但不幸的是,浏览器并不这样理解,即使符合W3C标准规范也不是这样。

三、W3C规定Property和Attribute含义                  

看看图更健康

JS魔法堂:属性、特性,傻傻分不清楚

可以看到元素的“属性”被分为三块

  1. standard attribute:标准属性(或固有属性),如id、name等DTD/Scheme中定义的标签属性。

    特点:通过点方式或getAttribute均可访问、设置。

  2. custom property:自定义属性,通过点方式访问、设置的非DTD/Scheme中定义的标签属性。

    特点:仅仅能通过点方式操作属性。

  3. custom attribute:自定义特性(显式特性),直接写在标签中或通过getAttribute等APIs访问、设置的非DTD/Scheme中定义的标签属性

    特点:①. 可通过在html标签中显式声明,如<div customAttr="attrValue"></div>

       ②. 通过getAttribute等APIs操作属性。

而从IE8开始各大浏览器在这方面就遵守W3C标准了,所以就出现前言下代码片段的兼容性问题了。

四、custom attribute的类型——[object Attr]                  

 我想大家了解一下[object Attr]类型对理解后续内容会有帮助,于是就在这里打个岔了。

custom attribute类型的属性对象类型就是[object Attr]。

 浏览器支持:IE8+(IE567以[object Object]类型的形式提供与[object Attr]类型相同的APIs)、FF、Chrome

特点

  ①. 虽然Attr被视为节点,但却不作为DOM树的一部分,因此没有父节点,也不属于所在html节点的子节点;

  ②. Attr节点的值为字符串(IE567除外),因此通过setAttribute等赋予非字符串类型的值时,会进行隐式类型转换。

 属性值

属性名 值或功能说明
nodeType 2
nodeName 属性名
nodeValue {Text} 属性值
parentNode null
childNodes IE8返回null;IE9+和Chrome就返回以属性值(属性值类型为[object Text])为元素的NodeList对象;FF30.0就返回空的NodeList。
name   和nodeName一致
value 和nodeValue一致
textContent 设置或返回属性的文本内容
specified 用于判断属性值是否为自定义值,true表示是在文档中自定义设置的;false表示是DTD/Scheme设置的默认值。

 创建:document.createAttribute({String} 属性名)

   直接操作

HTMLElement对象.setAttributeNode({Attr} attr);
HTMLElement对象.getAttributeNode({String} 属性名);
HTMLElement对象.removeAttributeNode({Attr} attr); // 返回被删除的Attr节点

 注意:HTMLElement对象.removeAttributeNode({Attr} attr),当HTMLElement对象没有attr属性时,调用该方法会抛异常(NotFoundError: Failed to execute 'removeAttributeNode' on 'Element': The node provided is owned by another element.)

  间接操作

HTMLElement对象.setAttribute({String} 属性名, {Any} 属性值);
HTMLElement对象.getAttribute({String} 属性名);
HTMLElement对象.removeAttribute({String} 属性名);
HTMLElement对象.hasAttribute({String} 属性名); // IE8+才有方法,用于判断元素是否拥有该特性

 注意:HTMLElement对象.removeAttribute({String} 属性名),当HTMLElement对象没有指定属性名的属性时,采用静默模式处理(就是删除成功一样返回undefined)

五、点方式——custom property的专属操作方式              

var el = document.getElementById('dummy');
el.id; // 点方式
el['hello'] = 'test'; // 点方式

六、判断standard attribute的方式                    

我们可以通过点方式和getAttribute等方式访问standard attribute,但到底哪些是standard attribute哪些不是呢?下面介绍两种方式去判断。

①. 查阅http://msdn.microsoft.com/library/ms533029%28v=VS.85%29.aspx

②. 由司徒正美提供思路(生产环境中应该加入缓存从而提高性能)

// IE5+、Chrome、FF均有效
function isStandardAttr(node, prop){
// 由于window、document没有getAttribute等方法,这里暂时返回false好了
if (!node.getAttribute) return false; var nakedNode = document.createElement(node.nodeName);
return !(nakeNode[prop] === void 0 && nakeNode.getAttribute(prop) === null);
}

非standard attribute在未赋值时,点方式访问会返回undefine,而getAttribute方式访问会返回null。

而standard attribute在未赋值时,点方式访问会返回属性的默认值(title、id等会返回空字符串,而checked会返回false),而getAttribute方式访问会返回null。不利于判断。因此采用上一段的方式判断。

七、对于standard attribute,点方式和getAttribute方式操作的区别  

首先要明确一点,通过点方式可对属性赋值任意js数据类型的属性值,通过setAttribute方式赋值则会自动对入参进行序列化后赋予给属性。因此点方式操作的任意js数据类型,而getAttribute等方法操作字符串类型的属性值。

  区别1,获取的属性值不同:

点方式访问时是对属性值进行计算后的结果,getAttribute方式访问的是静态属性值。

以href属性为例,所在文件:c:\test.html,html标签:<a href="${链接1}"></a>:

浏览器 点方式 点方式结果 getAttribute getAttribute结果
 IE8+ 绝对路径,符号被编码,中文不被编码 file:///c:/$%7B链接1%7D 原属性值 ${链接1}
Chrome、FF 绝对路径,符号被编码,中文被编码 file:///c:/$%7B%E9%93%BE%E6%8E%A51%7D" 原属性值 ${链接1}

  区别2,属性名不同:

对于某些standard attribute而言,同一个属性,点方式和getAttribute方式分别使用不同的属性名来操作。

点方式 getAttribute
className class
htmlFor for
style.cssText style

八、困惑的焦点——standard property                       

由于可通过点方式和getAttribute的方式操作standard property,因此相对其他两种属性而言,standard property是最复杂的。

下面我将其再细分为

  ①. 普通属性(如id、name等)

    点方式和getAttribute方式操作一致,属性值自动转换为String类型。

  ②. 样式属性(style属性)

    点方式的dom.style.cssText对应dom.getAttribute('style')操作,两者均是获取String类型属性值。在赋予正常的样式规则时,

各浏览器行为均一致。但复杂度就在当赋予异常的样式规则时,各浏览器行为如下:

赋值方式 点方式访问 getAttribute方式访问 浏览器
点方式 空字符串 null Chrome、FF
setAttriubte 空字符串 通过setAttribute设置的无效样式规则属性值
点方式 空字符串 null IE9
setAttribute 空字符串 空字符串
点方式 空字符串 空字符串

IE8,10,11

setAttribute 空字符串 空字符串

    注意:IE8—11下,当通过setAttribute设置异常的样式规则时,html标签中的style属性会被删除,因此无法通过outerHTML来萃取异常样式规则的字符串值。

  ③. 布尔属性(如checked、disabled、selected等)

    在折腾时发现同样是布尔属性,但特征却不尽相同,因此暂时给出如下分类。

    3.1. 一般布尔属性(如disabled、IE5678下的checked)

赋值方式 赋予的值 点方式访问 getAttribute方式访问
点方式 true true 空字符串
false false null
setAttribute 空字符串 true 空字符串
非disabled的任意字符串 true

IE9+、Chrome和FF是返回setAttribute设置的值;

IE8是CHECKED

removeAttribute   false

null

       通过setAttribute方式设置,只需出现布尔属性名称,布尔属性值即为true;

       两种方式操作结果相互同步。

          2014/12/08添加:

        注意:FF下LINK元素的disabled属性是Attribute和Property关系分离的,两者互不影响。而样式是否应用于页面元素则由Property决定,并且当且仅当LINK元素被添加到渲染树后才能通过点方式设置disabled的值,否则设置均无效并还原为默认值false。

      3.2. non-removeAttr的布尔属性(如selected)

        确实不知道起什么名字好,于是只好暂时这样称呼吧。它的行为特征就是除了removeAttribute操作无法改变点方式获取的属性值内容外,

       其他行为与一般布尔属性一样。具体如下:

       所属SELECT元素为单选模式:

        通过点方式操作selected属性时,true表示选中,false表示不选中;通过setAttribute时,表示选中,且点方式访问selected时会返回true;
      但通过removeAttribute移除selected属性后,并不会改变选中项,因为selectedIndex没有被改变。
        推断:option标签设置selected显式属性后,会改变selectedIndex的值,从而改变选中项;而removeAttribute时仅仅去除该属性,
         而没有改变selectedIndex值,因此不会改变选中项。而点方式是根据selectedIndex去获取项目是否被选中。
      所属SELECT元素为多选模式:
          通过点方式操作selected属性时,true表示选中,false表示不选中;通过setAttribute时,表示选中,且点方式访问selected时会返回true;
      但通过removeAttribute移除selected属性后,并不会改变选中项。

    3.3. 变异布尔属性(如IE9+、Chrome和FF下checked)

      变异布尔属性最大的特点是,在用户UI改动属性值和通过点方式改动属性值前,点方式和getAttribute方式是操作同一个属性。但经过用户UI或点方式改动属性值后,两者操作的就是同名的两个属性了,此时点方式操作才是与UI状态关联的属性。

      具体代码如下:

IE9+、Chrome和FF下CHECKBOX和RADIO元素的checked属性属于变异布尔属性,而IE5678下的checked属性就属于双向布尔属性。

var cbx = document.createElement('input');
cbx.type = 'checkbox'; // UI或点方式改动属性前
cbx.setAttribute('checked', '');
console.log(cbx.checked); // 返回true
cbx.removeAttribute('checked');
console.log(cbx.checked); // 返回false // 点方式改动属性后
cbx.checked = true;
console.log(cbx.checked); // 返回true
console.log(cbx.getAttribute('checked')); // 返回null cbx.checked = false;
console.log(cbx.checked); // 返回false
cbx.setAttribute('checked', '');
console.log(cbx.checked); // 返回false

  ④. 事件钩子(如onclick等)

    事件钩子是DOM0级的事件订阅方式,现在一般不怎么用了,但不妨碍我们去折腾。

    而折腾的结果是却是让人惊奇的,因为它与之前理解的standard attribute的特征有差异,那就是点方式和getAttribute方式操作是单向影响的。

    具体请看代码(IE8-11,Chrome,FF均如此):

var dom = document.createElement('DIV');
dom.setAttribute('onclick', 'console.log("bySA");'); /* 输出
* function onclick(){
* console.log("bySA");
* }
*/
console.log(dom.onclick);
/* 输出
* console.log("bySA");
*/
console.log(dom.getAttribute('onclick')); dom.onclick = function(){
console.log('byProp');
};
/* 输出
* dom.onclick = function(){
* console.log('byProp');
* };
*/
console.log(dom.onclick);
/* 输出
* console.log("bySA");
*/
console.log(dom.getAttribute('onclick')); // 输出byPorp
dom.click();

整体来说,就是setAttribute方式设置的事件钩子点方式可见,点方式设置的事件钩子getAttribute不可见。

  ⑤. 值属性(value属性)

    用过JQuery都知道面对种类繁多的表单元素,一个val函数就能轻松搞定是一件多么惬意的事啊。但原生value属性到底有哪些坑呢?我们现在来踩一下。

    5.1. SELECT标签

        下拉框有单选(select-one)和多选(select-multiple)两种模式。而它的value属性由于是特性value和被选中项的text属性的运算结果,

      因此建议使用点方式进行操作。

      通过点方式获取和设置value值的运算流程如下:

浏览器 操作 流程

selectedIndex

默认值

Chrome、FF 获取 获取的第一被选中的option的value属性,若没有设置value属性,则返回该option标签的text属性

单选:0

多选:-1

设置 会根据属性值去匹配option标签的value属性值,若匹配成功则该option将被选中;若不成功,则匹配option的text属性值。若成功,则selectedIndex设置为-1。再次通过点方式访问value时,返回空字符串。
IE9+ 获取 获取的第一被选中的option的value属性,若没有设置value属性,则返回该option标签的text属性

单选:0

多选:-1

设置 会根据属性值去匹配option标签的value属性值,若匹配成功则该option将被选中;若不成功,则selectedIndex设置为-1。再次通过点方式访问value时,返回空字符串。
IE5678 获取 获取的第一被选中的option的value属性,若没有设置value属性则返回空字符串。 单选、多选:-1
设置 会根据属性值去匹配option标签的value属性值,若匹配成功则该option将被选中;若不成功,则selectedIndex设置为-1。再次通过点方式访问value时,返回空字符串。

      text属性:属性值就是选中项的innerText.trim()返回的字符串。

      结论:通过SELECT元素的value属性获取选中项的值不可靠,因此mass framework在valHooks['@select:get']中是通过操作OPTION元素来获取选中项的值,

           并且由于SELECT元素或OPTION元素的disabled属性值为true时,OPTION元素的selected属性依旧可能返回true,因此要对不可用的OPTION元素作过滤。

    5.2. CHECKBOX和RADIO标签

       value属性默认为字符串"on"

      

  ⑥. Url属性(如href、src等)

    点方式获取的属性值为绝对路径且对特殊符号、中文进行编码,getAttribute方式获取的原来的值。

 

  看到这里我想大家都有点头晕晕了吧,总结一下感觉会好些!

  1. 对于普通属性,两种方式均可;

  2. 对于样式、布尔和事件钩子属性建议统一采用点方式操作;

  3. 对于值属性要不就使用JQuery等dom库统一操作,要不就具体元素具体操作吧,

    mass framework的valHooks['@select:get']就是遍历option元素来获取select的选中值的;

  4. Url属性看具体需求,若想获取绝对路径,那就用点方式吧,否则就用getAttribute吧!

九、window和document对象的属性分类            

  由于window和document对象均没有getAttribute函数,可知其必须没有custom attribute的。但我们还是可以将它们的属性分为固有属性和自定义属性。

  固有属性:window和document对象自身携带的成员属性和方法;

          特征:①. 无法通过delete操作删除固有属性,在IE5.5、6、7中还会抛异常呢!

           ②. 固有属性为只读属性,无法修改。

  自定义属性:Jser们附加到window和document对象上的属性和方法。

       特征:①. 可通过delete操作删除;

            ②. 自定义属性可随便改。

  下面我将固有属性的判断和本文第六节中判断standard attribute的方法结合一下:

// IE5+、Chrome、FF均有效
function isStandardAttr(node, prop){
// 由于window、document没有getAttribute等方法,这里用固有属性为只读的特征来作判断
if (!node.getAttribute){
var oVal = node[prop], nVal;
nVal = node[prop] = +new Date();
node[prop] = oVal; return nVal === oVal;
} var nakedNode = document.createElement(node.nodeName);
return !(nakeNode[prop] === void && nakeNode.getAttribute(prop) === null);
}

十、IE5.5、6、7下的特性与属性                

  custom property和custom attribute都是IE8+的分类,在IE5.5、6、7下它俩可是一伙的。于是会发现在IE7下,dom.getAttribute('style')得到居然是个对象而不是样式规则的字符串。也许你会觉得这不碍事,反正在获取style属性时直接用点方式就好了。但下面的情况一不注意就会中bug了。

  情况①:调用FORM元素的getAttribute获取action属性,居然得到其下的表单元素?

      html

<form action="./add.aspx" name="frm" id="frm">
<input type="text" id="name"/>
<input type="text" name="id"/>
<select id="action">
<option value="">所有</option>
</select>
</form>

      js

var fDom = document.getElementById('frm');

var action = fDom.getAttribute('action');
var name = fDom.geAttribute('name');
var id = fDom.geAttribute('id'); console.log(typeof action);// 返回object
console.log(action.id);// 返回action console.log(typeof name);// 返回object
console.log(name.id);// 返回name console.log(typeof id);// 返回object
console.log(id.name);// 返回id

也许大家会疑惑,这最多就是通过点方式获取FORM元素的属性值而已,为什么会获取其下id或name属性值匹配的表单元素呢?假如大家看过《JS魔法堂:那些困扰你的DOM集合》就会知道FORM元素有一个HTMLFormControllersCollection类型的elements属性,该属性可通过点方式获取FORM元素下id或name属性值匹配的表单元素。而该FORM元素直接拥有elements这一特征,因此点方式除了获取FORM元素自身的属性值外,还可以访问其下的表单元素。

解决办法采用getAttributeNode获取Attr类型对象

var actionNode = fDom.getAttributeNode('action');
var nameNode = fDom.geAttributeNode('name');
var idNode = fDom.geAttributeNode('id'); console.log(actionNode.value); // ./add.aspx
console.log(nameNode.value); // frm
console.log(idNode.value); // frm

  情况②:没法通过href、src等获取绝对路径?

      与操作其他属性不同,对于href、src等属性而言,点方式的行为特征被getAttribute同化了,仅能获取静态属性值。那怎么办呢?

    IE对getAttribute作了增强,具体如下。

      getAttrbute({String} 属性名, {Number} [0|1|2|4]):默认值0,表示使用IE默认行为;

                                  1,属性名区分大小写;

                                  2,获取属性的静态属性值;

                                  4,获取绝对路径。

十一、其他:IE下tabIndex属性的非标准行为          

    标准浏览器(Chrome、FF等)下仅仅是表单元素(a,area)和链接元素(input,button,select,textarea,object)的tabIndex属性的默认值为0,

  而其他元素的tabIndex默认值为-1。而IE下就是所有元素的tabIndex属性默认值均为0.

十二、总结                          

本来是打算针对IE5.5、6、7和其他浏览器的差异、IE的bugs和各类型属性的特点来修补getAttribute等方法,但发现属性系统水深啊,

为原生API打补丁成本高效益差,还不如像JQuery那样重新包装上市来得爽快。于是本篇仅仅是记录了属性系统的一些坑而已,还不够全面,也暂时没能提出有效的封装方式。

  想继续深入的朋友可以读读个大框架的源码哦!

 十三、感谢那些巨人                      

  《JavaScript框架设计》

  《JQuery源码分析》 http://www.cnblogs.com/aaronjs/p/3279314.html

  尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3840263.html ^_^肥仔John