摘要：最近，一個(gè)小伙伴問了我一個(gè)問題和的區(qū)別當(dāng)時(shí)我想了又想，很不好意思的說了我不知道，所以，抽了個(gè)事件好好的利用了一下度娘和總結(jié)了一下。

最近，一個(gè)小伙伴問了我一個(gè)問題property和attribute的區(qū)別？當(dāng)時(shí)我想了又想，很不好意思的說了我不知道，所以，抽了個(gè)事件好好的利用了一下‘度娘’和‘Google’總結(jié)了一下。度娘搜索到的有用信息知乎中的討論csdn搜索的結(jié)果，Google發(fā)現(xiàn)的有用信息，lucy女神的解釋 JOJI.ME中的解釋通過查看這些我們發(fā)現(xiàn)要分辨property和attribute并非那么難。

property它是相對(duì)于對(duì)象本身來說的，本身就是對(duì)象的組成部分，也可以說是對(duì)象本身

property用人來類比就好像是人有眼，手，耳等器官一樣，人生而有之（先天的）

attribute它是相對(duì)于對(duì)象來說的，本身只是對(duì)對(duì)象的一種說明，就好像是我們?cè)谂笥丫蹠?huì)時(shí)對(duì)彼此不認(rèn)識(shí)的伙伴的介紹一樣。

attribute用人來類比就好像是人有名字，學(xué)歷，女朋友等（后天的）

property 是有類型的，例如Bollean，number，string等

attribute 只能是string，而沒有其他類型

使用過jQuery的同學(xué)都知道，在jQuery中有.prop()和.attr()這樣兩個(gè)鉤子函數(shù)，有相當(dāng)一部分同學(xué)只是知道有這樣兩個(gè)方法，但該如何的使用一些同學(xué)還是傻傻的分也分不清楚？對(duì)于那些說只要會(huì)用能解決問題就行了的觀點(diǎn)，我也只能一笑而過。

// dom

    男
    女

在示例中input元素的type，checked，name都是input元素對(duì)象的property，我們可以像給一半元素對(duì)象賦值一樣修改input的對(duì)象的property,通過下面的代碼：

document.querySelectorAll("input")[1].type = "text"

會(huì)得到這樣的結(jié)果

document.querySelectorAll("input")[0].setAttribute("type", "text")

attribute修改會(huì)得到這樣的結(jié)果

我們發(fā)現(xiàn)結(jié)果都改變了input對(duì)象的類型，難道是巧合，確實(shí)是巧合，因?yàn)閜rop和attr都可以設(shè)置字符串的屬性，因?yàn)槭亲址远计鹦?/p>

如果我們修改checked的值將只有prop起作用，因?yàn)閏hecked的屬性值是Boolean類型的如下圖

document.querySelectorAll("input")[0].checked = false

document.querySelectorAll("input")[1].setAttribute("checked", false)

我們發(fā)現(xiàn) setAttribute("checked", false)并不是不起作用，而是被選中了，說明了什么，說明了input元素對(duì)象將checked值設(shè)為了‘false’字符串，而在js中非空的String類型會(huì)根據(jù)執(zhí)行的語境別轉(zhuǎn)換類型為Boolean類型true

jquery version 3.2.1

.prop()原碼分析

jQuery.fn.extend( {
    prop: function( name, value ) {
        return access( this, jQuery.prop, name, value, arguments.length > 1 );
    },

    removeProp: function( name ) {
        return this.each( function() {
            // 刪除名字為name的property
            delete this[ jQuery.propFix[ name ] || name ];
        } );
    }
} );

jQuery.extend( {
    prop: function( elem, name, value ) {
        ...
        if ( value !== undefined ) {
            ...
            // 為名字為name的property屬性賦值
            return ( elem[ name ] = value );
        }
        ...
        // 返回名字為name的property屬性
        return elem[ name ];
    },
    ...
} );

.attr()源碼分析

jQuery.fn.extend( {
    attr: function( name, value ) {
        return access( this, jQuery.attr, name, value, arguments.length > 1 );
    },

    removeAttr: function( name ) {
        return this.each( function() {
            jQuery.removeAttr( this, name );
        } );
    }
} );

jQuery.extend( {
    attr: function( elem, name, value ) {
        ...
        if ( value !== undefined ) {
            if ( value === null ) {
                jQuery.removeAttr( elem, name );
                return;
            }

            if ( hooks && "set" in hooks &&
                ( ret = hooks.set( elem, value, name ) ) !== undefined ) {
                return ret;
            }

            elem.setAttribute( name, value + "" );
            return value;
        }

        if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
            return ret;
        }            
        // 取得并返回名字為name的attribute
        ret = jQuery.find.attr( elem, name );
        return ret == null ? undefined : ret;
    },
    ...
    removeAttr: function( elem, value ) {
        ...
        if ( attrNames && elem.nodeType === 1 ) {
            while ( ( name = attrNames[ i++ ] ) ) {
                // 元素elem刪除名字為name的attribute
                elem.removeAttribute( name );
            }
        }
    }
} );

從上面的實(shí)例代碼我們不難看出jQuery源碼對(duì)attribute和property的創(chuàng)建和刪除進(jìn)行了嚴(yán)格的區(qū)分，attribute的創(chuàng)建和刪除用setAttribute(), getAttribute();而property的創(chuàng)建和刪除使用的方式跟一般對(duì)象一致，obj[name] = [value] 創(chuàng)建并賦值，delete obj[name] 則刪除

通過上面的示例我們發(fā)現(xiàn)setAttribute()也可以對(duì)一些property進(jìn)行修改，這一點(diǎn)我們稍后再說，但無疑jQuery的做法把開發(fā)變得簡單了起來，

通過上一小節(jié)的代碼我們知道，我們可以通過兩種方式向dom對(duì)象的屬性來賦值。

1.像給一半的js對(duì)象那樣給dom對(duì)象的屬性賦值，取值跟一般對(duì)象一樣；

2.通過setAttribute()為dom對(duì)象賦值，取值通過getAttribute()

第一種方法可以為dom對(duì)象賦值和取值，但能反應(yīng)在瀏覽器dom結(jié)構(gòu)中的只有元素自帶的屬性

第二種方法不僅可以為dom對(duì)象賦值和取值，還可以在瀏覽器的dom結(jié)構(gòu)中來顯示自定義的dom對(duì)象屬性

下面是一張示例圖：

jQuery作為一代經(jīng)典的前端庫，我們?cè)?jīng)在判斷input單選和復(fù)選框是否被選中
用if(doucment.querySelector("input").checked)，現(xiàn)在用if($("input").prop(
"checked"))

jQuery對(duì)prop()和attr()做了嚴(yán)格的區(qū)分，prop就是對(duì)象的屬性，attr就是描述屬性

糾錯(cuò)：type屬性兩方法以均可獲取和設(shè)置相應(yīng)的值

圖片來源于：https://stackoverflow.com/questions/5874652/prop-vs-attr/5884994#5884994

在定義自定義屬性是建議為 data-[屬性名] 這種形式，相信寫過jQuery插件或修改研究過 jQuery插件的同學(xué)都不陌生。

DOM property 和 HTML attribute

通過document.querySelector[0].attributes 可以獲取dom對(duì)象的所有attribute屬性

有些自定義的attribute，也可通過(.)這種方式來獲取

注：要深入了解的同學(xué)可以看一看

文章來源于https://github.com/lvzhenbang/article/blob/master/js/porp-attr.md