zoukankan      html  css  js  c++  java
  • 固有属性与自定义属性

    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则不存在映射,但只要你定义在

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

    <!doctype hmtl>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title>attribute</title>
         
        </head>
        <body>
            <div>
               <div aaa="1" aAa="2" aaA="3">11</div>
            </div>
        </body>
    </html>
    

    最后浏览器会解析成这样

    <!doctype hmtl>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title>attribute</title>
         
        </head>
        <body>
            <div>
               <div aaa="1" >11</div>
            </div>
        </body>
    </html>
    

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

     HTMLDivElement , HTMLElement, Element, Node, EventTarget, Function, Object
    

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

  • 相关阅读:
    hbuilder外置服务器设置(局域网移动端调试)
    【转载】解决微信OAuth2.0网页授权回调域名只能设置一个的问题
    【转载】如何使用PHP构建一个高性能的弹幕后端服务
    【转载】PHP学习资源整理
    【php基础】php运算符 php取整函数
    Browser 对象(一、history)
    Opencv 图像平滑基础二维离散卷积C++ API
    Opencv 图像平滑基础二维离散卷积 python API
    道格拉斯轨迹抽稀算法Android 百度地图SDK
    Opencv 几何变换
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/4777069.html
Copyright © 2011-2022 走看看