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:

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:

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 valueattribute 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')完全不一样