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

时间：2011-05-14 18:04:42

标签： javascript html dom properties

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

查看jQuery 1.6.1 release notes上的列表（靠近底部），似乎可以按如下方式对HTML属性和属性进行分类：

  • 属性：所有具有布尔值或UA计算的值，例如selectedIndex。

  • 属性：'属性'可以添加到既不是布尔值也不包含UA生成值的HTML元素。

思想？

5 个答案:

答案 0 :(得分：678)

编写HTML源代码时，可以在HTML元素上定义 attributes 。然后，一旦浏览器解析您的代码，将创建相应的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属性的反射属性：获取属性读取属性值，设置属性写入属性值。 id是纯反映属性，不会修改或限制该值。

  • type属性是type属性的反射属性：获取属性读取属性值，设置属性写入属性值。 type不是纯粹的反射属性，因为它仅限于已知值（例如，输入的有效类型）。如果您有<input type="foo">，那么theInput.getAttribute("type")会为您提供"foo"，但theInput.type会为您提供"text"。

  • 相反，value属性不反映value属性。相反，它是输入的当前值。当用户手动更改输入框的值时，value属性将反映此更改。因此，如果用户在输入框中输入"John"，则：

    theInput.value // returns "John"

    ，而：

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

    value属性反映输入框内的当前文字内容，而value属性包含初始文字内容HTML源代码中的value属性。

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

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

有几个属性直接反映了他们的属性（rel，id），有些是直接反映，名称略有不同（htmlFor反映了for属性， className反映了class属性，其中很多都反映了他们的属性，但有限制/修改（src，href，disabled，multiple） ， 等等。 The spec涵盖各种反思。

答案 1 :(得分：40)

答案已经解释了属性和属性的处理方式不同，但我真的想指出完全疯狂这是多少。即使它在某种程度上是规范。

有一些属性（例如 id，class，foo，bar ）在DOM中只保留一种值，而某些属性（例如已检查），这很疯狂，选择）保留两个值;也就是说，“当它被加载时”的值和“动态状态”的值。 （DOM应该是否完全代表文档的状态？）

绝对必要的是，两个输入字段，例如文本和复选框 的行为方式相同。如果文本输入字段没有保留单独的“加载时”值和“当前，动态”值，为什么复选框？如果复选框确实有已检查属性的两个值，为什么它的类和 id 属性没有两个？ 如果您希望更改文本 *输入*字段的值，并且您希望更改DOM（即“序列化表示”）并反映此更改，那么为什么您不会期望来自checked属性复选框的输入字段的相同内容？

“它是一个布尔属性”的区别对我来说没有任何意义，或者至少不是一个充分的理由。

答案 2 :(得分：10)

这些是由w3c指定什么是属性以及什么是属性 http://www.w3.org/TR/SVGTiny12/attributeTable.html

但目前attr和prop并没有那么不同，而且几乎相同

但他们更喜欢道具

  

首选用法摘要

     

.prop（）方法应该用于布尔属性/属性以及html中不存在的属性（例如window.location）。所有其他属性（您可以在html中看到的属性）可以并且应该继续使用.attr（）方法进行操作。

实际上，如果你使用attr或prop或者两者兼而有之，你就不必改变一些东西 但是我在自己的应用程序中看到道具在atrr没有的地方工作，所以我接受了我的1.6 app prop =）

答案 3 :(得分：10)

在阅读Sime Vidas的答案之后，我进行了更多搜索，并在angular docs中找到了一个非常简单易懂的解释。

  

HTML属性与DOM属性

     
     

属性由HTML定义。属性由DOM定义   （文档对象模型）。

     
      

  • 一些HTML属性具有1：1到属性的映射。 id是一个   例子。

    •   

  • 某些HTML属性没有相应的属性。 colspan是   一个例子。

    •   

  • 某些DOM属性没有相应的属性。 textContent   是一个例子。

    •   

  • 许多HTML属性似乎可以映射到属性...但不是在   您可能会这么想！

    •   
     

在您掌握以下一般规则之前，最后一个类别令人困惑：

     

属性初始化 DOM属性，然后完成它们。属性   值可以改变；属性值不能。

     

例如，当浏览器呈现<input type="text" value="Bob">时，   它使用初始化的value属性创建对应的DOM节点   到“鲍勃”。

     

当用户在输入框中输入“ Sally”时，DOM元素value   属性变为“莎莉”。但是HTML value 属性仍然存在   当您发现是否询问输入元素时，它保持不变   属性：input.getAttribute('value')返回“鲍勃”。

     

HTML属性value指定 initial 值； DOM value   属性是 current 值。

     
     

disabled属性是另一个特殊的示例。一个按钮的   默认情况下，disabled属性为false，因此启用了按钮。什么时候   您添加了disabled属性，它的存在会单独初始化   按钮的disabled属性设置为true，因此该按钮被禁用了。

     

添加和删除disabled属性会禁用并启用   按钮。该属性的值无关紧要，这就是为什么您   无法通过编写<button disabled="false">Still Disabled</button>.

来启用按钮      

设置按钮的disabled 属性会禁用或启用按钮。属性 的值很重要。

     

HTML属性和DOM属性不是同一件事，甚至   当它们具有相同的名称时。

答案 4 :(得分：2)

不同的HTML属性和属性：

在评估HTML的区别之前，让我们首先看一下这些单词的定义：

英语定义：

  • 属性是指对象的其他信息。
  • 属性描述的是对象的特征。

在HTML上下文中：

当浏览器解析HTML时，它将创建一个树数据结构，该结构基本上是HTML的内存中表示形式。树数据结构包含HTML元素和文本的节点。与此相关的属性和方式如下：

  • 属性是我们可以在HTML中添加的其他信息， 初始化某些DOM属性。
  • 属性是在浏览器解析HTML并生成DOM时形成的。 DOM中的每个元素都有自己的属性集，这些属性都由浏览器设置。其中一些属性可以通过HTML属性设置其初始值。只要DOM属性发生变化而对呈现的页面产生影响，则该页面将立即重新呈现

重要的是要认识到这些属性的映射不是1到1。换句话说，并不是我们在HTML元素上给出的每个属性都具有相似的命名DOM属性。

此外，具有不同DOM元素的不同属性。例如，<input>元素具有value属性，而<div>属性中不存在该属性。

示例：

让我们看下面的HTML文档：

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

然后，我们在JS控制台中检查<div>：

 console.dir(document.getElementById('foo'));

我们看到以下DOM属性（chrome devtools，并非显示所有属性）：

html properties and attributes

  • 我们可以看到HTML中的属性id现在也是DOM中的id属性。该ID已通过HTML初始化（尽管我们可以使用javascript进行更改）。
  • 我们可以看到HTML中的class属性没有相应的class属性（class是JS中的保留关键字）。但是实际上有2个属性，classList和className。
相关问题
最新问题