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.(该规范涵盖了各种反射。) 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…