5.attrs 与 props

attribute 与 property

后面会涉及到这个两术语

概念

• attribute 常简写成 attr ，是 html 的概念
• property 常简写成 prop ，是 javascript dom 的概念

读写

• atrribute 通过 node.getAtrribute ， node.setAtrribute 读写
• property 通过 .property 或 ['property'] 读写

大小写

• attrbite 都是小写，即使在写html时用的是大写也会转成小写

<div accesskey="k"></div>

• property 使用的是小写驼峰

node.accessKey

对应关系

• 标准的 attribute 一般都会有对应的 property

id, title, src, href, ...

• 自定义的 attribute 没有对应的 property

<div myattr="str"></div>

• property 不一定会有对应的 atrribute

innerHTML, innertext, ...

• 对应的名字可能会不一样

<div class="list"></div>

node.className

修改影响

• 修改标准 atrribute 会更新 property

node.setAtrribute('title', 'new string')

<div title="new string"></div>

• 修改自定义 atrribute 也不会有 property

node.setAtrribute('myattr', 'new value')

node.myattr === undefined

• 修改 property 不一定会更新 atrribute

input.value = 'new string'

<!-- 有的浏览器会更新 -->
<input value="string">

• 修改 property 有的会更新 atrribute

input.title = 'new string'

<input title="new string">

值的区别

• attribute 都是字符串，不存在时为 null
• property 任意类型
• 同型值可能不一样，如 href 的 atrribute 不管是否相对地址， property 都是绝对地址

布尔型

hidden, disabled, checked, selected, contentEditable, ...

• 当 attribute 存在时，不管其值是什么，对就的 property 为 true
• 当 attribute 不存在时，对应的 property 为 false

该用哪个

dom 操作应该优先使用 property