Attribute and property in HTML

I. Overview

Attribute and property are two concepts that are often confused.

In simple terms, the property is accessed in the JS code:

Document.getelementbytagname (' my-element '). Prop1 = ' Hello ';

Attribute similar to this:

<my-element attr1= "Cool"/>

The way to access attribute in JS code is getattribute and setattribute:

Document.getelementbytagname (' my-element '). SetAttribute (' attr1 ', ' Hello ');

Document.getelementbytagname (' my-element '). getattribute (' attr1 ', ' Hello ');

Second, the difference

In most cases, the two are equivalent. In web standards, it is often stated that a attribute "reflects" a property of the same name. But the exception is still a lot of things.

1. Inconsistent names

The most typical is classname, in order to avoid javascript reserved words, JS with class attribute corresponding property is classname.

<div class= "Cls1 cls2" ></div>

<script>

var div = document.getelementbytagname (' div ');

Div.classname//CLS1 CLS2

</scrpit>

2. Inconsistent type

The most typical type is style, which does not accept string assignments.

<div class= "Cls1 cls2" style= "Color:blue" ></div>

<script>

var div = document.getelementbytagname (' div ');

Div.style//Object

</scrpit>

3. Semantic inconsistency

such as the href attribute of the A element.

<a href= "//m.taobao.com" ></div>

<script>

var a = Document.getelementbytagname (' a ');

A.href//"http://m.taobao.com", this URL is the result of resolve

A.getattribute (' href ')//'//m.taobao.com ', exactly the same as in the HTML code

</scrpit>

4. One-way sync relationship

Value is a very special attribute/property.

<input value = "cute"/>

<script>

var input = document.getelementbytagname (' input ');

If the property is not set, the result is attribute

Input.value//cute

Input.getattribute (' value '); Cute

Input.value = ' Hello ';

If the Value property has been set, then the attribute is unchanged, the properties change, the actual effect on the element is the attribute first

Input.value//hello

Input.getattribute (' value '); Cute

</scrpit>

In addition, the display state of the checkbox is determined by the checked and indeterminate two properties, and there is only one property named checked, in which case the property is a more sophisticated access model.

Third, special scenes

1.mutation

With mutation observer, only attribute changes can be monitored.

var observer = new Mutationobserver (function (mutations) {

for (var i = 0; i < mutations.length; i++) {

var mutation = Mutations[i];

Console.log (Mutation.attributename);

}

});

Observer.observe (Element,{attributes:true});

ELEMENT.PROP1 = ' AA '//Will not trigger

Element.setattribute (' attr1 ', ' AA ')//Will trigger

2.custom element

When using webcomponents, you can define attribute and property, which can reflect each other or be completely unrelated.

var Myelementproto = object.create (Htmlelement.prototype, {

Createdcallback: {

Value:function () {}

}

});

Define Property

Object.defineproperty (Myelementproto, ' Prop1 ', {

Get:function () {

Return//

},

Set:function () {

Console.log ("Change of Property");//do something

}

});

Define Attribute

Myelementproto.attributechangedcallback = function (attr, oldval, newval) {

if (attr = = = ' Attr1 ') {

Console.log (' attribute change ');//do something

}

};

Window. MyElement = document.registerelement (' my-element ', {

Prototype:myelementproto

});

Attribute and property in HTML