固有属性与自定义属性

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框架设计》(这里有源码)看到,或是以后有空我向大家披露一下!

时间: 2024-08-04 17:25:36

固有属性与自定义属性的相关文章

迷你MVVM框架 avalonjs 学习教程8、属性操作

属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为字符串属性,但有一些属性的是布尔,也存在是数字类型.节点引用的情况.当前jQuery处理它们就是搞了N个钩子对象,才摆平它们.avalon为了收拾它们也设置N多绑定,其中类名部分交由ms-class. ms-hover. ms-active处理,这些其他章节介绍:表单元素的value属性之前也说过,

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

第二十一课:属性模块2

上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如:href,action,background,cite,data,src,url等.我们只需要用getAttribute(href,2),就能很好的兼容各种浏览器了.标准浏览器不支持第二个参数,因此忽略第二个参数.而IE支持第二个参数,2代表只取出原字符串的值. IE6-7下,对于form元素,调

JavaScript 框架设计 司徒正美 编著

第1章 种子模块 1.1 命名空间 1.2 对象扩展 1.3 数组化 1.4 类型的判定 1.5 主流框架引入的机制--domReady 1.6 无冲突处理 第2章 模块加载系统 2.1 AMD规范 2.2 加载器所在路径的探知 2.3 require方法 2.4 define方法 第3章 语言模块 3.1 字符串的扩展与修复 3.2 数组的扩展与修复 3.3 数值的扩展与修复 3.4 函数的扩展与修复 3.5 日期的扩展与修复 第4章 浏览器嗅探与特征侦测 4.1 判定浏览器 4.2 事件的支

attr 和 prop的区别

要想弄清楚attr和prop的区别,就要先搞清楚js中使用DOM方法获取设置属性和使用对象方法获取设置属性的区别. 在javascript中使用DOM方法设置获取属性值主要是依靠setAttribute和getAttribbute,而使用对象方法获取属性值主要是靠节点对象.属性名称. 那么这两种方法有什么不同? 1.  获取属性值 假设有这样的html代码: <div id = 'id_div' class = 'class-div' a = 'aaa'> 那么首先使用getAttribute

HTML5中的data-*属性和jQuery中的.data()方法使用

HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门.我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性.但是前端技术在向着规范化前进.HTML5标准规定,自定义的属性都已data-*开头,这样就区分开了固有属性和自定义属性.HTML代码如下: <div id="testDiv" data-cname="张三" data-e

前进的方向 没有方向就是蒙着眼睛的驴子原地踏步 一年经验混十年 说的真是太好了 必须要粘贴复制下来文章(司徒正美)

历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有什么帮助及阅读顺序等疑问.作为国内第一本讲述前端框架构的书,它里面充斥着许多大家前所未闻的知识,这些知识有50%只见于github的issue,讲述各种隐秘的浏览器兼容性问题及各种神奇的修复方案,或者是某些危险但美丽的黑魔法,另外50%我深夜梦游般在外国某些大牛(不局限于英语,有日语,俄语,韩语等,不同的语言的人,受制了他们的语法结构,他们的思考回路是与我们不同的,给出的答案有时真的是拍案叫绝)的博

CSS3-新属性-属性选择器

CSS3之前,对于每个HTML标签来说,属性均是固定的.但是CSS3扩展了属性选择器的用法,用户可自定义标签的属性.下面介绍CSS3中属性选择器的使用方式,这些属性仅支持IE7及以上版本. 标签的自定义属性和标签的固有属性写法一致,例如,给 3个p 标签自定义一个attribute的属性,且属性值分别为first.second,以及含有多个属性值 “third1 third2 third3 third4” 的p标签,此种写法称为属性值列表 <p attribute="first"

jquery源码解析:jQuery对元素属性的操作1

我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来看下一些方法是如何使用的? $("#div1").attr("title","hello") ,设置属性,两个参数时. $("#div1").attr("title") , 获取属性值,一个参数时. $(&qu