固有属性与自定义属性

柔光的暖阳◎ 2021-11-05 02:54 371阅读 0赞

javascript有两个很相近的东西，property与attribute，懒一点的人都翻译成“属性”。 如果专业点，则区别为“属性”与“特性”。我认为叫做固有属性与自定义属性比较好一点。

property是来自于原型链，所有HTML元素，都是HTMLElemenet的实例，HTMLElement再往上走，就是 Element，再往上走就是Node，每一级原型都有属性。就算你没有在标签内显式定义这些属性，它们都存在。 比如title, id, class, lang, dir等等，你没有定义它们，它们就默认是一个空字符串。不同的标签都有自己独特 的固有属性，比如A标签的href，表单元素的tabindex标签。

attributes是通过setAttribute设置，或者你<div aaa=bbb></div>这样添加的非固有属性外的属性，它们没有显式定义是为undefined, 显式定义了，它的值肯定是一个字符串（固有属性没有这限制，比如tabindex的值为数字，option的selected为布尔， form的elements为一个类数组，五花八门的）

property在标签中是存在映射，比如class，它会转换为className, for转换为forHtml, tab index转换为tabIndex， bgcolor转换bgColor....

而attribute则不存在映射，但只要你定义在

的开标签内，它们就会全部小写化, 并将同名的属性进行合并，只留下第一个。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>&lt;!</code> 
      <code>doctype</code> 
      <code>hmtl&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>title</code> 
      <code>&gt;attribute&lt;/</code> 
      <code>title</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>aaa="1" aAa="2" aaA="3"&gt;11&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

最后浏览器会解析成这样

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>&lt;!</code> 
      <code>doctype</code> 
      <code>hmtl&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>title</code> 
      <code>&gt;attribute&lt;/</code> 
      <code>title</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>aaa="1" &gt;11&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

细节处见功力，只要你能区别开property与attribute，你就能窥探到DOM世界的庞然大厦。一个标签不是你想象中的那么简单，一个DIV标签是有七层原型链！

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>HTMLDivElement , HTMLElement, Element, Node, EventTarget, Function, Object</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

每个浏览器在设计这些时，事先也没有打交道，于是一大堆兼容性问题在里面。IE在向W3C靠拢过程中，其属性系统发生了三次重大的转变。这些故事可以从我的书《javascript框架设计》(这里有[源码][Link 1])看到，或是以后有空我向大家披露一下！

[Link 1]: https://github.com/RubyLouvre/jsbook