内容属性和 IDL 属性

• 内容属性

  在 HTML 代码中声明的属性是内容属性，也可以通过 element.setAttribute() 或 element.getAttribute() 来设置。内容属性的值是一个字符串，即使其值是数字或者布尔值，都使用字符串的形式传递。

  1	<input type="text" maxlength="5" />

• IDL(Interface Definition Language) 属性

  在 JavaScript 中获取的 HTML 元素，可以直接获取其属性，该属性即是 IDL 属性。使用 IDL 属性时，你读取或设置值的类型都是要求的类型，不再像内容属性一样统统以字符串的形式传递。例如，input 的 maxLength 值会返回一个数字类型，设置 maxLength 的值时也需要使用数字，如果传递了其它类型的值，会根据标准 JavaScript 的类型转换规则被转换为数字。

  另外，在 JavaScript 中属性名称以驼峰形式命名。

  1 2 3

  const input = document.querySelector('input') console.log(input.maxLength) //input.maxLength => IDL属性 console.log(typeof input.maxLength) //number

枚举属性和布尔属性

• 枚举属性

  属性取值由若干的关键词组成的枚举集合就是枚举属性。例如，input type 属性由'button' 'text' 'number'等若干值组成。

  contenteditable 属性允许设定的值包括 true 和 false，但该属性仍是一个枚举属性而非布尔属性。
  如果属性值是 true 或空字符串，表示该元素是可编辑的，false 表示元素不可编辑，如果只声明了属性而没有取值则视为空字符串。

• 布尔属性

  一些内容属性（例如 required, readonly, disabled）是布尔值属性。如果一个布尔值属性存在，则其值是 true，如果不存在，其值是 false。

  HTML5 定义了布尔值属性允许的取值：如果属性存在，其值必须是一个空字符串（即该属性的值未分配），或者是一个大小写无关，且与属性名严格相同，前后都没有空格的字符串。下述例子是为一个布尔值属性取值的几个有效方式。

  1 2 3 4

  <div itemscope>This is valid HTML but invalid XML.</div> <div itemscope="itemscope">This is also valid HTML but invalid XML.</div> <div itemscope="">This is valid HTML and also valid XML.</div> <div itemscope="itemscope">This is also valid HTML and XML, but perhaps a bit verbose.</div>

  除了以上的有效取值方式，赋予其他的任意值也会被解读成 true，这是因为符合属性存在即为 true 的条件。

  布尔值属性不能取值为 "true" 和 "false"。如果需要表示 false 值，布尔值属性需要整个忽略不写。