固有属性与自定义属性
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框架设计》(这里有源码)看到,或是以后有空我向大家披露一下!
posted on 2015-09-01 22:16 司徒正美 阅读(4803) 评论(2) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
2010-09-01 三国观后感
2009-09-01 利用数组缓存正则表达式