HTML 属性与 DOM 属性

主要观点:属性(attributes)和特性(properties)是根本不同的东西,可同名但值不同,如今了解此差异的开发者越来越少,在框架中情况更复杂。
关键信息:

  • 技术差异:属性存在于 HTML 和 DOM 中,特性仅在 DOM 中;属性值总是字符串,特性值可以是任何类型;属性名不区分大小写,特性名区分大小写。
  • 反射:部分元素的特性有对应的特性反射器(如Elementid),但并非所有特性都有,有些特性名和属性名不同(如imgcrossOriginlabelhtmlFor等)。
  • 验证等:特性无验证和默认值,属性有;部分属性会进行类型强制转换(如detailsopen)。
  • value在输入字段:有value属性和value属性,value属性不反映value属性,而是反映defaultValue属性。
  • 应用场景:认为属性用于配置,特性可包含状态,如<input value><details>等元素的设计存在争议。
  • 框架处理:Preact 和 VueJS 倾向于将 prop 设为属性(除特定情况),React 相反,Lit 要求用.前缀来区分设置属性还是特性。
    重要细节:通过多个代码示例展示了属性和特性在不同方面的差异及框架中的处理方式。
阅读 12
0 条评论