[TOC]

一、当浏览器加载页面时，它会“读取” / “解析” HTML并从中生成DOM对象。
二、对于元素节点，大多数标准的HTML特性（attributes）会自动变成DOM对象的属性（properties）

【示例】如果标签是，那么DOM对象就会有body.id=”page”

三、特性——属性映射并不是一一对应的。
四、大多数情况下，最好用DOM属性。仅当DOM属性无法满足开发需求，并且我们真的需要特性时，才使用特性。

【示例】我们需要一个非标准的特性。但是如果它以data-开头，那么我们应该使用dataset。

【示例】我们想要读取HTML中“所写的”值。对应的DOM属性可能不同，例如href属性一直是一个完整的URL，但是我们想要的是“原始的”值。

特性与属性的区别

一、特性（attribute）：写在HTML中的内容。
属性（property）：DOM对象中的内容

	属性	特性
类型	任何值，标准的属性具有规范中描述的类型	字符串
名字	名字（name）是大小写敏感的	名字（name）是大小写不敏感的

DOM属性 property

一、Dom节点是常规的JavaScript对象

| 【示例】```javascript // 在document.body中创建一个新的属性 document.body.myData = { name: ‘Caesar’, title: ‘Imperator’ }; alert(document.body.myData.title); // Imperator

// 添加方法 document.body.sayTagName = function() { alert(this.tagName); }; document.body.sayTagName(); // BODY（这个方法中的 “this” 的值是 document.body）

// 修改内建属性的原型 Element.prototype.sayHi = function() { // 修改Element.prototype为所有元素添加一个新方法 alert(Hello, I'm ${this.tagName}); }; document.documentElement.sayHi(); // Hello, I’m HTML document.body.sayHi(); // Hello, I’m BODY

 |
| --- |

二、DOM属性和方法的行为就像常规的JavaScript对象一样<br />1、它们可用有很多值。<br />2、它们是大小写敏感的（要写成elem.nodeType，而不是elem.NoDeTyPe）
<a name="toQxu"></a>
## DOM属性是多类型的
一、DOM属性不总是字符串类型的。

| 【示例】input.checked属性（对于checkbox的）是布尔型的```javascript
<input id="input" type="checkbox" checked> checkbox

<script>
  alert(input.getAttribute('checked')); // 特性值是：空字符串
  alert(input.checked); // 属性值是：true
</script>

| | —- |

| 【示例】style特性是字符串类型的，但style属性是一个对象```javascript

Hello

 |
| --- |

二、有一种非常少见的情况，即使一个DOM属性是字符串类型的，但它可能和HTML特性也是不同的。

| 【示例】**href** DOM属性一直是一个完整的URL，即使该特性包含一个相对路径或者包含一个#hash```javascript
<a id="a" href="#hello">link</a>
<script>
  // 特性
  alert(a.getAttribute('href')); // #hello

  // 属性
  alert(a.href ); // http://site.com/page#hello 形式的完整 URL
</script>

| | —- |

HTML特性 attribute

一、在HTML中，标签可能拥有特性（attributes）。
二、当浏览器解析HTML文本，并根据标签创建DOM对象时，浏览器会辨别标准的特性并以此创建DOM属性。
1、当一个元素有id货其他标准的特性，那么就会生成对应的DOM属性。但是非标准的特性则不会

| 【示例】```javascript

 |
| --- |

三、一个元素的标准的特性对于另一个元素可能是未知的。

| 【示例】"type"是<input>的一个标准的特性（HTMLInputElement），但对于<body>（HTMLBodyElement）来说则不是。 |
| --- |

| 【示例】```javascript
<body id="body" type="...">
  <input id="input" type="text">
  <script>
    alert(input.type); // text
    alert(body.type); // undefined：DOM 属性没有被创建，因为它不是一个标准的特性
  </script>
</body>

| | —- |

四、如果一个特性不是标准的，那么就没有相对应的DOM属性。
五、HTML特性有以下几个特征
1、它们的名字是大小写不敏感的（id与ID相同）
2、它们的值总是字符串类型的

| 【示例】特性的扩展示例```javascript

1、getAttribute('About')：这里的第一个字母是大写的，但是在HTML中，它们都是小写的。但这没有影响，特性的名称是大小写不敏感的。<br />2、我们可以将任何东西赋值给特性，但是这些东西会变成字符串类型的。<br />3、所有特性，包括我们设置的那个特性，在outerHTML中都是可见的。<br />4、attributes集合时可迭代对象，该对象将所有元素的特性（标准和非标准的）作为name和value属性存储在对象中。 |
| --- |


<a name="HlkBg"></a>
## 访问特性的方法
一、所有特性都可以通过使用以下方法进行访问<br />1、elem.hasAttribute(name)——检查特性是否存在<br />2、elem.getAttribute(name)——获取这个特性值<br />3、elem.setAttribute(name, value)——设置这个特性值<br />4、elem.removeAttribute(name)：移除这个特性<br />5、elem.attributes：读取所有特性。属于呢间Attr类的对象的集合，具有name和value属性。

| 【示例】读取非标准的特性```javascript
<body something="non-standard">
  <script>
    alert(document.body.getAttribute('something')); // 非标准的
  </script>
</body>

| | —- |

非标准的特性，dataset

一、有时，非标准的特性常常用于将自定义的数据从HTML传递到JavaScript，或者用于为JavaScript“标记”HTML元素

| 【示例】```javascript

 |
| --- |

二、设置元素的样式

| 【示例】使用order-state特性来设置订单状态```javascript
<style>
  /* 样式依赖于自定义特性 "order-state" */
  .order[order-state="new"] {
    color: green;
  }

  .order[order-state="pending"] {
    color: blue;
  }

  .order[order-state="canceled"] {
    color: red;
  }
</style>

<div class="order" order-state="new">
  A new order.
</div>

<div class="order" order-state="pending">
  A pending order.
</div>

<div class="order" order-state="canceled">
  A canceled
</div>

1、为什么使用特性比使用.order-state-new，.order-state-pending，.order-state-canceled这些样式类要好？
（1）因为特性值更容易管理。我们可以轻松地更改状态```javascript // 比删除旧的或者添加一个新的类要简单一些 div.setAttribute(‘order-state’, ‘canceled’);

2、自定义特性存在的问题<br />（1）我们使用了非标准的特性，之后它被引入到了标准中并有了自己的用途，怎么办？<br />①为了避免冲突，存在data-*特性 |
| --- |

三、所有以"data-"开头的特性均被保留供程序员使用。它们可在dataset属性中使用

| 【示例】如果一个elem有一个名为“data-about”的特性，那么可以通过elem.dataset.about取到它```javascript
<body data-about="Elephants">
<script>
  alert(document.body.dataset.about); // Elephants
</script>

1、像data-order-state这样的多词特性可以以驼峰式进行调用：dataset.orderState | | —- |

四、使用data-*特性是一种合法且安全的传递自定义数据的方式
五、我们不仅可以读取数据，还可以修改数据属性（data-attributes）。然后CSS会更新相应的视图。

属性-特性同步

一、当一个标准的特性被改变，对应的属性也会自动更新，（除了几个特例）反之亦然。

| 【示例】id被修改为特性，我们可以看到对应的属性也发生了变化。反过来也是同样的效果```javascript

1、但是也有例外，如input.value只能从特性同步到属性，反过来则不行。```javascript
<input>

<script>
  let input = document.querySelector('input');

  // 特性 => 属性
  input.setAttribute('value', 'text');
  alert(input.value); // text

  // 这个操作无效，属性 => 特性
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text（没有被更新！）
</script>

| | —- |

【示例】实际中，用户行为可能会导致value的更改，然后在这些操作中，如果我们想从HTML中恢复“原始”值，那么该值就在特性中。

😈 JavaScript大魔王

特性和属性（Attributes and properties）

特性与属性的区别

DOM属性 property

HTML特性 attribute

非标准的特性，dataset

属性-特性同步