element怎么设置复选框属性_Dom的属性与特性

当浏览器加载页面时，它会“读取”（或者称之为：“解析”）HTML 并从中生成 DOM 对象。对于元素节点，大多数标准的 HTML 特性（attributes）会自动变成 DOM 对象的属性（properties）。（译注：attribute 和 property 两词意思相近，为作区分，全文将 attribute 译为“特性”，property 译为“属性”，请读者注意区分。）

概述

当我们书写 HTML 代码的时候，我们为 HTML 元素设置特性 ，例如：

<input id="name"value="justjavac" />
           

我们写了一个

input

标签，并给他定义了 2 个特性 (

id

和

value

)。当浏览器解析这段代码的时候，会把 html 源码解析为 DOM 对象，确切的说是解析为

HTMLInputElement

对象。

HTMLInputElement

的继承关系是：

HTMLInputElement
  ↓
HTMLElement
  ↓
Element
  ↓
Node
  ↓
EventTarget
  ↓
Object
           

通过查看文档会发现，

HTMLInputElement

的原型上定义了很多属性和方法，例如

form

,

name

,

type

,

alt

,

checked

,

src

,

value

等等，还有从

HTMLElement

继承来的

id

,

title

,

clientTop

等等。

如果仔细找找，就不难发现其中就有我们为

input

标签定义的特性：

id

和

value

。当浏览器解析网页时，将 HTML 特性映射为了 DOM 属性。

而

Element

类还有一个

attributes

属性，里面包含了所有的特性。

但是，HTML attribute 和 DOM property 并不总是一对一的关系。

1. DOM 属性

当浏览器解析完 HTML 后，生成的 DOM 是一个继承自 Object 的常规 JavaScript 对象，因此我们可以像操作任何 JS 对象那样来操作 DOM 对象。

const el = document.getElementById('name')
el.foo = 'bar'el.user = { name: 'jjc', age: '18'}
           

也可以为其添加方法。如果你想给每个 html 元素都添加属性或方法，甚至可以直接修改

Element.prototype

，不过我们不推荐这么做。

2. HTML 特性

和 DOM 属性类似，除了那些规范里定义的标准特性外，HTML 也可以添加非标准的属性，例如：

<input id="name" value="justjavac" foo="bar" />
           

当 HTML 特性映射为 DOM 属性时，只映射标准属性，访问非标准属性将得到

undefined

。

const el = document.getElementById('name')
el.foo === undefine
           

好在 DOM 对象也提供了操作特性的 API：

• Element.hasAttribute(name)

  – 判断某个特性是否存在

• elem.getAttribute(name

  ) – 获取指定特性的值

• elem.setAttribute(name, value)

  – 设置指定特性的值

• elem.removeAttribute(name)

  – 移除指定特性

以上 API 定义在

Element

上。

根据 HTML 规范，标签以及特性名是不区分大小写的，因此以下代码是一样的：

el.getAttribute('id')
el.getAttribute('ID')
el.getAttribute('iD')
           

并且，特性永远都是字符串或

null

。如果我们为特性设置非字符串的值，则引擎会将此值转换为字符串。属性是具有类型的：

el.getAttribute('checked') === '' // 特性是字符串
el.checked === false              // 属性是 boolean 类型的值
el.getAttribute('style') === 'color:blue' // 特性是字符串
typeof el.style === 'object'   // 属性是 CSSStyleDeclaration 对象
           

即使都是字符串，属性和特性也可能不同，有一个例外就是

href

：

el.getAttribute('href') === '#tag' // 特性原样返回 html 设置的值
el.href === 'http://jjc.fun#tag'   // 属性返回解析后的完整 uri
           

3. 特性和属性的同步

当标准的特性更新时，对应的属性也会更新；反之亦然。

但是

input.value

的同步是单向的，只是

attribute --> property

。当修改特性时，属性也会更新；但是修改属性后，特性却还是原值。

el.setAttribute('value', 'jjc');  // 修改特性
el.value === 'jjc'                // 属性也更新了 
el.value = 'newValue';            // 修改属性 
el.getAttribute('value')) === 'jjc' // 特性没有更新
           

4. 非标准特性

非标准 HTML 特性并不会自动映射为 DOM 属性。当我们使用

data-

开头的特性时，会映射到 DOM 的 dataset 属性。中划线格式会变成驼峰格式：

el.setAttribute('data-my-name', 'jjc');
el.dataset.myName === 'jjc';
el.setAttribute('data-my-AGE', 18);
el.dataset.myAge === '18';
           

自定义特性 VS 非规范特性

HTML 允许我们自定义标签，也可以扩展标签的特性，但是我们推荐使用已经进入 HTML5 规范的自定义特性

data-*

。比如我们想为

div

标签增加一个

age

特性，我们可以有 2 种选择：

<div age="18">justjavac</div>
<div data-age="18">justjavac</div>
           

虽然第一种代码更短，但是却有一个潜在的风险。因为 HTML 规范是一直发展变化的，也许在未来的某个版本中，

age

被添加进了标准特性里面，这将会引起潜在的 bug。

结论

HTML attribute                          DOMproperty

值永远是字符串或 null                 值可以是任意合法 js 类型
大小写不敏感                          大小写敏感
不存在时返回 null                     不存在时返回 undefined
对于 href, 返回 html 设置的值         对于 href 返回解析后的完整 url
更新 value, 属性                      也更新更新 value, 特性不更新