javascript - HTML中的属性和属性有什么区别？

Question

在 jQuery 1.6.1 中进行了更改之后，我一直在尝试定义 HTML 中属性和属性之间的区别。

查看 jQuery 1.6.1 release notes 上的列表(接近底部)，似乎可以将 HTML 属性和属性分类如下:

• 属性:所有具有 bool 值或 UA 计算的属性，例如 selectedIndex。

• 属性:可以添加到既不是 bool 值也不包含 UA 生成值的 HTML 元素中的“属性”。

想法？

Answer 1

在编写 HTML 源代码时，您可以在 HTML 元素上定义 属性。然后，一旦浏览器解析了你的代码，就会创建一个对应的 DOM 节点。该节点是一个对象，因此它具有属性。

例如，这个 HTML 元素:

<input type="text" value="Name:">

有 2 个属性(type 和 value)。

一旦浏览器解析此代码，HTMLInputElement将创建对象，该对象将包含几十个属性，例如:accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、childNodes、children、classList、className、clientHeight 等。

对于给定的 DOM 节点对象，属性是该对象的属性，属性是 attributes 的元素。该对象的属性。

当为给定的 HTML 元素创建 DOM 节点时，它的许多属性都与具有相同或相似名称的属性相关，但它不是一对一的关系。例如，对于这个 HTML 元素:

<input id="the-input" type="text" value="Name:">

对应的 DOM 节点将有 id , type , 和 value属性(除其他外):

• id属性是id 的反射(reflect)属性属性:获取属性读取属性值，设置属性写入属性值。 id是一个纯反射属性，它不会修改或限制值。

• type属性是type 的反射(reflect)属性属性:获取属性读取属性值，设置属性写入属性值。 type不是纯反射属性，因为它仅限于已知值(例如，输入的有效类型)。如果您有 <input type="foo"> ，然后 theInput.getAttribute("type")给你"foo"但是 theInput.type给你"text" .

• 相比之下，value属性不反射(reflect) value属性。相反，它是输入的当前值。当用户手动更改输入框的值时，value属性将反射(reflect)此更改。所以如果用户输入"John"进入输入框，然后:

  theInput.value // returns "John"
  

  而:

  theInput.getAttribute('value') // returns "Name:"
  

  value属性反射(reflect)输入框内的当前文本内容，而 value属性包含 value 的 initial 文本内容来自 HTML 源代码的属性。

  因此，如果您想知道当前文本框内的内容，请阅读该属性。但是，如果您想知道文本框的初始值是什么，请阅读属性。或者您可以使用 defaultValue属性，它是 value 的纯粹反射(reflect)属性:

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"
  

有几个属性直接反射(reflect)了它们的属性(rel，id)，一些是名称略有不同的直接反射(reflect)(htmlFor 反射(reflect)了 for 属性，className 反射(reflect)了 class属性)，许多反射(reflect)其属性但有限制/修改( src ， href ， disabled ， multiple )等等。 The spec涵盖了各种反射。