boolean attribute(布爾值屬性) attribute vs property

標籤：nbsp   auto   trail   title   explain   asc   html   ini   pes   

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: 1document.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 jQuerydocument.getElementById(‘test‘).foo.age; // return number: 23document.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 iddocument.getElementById(‘test‘).id;// set classdocument.getElementById(‘test‘).className = ‘red‘;// get and set radio control statusdocument.getElementById(‘test‘).checked;document.getElementById(‘test‘).checked = true;$(‘#test‘).prop(‘checked‘);$(‘#test‘).prop(‘checked‘, true);

Bad practice

// get iddocument.getElementById(‘test‘).getAttribute(‘id‘);// set classdocument.getElementById(‘test‘).setAttribute(‘class‘, ‘red‘);

boolean attribute(布爾值屬性) attribute vs property