HTML attribute 和 DOM property 的區別
- Home
- Programming >Front end >Javascript
- HTML attribute 和 DOM property 的區別
文章目錄
前言
jQuery物件有兩個方法$(selector).prop()
和$(selector).attr()
，這兩個方法分別對應DOM
物件的property
屬性和HTML
標籤的attribute
。那麼property
和attribute
之間有什麼區別呢，一般為了區分我們把property
翻譯為屬性，而把attribute
翻譯為特性。在JS
中這兩者還是存在一定的差異的。
語意
property
我們可以理解為事物本身的屬性，與身俱來的，比如我們的頭髮是蛋白質構成的，那麼蛋白質可以稱為一個屬性，這不可改變，改變了頭髮就不是頭髮了。
attribute
可以認為是附加在物體上的一些特性，比如我們可以改變頭髮的物理形狀，燙卷拉直，或者改變頭髮的顏色，這樣頭髮還是頭髮，但是外觀變了。
在前端領域，我們可以認為property
是一個DOM
物件建立的時候就會初始化在物件中的一些屬性（我們也可以自定義屬性），而attribute
是附在HTML
文件中的某個元素上的特性，我們可以改變刪除自定義一個特性，但是對property
不可以，對於DOM
內建的屬性我們無法刪除，也只能按照規定型別賦值，並且內建屬性會在每次DOM
物件初始化的時候產生，比如name
屬性，無論我們設定什麼型別的值，最後返回的都是字元型別。但是對於我們自定義的DOM
屬性，則可以是任何JS
支援的資料型別，而attribute
的資料型別只能是字串。
node.getAttribute(attr)
中的引數attr
是大小寫不敏感的。
兩者之間的關係
對於非自定義的attribute
特性，它和property
之間有一一對應的關係，比如：id
，class
，title等
。
<div id="test" class="button" foo="1"></div>
<script>
document.getElementById('test').id; // return string: "test"
document.getElementById('test').className; // return string: "button"
document.getElementById('test').foo; // return undefined 因為foo是一個自定義的attr特性
</script>
當我們通過property
屬性進行設定或獲取class
時，我們需要使用className
，因為在js
中class
是關鍵字。
DOM
物件內建的property
改變的時候通常對應的attribute
也會改變。
<div id="test" class="button"></div>
<script>
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"
</script>
一些特殊情況
href
當我們在HTML
中設定元素的href
屬性的時候，getAttribute()
方法返回的是我們設定的字串，不管這是一個相對路徑還是絕對路徑，而node.href
屬性則是獲得的能夠訪問的絕對路徑。
input
的value
當我們在HTML
中設定input
的value
的時候，這個value
只是給了input
一個初始化的值，property
也被這個值初始化，但當我們改變property
的時候，元素內的文字會被改變，但是attribute
的value
是不變的，它相當於儲存這這個元素的初始化狀態。
布林型屬性
因為attribute
的值只能是字串，當我們設定的attribute
預設是一個布林型的值的時候，不論我們是否設定值以及設定什麼值，他的初始化值都是true
，比如disabled
和checked
。並且我們只能通過property
來修改他們。
如何使用
對於非自定義attribute
使用property
是一種比較安全並且有效率的做法，雖然對於id
，class
等會跟隨property
一起變化的屬性我們也可以用getAttribute()
或者setAttribute()
，不過顯然property
是更好的選擇。對於自定義屬性，我們只能選擇用attribtue
的方法。