javascript - HTML中的属性和属性有什么区别？(What is the difference between properties and attributes in HTML?)

Question

After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.(在jQuery 1.6.1中进行更改之后，我一直试图定义HTML中的属性和属性之间的差异。)

Looking at the list on the jQuery 1.6.1 release notes (near the bottom), it seems one can classify HTML properties and attributes as follows:(查看jQuery 1.6.1发行说明中的列表（在底部附近），似乎可以对HTML属性和属性进行如下分类：) Properties: All which either has a boolean value or that is UA calculated such as selectedIndex.(属性：所有具有布尔值或UA计算得出的值，例如selectedIndex。) Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.(属性：可以添加到既不是布尔也不包含UA生成值的HTML元素中的“属性”。) Thoughts?(有什么想法吗？)   ask by schalkneethling translate from so

Answer 1

When writing HTML source code, you can define attributes on your HTML elements.(编写HTML源代码时，可以在HTML元素上定义属性 。)

Then, once the browser parses your code, a corresponding DOM node will be created.(然后，一旦浏览器解析了您的代码，就会创建一个对应的DOM节点。) This node is an object, and therefore it has properties .(该节点是一个对象，因此具有属性 。) For instance, this HTML element:(例如，此HTML元素：) <input type="text" value="Name:"> has 2 attributes ( type and value ).(有2个属性（ type和value ）。) Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.(浏览器解析此代码后，将创建一个HTMLInputElement对象，该对象将包含许多属性，例如：accept，accessKey，align，alt，attributes，autofocus，baseURI，checked，childElementCount，childNodes，childNodes，classList，className， clientHeight等) For a given DOM node object, properties are the properties of that object, and attributes are the elements of the attributes property of that object.(对于给定的DOM节点对象，属性是对象的属性，以及属性是的元素attributes该对象的属性。) When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it's not a one-to-one relationship.(当为给定的HTML元素创建DOM节点时，其许多属性都与具有相同或相似名称的属性相关，但这不是一对一的关系。) For instance, for this HTML element:(例如，对于此HTML元素：) <input id="the-input" type="text" value="Name:"> the corresponding DOM node will have id , type , and value properties (among others):(相应的DOM节点将具有id ， type和value属性（以及其他属性）：) The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value.(该id属性是反射属性 id属性：获取属性读取属性值，并设置属性写入属性值。) id is a pure reflected property, it doesn't modify or limit the value.(id是纯反射属性，它不会修改或限制该值。) The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value.(该type属性是一个反射的属性 type的属性：获取属性读取的属性值，并且设置属性写入的属性值。) type isn't a pure reflected property because it's limited to known values (eg, the valid types of an input).(type不是纯粹的反映属性，因为它仅限于已知值 （例如，输入的有效类型）。) If you had <input type="foo"> , then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text" .(如果您有<input type="foo"> ，则theInput.getAttribute("type")会给您"foo"而theInput.type会给您"text" 。) In contrast, the value property doesn't reflect the value attribute.(相反， value属性不能反映value属性。) Instead, it's the current value of the input.(相反，它是输入的当前值 。) When the user manually changes the value of the input box, the value property will reflect this change.(当用户手动更改输入框的value ， value属性将反映此更改。) So if the user inputs "John" into the input box, then:(因此，如果用户在输入框中输入"John" ，则：) theInput.value // returns "John" whereas:(而：) theInput.getAttribute('value') // returns "Name:" The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.(所述value属性反映输入盒内的当前文本的内容，而value属性包含的初始文本的内容value从HTML源代码属性。) So if you want to know what's currently inside the text-box, read the property.(因此，如果您想知道文本框中当前包含的内容，请阅读属性。) If you, however, want to know what the initial value of the text-box was, read the attribute.(但是，如果您想知道文本框的初始值是什么，请阅读属性。) Or you can use the defaultValue property, which is a pure reflection of the value attribute:(或者，您可以使用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.(有几个属性可以直接反映其属性（ rel ， id ），一些属性是名称略有不同的直接反映（ htmlFor反映了for属性， className反映了class属性），许多反映了它们的属性但具有限制/修改（ src ， href ， disabled ， multiple ），等等。) The spec covers the various kinds of reflection.(该规范涵盖了各种反射。)