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

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

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

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

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

想法吗?

290858 次浏览
小开
这些都是w3c指定的什么是属性，什么是属性 # EYZ0 < / p >

但是目前attr和prop并没有太大的不同，几乎是一样的

但有些东西他们更喜欢道具

首选用途摘要

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

好吧，实际上你不需要改变什么如果你使用attr或prop或两者，两者都可以 但是我在我自己的应用程序中看到，道具工作的地方atrr没有，所以我在我的1.6应用程序道具=)

小开
最佳答案

在编写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属性的反射属性:获取属性读取属性值，设置属性写入属性值。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:"

There are several properties that directly reflect their attribute (rel, id), some are direct reflections with slightly-different names (htmlFor reflects the for attribute, className reflects the class attribute), many that reflect their attribute but with restrictions/modifications (src, href, disabled, multiple), and so on. The spec covers the various kinds of reflection.

小开

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

有些属性(例如Id class foo bar)在DOM中只保留一种值，而有些属性(例如检查,选择)保留两种值，这是疯狂的;即“加载时”的值和“动态状态”的值。(DOM不应该完全代表文档的状态吗?)

这是绝对必要的，两个输入字段，例如文本和复选框 行为也要如此。如果文本输入字段不保留一个单独的“当它被加载”值和“当前，动态”值，为什么复选框?如果复选框的检查属性有两个值，为什么它的类和id属性没有两个值呢? 如果您希望更改文本 *input*字段的值，并且您希望DOM(即“序列化表示”)发生更改，并反映此更改，那么为什么您不希望在选中属性上的复选框类型的输入字段发生相同的更改呢?< / p >

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

小开

不同的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属性和属性

  • 我们可以看到，HTML中的属性id现在也是DOM中的id属性。id已经被HTML初始化(尽管我们可以用javascript改变它)。
  • 我们可以看到HTML中的class属性没有相应的class属性(class在JS中是保留关键字)。但实际上有两个属性，classList和className。
小开

在阅读了森那美维达的答案后，我又搜索了一下，在角文档中找到了一个非常直接易懂的解释。

HTML属性vs. DOM属性

-------------------------------
属性由HTML定义。属性是由DOM定义的 (文档对象模型).

.
    一些HTML属性与属性有1:1的映射关系。id是1 例子。< / p >

  • 一些HTML属性没有相应的属性。# EYZ0 一个例子。< / p >

    • 一些DOM属性没有相应的属性。# EYZ0

    许多HTML属性似乎映射到属性…但不是在 就像你想的那样!< / p >

最后一种情况会让你感到困惑，直到你掌握了下面这个一般规则:

Attributes 初始化 DOM属性，然后他们就完成了。财产 价值观可以改变;属性值不能。

例如，当浏览器呈现<input type="text" value="Bob">时， 它创建了一个初始化了value属性的相应DOM节点 “;Bob" . < / p >

当用户输入&;萨莉"进入输入框，DOM元素value 财产变成了“萨莉”。但是HTML value 属性保留了下来 如果你问input元素，你会发现没有改变 属性:input.getAttribute('value')返回"Bob"

HTML属性value指定最初的值;DOM value

. properties为当前的值
disabled属性是另一个特殊的例子。一个按钮的 disabled属性默认为false，因此按钮是启用的。当 添加disabled属性，它的存在将初始化

. button的disabled属性改为true，因此按钮被禁用

添加和删除disabled属性禁用和启用 按钮。属性的值是不相关的，这就是为什么你 不能通过写入<button disabled="false">Still Disabled</button>.

来启用按钮

设置按钮的disabled 财产禁用或启用按钮。财产的值很重要。

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

小开

更新我的答案，这是引用

小开

属性由HTML定义，用于自定义标记。

HTML DOM属性是你可以设置或更改的(HTML元素的)值。

所以，属性和属性之间的主要区别是:

  • 属性是由HTML定义的，但属性是由DOM定义的。
  • 属性的值是固定的，而属性的值是可变的。
  • 该属性的主要作用是初始化DOM属性。因此，一旦DOM初始化完成，属性工作就完成了。

提交答案