2018.3.1 more:

There are praise · micro mall department recruit front end, recently there are more than ten front end hc, kneels for big guy to throw resume, I directly push real-time feedback progress, interested in email lvdada#youzan.com, or direct wechat hook me wsldd225 understand with more

Open source component library ·zanUI

Original: http://joji.me/en-us/blog/html-attribute-vs-dom-property

It’s easy to confuse attributes and properties when dealing with DOM objects through JS. Document. The getElementById (” test “). The getAttribute (” id “), $(‘ # test). Attr (” id “), the document. The getElementById (” test “). The id and $(‘ # test). Prop (” id “) all have returned to the same id: “test”. In this article I’ll explain the difference between attributes and properties.

Attribute (Features)

  1. Attribute attributes are defined by HTML. All description nodes that appear in HTML tags are attribute attributes.
<div id="test" class="button" custom-attr="1"></div>
Copy the code
document.getElementById('test').attributes;
// return: [custom-attr="hello", class="button",   id="test"]
Copy the code
  1. Attribute is always of the string type. Take the top DIV, for example,document.getElementById('test').getAttribute('custom-attr')or$('#test').attr('custom-attr')Always return “1” as a string.

Property

  1. The property property belongs to the DOM object, which is essentially an object in javascript. We can get and set the properties of a DOM object just like we do with normal objects in JS, and the property property can be of any type.
document.getElementById('test').foo = 1; // Set attribute: foo to number type: 1 document.getelementById ('test').foo; // Get the attribute value,return number: 1
$('#test').prop('foo'); // Use jquery to get attribute values.return number: 1
Copy the code
$('#test').prop('foo', {
   age: 23,
   name: 'John'}); // Set an object named foo with jquery document.getelementById ('test').foo.age; // returnType: 23 document.getelementById ('test').foo.name; // returnType string:"John"
Copy the code

For the original property of a DOM object, such as the name property, no matter what type of value we set, it will return a character type.

In addition, when we get the data property defined by HTML5, the value we get is also a string.

,ele.dataset.id // string 33

  1. Non-custom attributes have a 1:1 mapping relationship with properties, such as ID, class, and title.
<div id="test" class="button" foo="1"></div>
Copy the code
document.getElementById('test').id; // return string: "test"
document.getElementById('test').className; // return string: "button"
document.getElementById('test').foo; // returnUndefined because foo is a custom ATTR featureCopy the code

Note: When we set or get the class via the property property, we need to use **”className”**, because class is the keyword in JS.

The second point is that when we write non-custom attributes in HTML, the DOM object automatically maps the corresponding property

  1. When a non-custom property (attribute) changes, its corresponding attribute (property) changes in most cases.
<div id="test" class="button"></div>
Copy the code
	var div = document.getElementById('test');
   div.className = 'red-input';
   div.getAttribute('class'); // return string: "red-input"
   div.setAttribute('class'.'green-input');
   div.className; // return string: "green-input"
Copy the code
  1. When the corresponding property changes, the value of the attribute property is not the default value and does not change.
<input id="search" value="foo" />
Copy the code
var input = document.getElementById('search');
input.value = 'foo2';
input.getAttribute('value'); // return string: "foo"
Copy the code

** This feature means that we use property correctly most of the time when writing business. When the user input changes, the attribute-value value does not change. Even if JS changes the value, the attribute does not change. This also proves the third point.

  1. Best practices

In javascript we recommend using the property attribute because it’s faster and easier than attribute. In particular, some attributes are supposed to be Booleans. For example: “checked”, “disabled”, “selected”. The browser automatically converts these values to Boolean values and passes them to the property property.

<input id="test" class="blue" type="radio" />
Copy the code

Good practice

// get id
document.getElementById('test').id;
// set class
document.getElementById('test').className = 'red';
// get and set radio control status
document.getElementById('test').checked; // boolean 
document.getElementById('test').checked = true;
$('#test').prop('checked'); // boolean
$('#test').prop('checked'.true);
Copy the code

Bad practice

// get id
document.getElementById('test').getAttribute('id');
// set class
document.getElementById('test').setAttribute('class'.'red');
document.getElementById('test').getAttribute('checked'); // Returns a string'checked'

Copy the code

This article comes from two mouth nanyang, if you have any need to discuss, please contact me.