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”]

  2. Attribute is always of the string type. For the DIV above, document.getelementById (‘test’).getAttribute(‘custom-attr’) or $(‘#test’).attr(‘custom-attr’) always returns a “1” of the string type.

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 '); Return number: 1Copy the code

    $(‘#test’).prop(‘foo’, { age: 23, name: ‘John’ }); // Use jquery to set an object named foo document.getelementById (‘test’).foo.age; // return number type: 23 document.getelementById (‘test’).foo.name; // return string Type: “John”

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; // return undefined because foo is a custom attR feature

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>


var div = document.getElementById('test');
Copy the code

    div.className = ‘red-input’; div.getAttribute(‘class’); // return string: “red-input” div.setAttribute(‘class’,’green-input’); div.className; // return string: “green-input”

  2. 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”

** 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'); // Return the string type 'checked'Copy the code