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

一、前言                                

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

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含义                  

   看看图更健康

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

  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 0 && 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="0">所有</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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏彭湖湾的编程世界

谈谈出入React框架踩过的坑

1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

33860
来自专栏dotnet & java

jQuery.prop , jQuery.attr ,jQuery.data

jquery.prop 获取匹配的元素中第一个元素特定的属性值,或者是设置多个元素的属性值。

9320
来自专栏前端说吧

vue-学习笔记(更新中...)

94960
来自专栏Young Dreamer

setInterval(code, time)中code传递参数办法

1.使用setInterval的场景 有时我们需要隔一定的时间执行一个方法,这时就会用到setInterval,但是由于这个方法是浏览器模拟出的Timer线程,...

18690
来自专栏Objective-C

Swift 基本语法01-Swift简介

39770
来自专栏静晴轩

精妙JS代码段搜集

现在到处都是JavaScript,倘若花点时间去体察,每次都能知道点新的东西。一旦你入了门,你总能从这里或是那里领悟到很多知识。一旦发现些许有意思的东西,总习惯...

35850
来自专栏xingoo, 一个梦想做发明家的程序员

使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

22190
来自专栏十月梦想

JS转义字符

67440
来自专栏IT开发技术与工作效率

VBA函数与过程简洁教程

21830
来自专栏友弟技术工作室

golang爬虫初体验

最近在学习golang,看网上很多人都喜欢爬豆瓣,今天我就写了一个golang版的爬虫。对于python爬虫,我很了解,什么dom树,js异步,爬虫技术栈都是没...

18240

扫码关注云+社区

领取腾讯云代金券