When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.
For instance, this HTML element:
<input type="text" value="Name:">
has 2 attributes.
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.
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.
Update: When a DOM node is created for a given HTML element, a corresponding property is created for each attribute in the HTML source code. For instance, for this HTML element:
<input type="text" value="Name:">
the corresponding DOM node will have a type
and a value
property (among others). However, when the user manually changes the value of the input box, the value
property will reflect this change. So if the user inputs "John"
into the input box, then:
input.value // returns "John"
whereas:
input.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.
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.
简单翻译,property是可变的,attribute是初始值。
但还是有很多问题:
.style 与 getAttribute('style')完全不一样
来源:oschina
链接:https://my.oschina.net/u/214483/blog/416021