Attribute and property in HTML_html/css_WEB-ITnose

1. Overview

Attribute and property are two concepts that are often confused.

To put it simply, property is accessed in JS code:

document.getElementByTagName('my-element').prop1 = 'hello';

attribute is similar This kind:

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');

2. Differences

In most cases, the two are equivalent. In web standards, it is often stipulated that an attribute "reflects" a property with the same name. But there are still many exceptions.

1. Inconsistent names

The most typical one is className. In order to avoid JavaScript reserved words, the property corresponding to the class attribute in JS is className.

<script></script>

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

div.className //cls1 cls2

2. Inconsistent types

The most typical one is style, which does not accept strings type assignment.

<script></script>

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

div.style // Object

3. Inconsistent semantics

such as a element href attribute.

<script></script>

var a = document.getElementByTagName( 'a');

a.href // "http://m.taobao.com", this url is the resolved result

a.getAttribute('href') / / "//m.taobao.com", exactly the same as in the HTML code

4. One-way synchronization relationship

value is an extremely Special attribute/property.

<script></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 attribute has been set, the attribute remains unchanged and the property changes. The actual effect on the element is that property takes precedence

input. value //hello

input.getAttribute('value'); //cute

In addition, the display status of the checkbox is checked and indeterminate are determined by two properties, and there is only one property named checked. In this case, the property is a more complete access model.

3. Special Scenarios

1.mutation

Using mutation observer, only attribute changes can be monitored.

var observer = new MutationObserver(function(mutations){

for(var i = 0; 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 attributes and properties. The two can reflect each other or have no correlation at all.

var MyElementProto = Object.create(HTMLElement.prototype, {

createdCallback : {

value : function() { }

}

});

//Define property

Object.defineProperty(MyElementProto,'prop1', {

get:function() {

return //

},

set:function(){

console.log('property change');//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

});