boolean attribute(布尔值属性) attribute vs property

boolean attribute(布尔值属性)

boolean attribute     HTML - Why boolean attributes do not have boolean value?     Boolean HTML Attributes   HTML Boolean Attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.(html标签上这个tag出现就代表是true，没有这个tag就是false，与这个tag的具体的值没有关系)

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

setAttribute("selected", false)  will not word. null, empty string or undefined don't work either

布尔值属性的添加与删除，需要用到setAttribute()和removeAttribute()

Some attributes play the role of boolean variables (e.g., the selected attribute for the OPTION element). Their appearance in the start tag of an element implies that the value of the attribute is "true". Their absence implies a value of "false".

Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").

This example defines the selected attribute to be a boolean attribute.

selected     (selected)  #IMPLIED  -- option is pre-selected --

The attribute is set to "true" by appearing in the element's start tag:

<OPTION selected="selected">
...contents...
</OPTION>

In HTML, boolean attributes may appear in minimized form -- the attribute's value appears alone in the element's start tag. Thus, selected may be set by writing:

<OPTION selected>

instead of:

<OPTION selected="selected">

Authors should be aware that many user agents only recognize the minimized form of boolean attributes and not the full form.

attribute vs  property

HTML - attributes vs properties [duplicate]

Attributes are defined by HTML. Properties are defined by DOM.(attributes属于html范畴，property属于dom范畴)

Some HTML attributes have 1:1 mapping onto properties. id is one example of such.

Some do not (e.g. the value attribute specifies the initial value of an input, but the value property specifies the current value).

JavaScript: What's the difference between HTML attribute and DOM property?

It is easy to confuse attribute with property when manipulating DOM object by  JavaScript. document.getElementById('test').getAttribute('id'), $('#test').attr('id'), document.getElementById('test').id and $('#test').prop('id') return the same id: "test". In this article, I will explain the differences between attribute and property.

Attribute

1. Attributes are defined by HTML, all definitions inside HTML tag are attributes.

   <div id="test" class="button" custom-attr="1"></div>
   

   document.getElementById('test').attributes;
   // return: [custom-attr="hello", class="button", id="test"]
   

2. The type of attributes is always string. For the DIV above, document.getElementById('test').getAttribute('custom-attr') or $('#test').attr('custom-attr') returns string: "1".

Property

1. Properties belong to DOM, the nature of DOM is an object in JavaScript(DOM本质上来讲可以当做js中的普通对象来对待). We can get and set properties as we do to a normal object in JavaScript and properties can be any types.

   document.getElementById('test').foo = 1; // set property: foo to a number: 1
   document.getElementById('test').foo; // get property, return number: 1
   $('#test').prop('foo'); // read property using jQuery, return number: 1
   

   $('#test').prop('foo', {
       age: 23,
       name: 'John'
   }); // set property foo to an object using jQuery
   document.getElementById('test').foo.age; // return number: 23
   document.getElementById('test').foo.name; // return string: "John"
   

2. Non-custom attributes have 1:1 mapping onto properties(非自定义的attribute, 在property都会一一对应), like: id, class, title, etc.

   <div id="test" class="button" foo="1"></div>
   

   document.getElementById('test').id; // return string: "test"
   document.getElementById('test').className; // return string: "button"
   document.getElementById('test').foo; // return undefined as foo is a custom attribute
   

   Notice: We need to use "className" when get and set "class" by property because "class" is a JavaScript reserved word.

3. Non-custom propertiy (attribute) changes when corresponding attribute (property) changes in most cases(大多数情况下，proerty和attribute是相对应的变化).

   <div id="test" class="button"></div>
   

   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"
   

4. Attribute which has a default value doesn't change when corresponding property changes(但是attribute有默认值的并不会随着property变化).

   <input id="search" value="foo" />
   

   var input = document.getElementById('search');
   input.value = 'foo2';
   input.getAttribute('value'); // return string: "foo"
   

Best Practice

推荐使用dom的property，不使用html的attribute

It is recommended to use property in JavaScript as it's much easier and faster. Especially for boolean type attributes like: "checked", "disabled" and "selected", browser automatically converts them into boolean type properties.

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

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;
document.getElementById('test').checked = true;
$('#test').prop('checked');
$('#test').prop('checked', true);

Bad practice

// get id
document.getElementById('test').getAttribute('id');
// set class
document.getElementById('test').setAttribute('class', 'red');