javascript中的prop和attr方法的區別

‍

       對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。

例：

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

        這個例子裏<a>元素的DOM屬性有「href、target和class"，這些屬性就是<a>元素自己就帶有的屬性，也是W3C標準裏就包含有這幾個屬性，或者說在IDE裏可以智能提示出的屬性，這些就叫作固有屬性。處理這些屬性時，建議使用prop方法。

<a href="#" id="link1" action="delete">刪除</a>

        這個例子裏<a>元素的DOM屬性有「href、id和action」，很明顯，前兩個是固有屬性，然後面一個「action」屬性是咱們本身自定義上去的，<a>元素自己是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop方法取值和設置屬性值時，都會返回undefined值。 像checkbox，radio和select這樣的元素，選中屬性對應「checked」和「selected」，這些也屬於固有屬性，所以須要使用prop方法去操做才能得到正確的結果。

源碼解釋：

                 attr方法裏面，最關鍵的兩行代碼，elem.setAttribute( name, value + 「」 )和ret = elem.getAttribute( name )，很明顯的看出來，使用的DOM的API setAttribute和getAttribute方法操做的屬性元素節點。而prop方法裏面，最關鍵的兩行代碼，return ( elem[ name ] = value )和return elem[ name ]，你能夠理解成這樣document.getElementById(el)[name] = value，這是轉化成JS對象的一個屬性。

使用提醒：

                    在遇到要獲取或設置checked,selected,readonly和disabled等屬性時，用prop方法顯然更好若是你有JS性能潔癖的話，顯然prop的性能更高，由於attr須要訪問DOM屬性節點，訪問DOM是最耗時的