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

Posted One Place

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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  javascriptdocument.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‘);

以上是关于boolean attribute(布尔值属性) attribute vs property的主要内容,如果未能解决你的问题,请参考以下文章

attribute与property

前端中的attr和prop的区别

javascript类型系统——布尔Boolean类型

SharedPreferences 不保存布尔属性

布尔值是不是与 WCF 合同中的布尔值相同 [关闭]

JavaScript Boolean(布尔) 对象