property

DOM object property value obtained by way of point

document.body.className //获取body的类名

DOM object is an object, so it can be stored like any other JS objects, like a custom property

document.body.myData = {
    name : 'John'
}
document.body.sayHi = function(){
    alert('hello world');
}

console.log(document.body.myData.name);
console.log(document.body.sayHi());

Since property and method definitions will only appear in the JS will not affect HTML.

You can traverse using for ... in all standard and custom propery property

document.body.custom = 5;
var list = [];
for(var key in document.body){
    list.push([key, document.body[key]]);
}
console.log(list);

So, custom dom property:

There can be any value, property names are case sensitive
HTML does not affect

attribute

DOM node provides a method to access the html attributes

 ele.hasAttribute(name) //>=ie8
 ele.getAttribute(name)
 ele.setAttribute(name)
 ele.removeAttribute(name) //>=ie8

Note: Under the following and ie8 IE8 compatibility mode, setAttribute modified is the dom property, not the attribute

And property contrast, attribute:

It can only be a string
Names are not case sensitive
It will appear in html
You can use the DOM attributes propery list all attribute

<body>
  <div about="Elephant" class="smiling"></div>

  <script>
    var div = document.body.children[0]
    console.log( div.getAttribute('ABOUT') ) // (1)
    
    div.setAttribute('Test', 123)   // (2)
    console.log( document.body.innerHTML )   // (3)
  </script>
</body>

property and attribute synchronization

Each object has a standard dom node properties, there are three synchronization possibilities

Standard dom property and attribute values remain the same

document.body.setAttribute('id','pageWrap')
console.log(document.body.id) // pageWrap

Standard dom property and attribute values are not necessarily exactly the same

<a id="test">测试</a>

<script>    
var a = document.getElementById('test');
a.href = '/';
console.log(a.getAttribute('href')); // '/'
console.log(a.href); // 完整链接，但ie7及以下'/' (若链接中有中文，ff和chrome下会转义),这是因为w3c规定href property必须为格式良好的链接
</script>

There are some other attribute, not the same synchronization values, such as input.checked

<input type='checkbox' id='check' checked='aa'/>
<script>
var input = document.getElementById('check');
console.log(input.checked); //true
console.log(input.getAttribute('checked')) //'aa'
</script>

property values input.checked may only be true or false, but the attribute value is to get your fill of any value

Some of the built-in property is unidirectional synchronous
example, input.value synchronization value attribute value, but the value attribute value of the property values are not synchronized value.
After and, input box user to change the input value, the value will change with the value of the property, value attribute value constant.

<input type="text" id="text"/>
<script>
var input = document.getElementById('text');

input.setAttribute('value','hello');
console.log(input.value); //hello
console.log(input.getAttribute('value')); //hello

input.value = 'new';
console.log(input.value); //new
console.log(input.getAttribute('value')); //hello

input.setAttribute('value','other'); //此时再改变value attribute，value property不再变化
console.log(input.value); //other
console.log(input.getAttribute('value')); //other
</script>

Therefore, the initial value may be stored value attribute input box, for determining whether the input value is changed block

Propery and attribute names are not synchronized
class / className
because the JS class is a reserved word, so the class attribute, instead of using className property class property.
```
document.body.setAttribute('class', 'big red bloom');
console.log(document.body.className); //big red bloom, 但ie8及以下输出为空
```
In addition to <ie9, other browsers will change with class attribute, and modify the class name. To ensure compatibility, do not use the class attribute, with className property.

Summary

attribute and property are important features dom model.

In practice, 98% of the scene of property, attribute used only in the following two scenarios:

Since the html attribute defined as the use of property does not synchronize to HTML.
Need to get built html attribute, and property and not synchronized, and you're sure you need this attribute. Eg.input the value attribute.

translate for http://javascript.info/tutorial/attributes-and-custom-properties

Different DOM object attribute and property of

property

attribute

property and attribute synchronization

Summary

Guess you like