getAttribute（）與Element對象的屬性？

像Element.getAttribute("id")和Element.id這樣的表達式會返回相同的結果。getAttribute（）與Element對象的屬性？

當我們需要一個HTMLElement對象的屬性時應該使用哪一個？

這些方法有沒有任何跨瀏覽器問題，如getAttribute()和setAttribute()？

或直接訪問對象屬性與使用這些屬性方法之間對性能的任何影響？

2012-04-23 P K

相似的問題：[屬性和HTML]（http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html） – sleske 2013-10-12 18:14:20

101

getAttribute檢索DOM元素的屬性，而el.id檢索此DOM元素的屬性。他們不一樣。

大多數情況下，DOM屬性都與屬性同步。

但是，同步不保證相同的值。一個典型的例子是在錨點元素的el.href和el.getAttribute('href')之間。

例如：

<a href="/" id="hey"></a> 
<script> 
var a = document.getElementById('hey') 
a.getAttribute('href') // "/" 
a.href // Full URL except for IE that keeps '/' 
</script>

此現象的發生是因爲根據W3C，href屬性必須是一個結構良好的鏈路。大多數瀏覽器都尊重這個標準（猜猜誰不？）。

input的checked屬性還有另一種情況。 DOM屬性返回true或false，而屬性返回字符串"checked"或空字符串。

然後，有一些屬性是同步單向只有。最好的例子是input元素的value屬性。通過DOM屬性更改其值不會更改屬性（編輯：檢查更精確的第一個註釋）。

由於這些原因，我建議您繼續使用DOM 屬性，而不是屬性，因爲它們在瀏覽器中的行爲不同。

在現實中，只有兩種情況下，你需要使用的屬性：

自定義HTML屬性，因爲它不是同步到DOM屬性。
要訪問未從屬性同步的內置HTML屬性，並且您確定需要該屬性（例如，input元素的原始value）。

如果您想要更詳細的解釋，我強烈建議您閱讀this page。它只會花你幾分鐘，但你會很高興的信息（我在這裏總結）。

來源

2012-04-23 12:25:02

+1通常很好的建議。儘管如此，同步的東西並沒有什麼意義：輸入的'value'屬性從屬性獲得它的初始值，但是根本不與它綁定。 'value'屬性完全同步，而不是'defaultValue'屬性。同樣'checked'和'defaultChecked'。除了在舊的IE（<= 7和以後的兼容模式）之外，它破壞了'getAttribute（）'和'setAttribute（）'。 – 2012-04-23 12:29:40

添加您的評論作爲「進一步解釋」:-) – 2012-04-23 12:33:20

感謝蒂姆和弗洛裏安:) – 2012-04-23 12:35:17

.id保存了函數調用開銷。（這是非常小的，但你問。）

來源

2012-04-23 12:12:02 gdoron

嗨gdoron，只是爲了好奇：我試圖找到對此的「官方」解釋（超出經驗測試，這足夠清楚了）），但沒有成功。你有任何關於它的鏈接？ – mamoo 2012-04-23 12:19:05

根據this jsPerf testgetAttribute是比id屬性更慢。

奇怪的是這兩個語句在IE8表現非常糟糕（相對於其他瀏覽器）。

來源

2012-04-23 12:13:50 mamoo

基準函數開銷是所有邪惡的根源... – gdoron 2012-04-23 12:19:50

除非有特殊原因，否則請務必使用這些屬性。

getAttribute()和setAttribute()老年IE（和更高版本兼容模式）
性質是更方便的（特別是那些對應於布爾屬性）被破壞

有some exceptions：

訪問<form>元素的屬性
訪問自定義屬性（雖然我不鼓勵使用自定義屬性的話）

我寫有關此主題的幾次上SO：

來源

2012-04-23 12:21:05

在IE 8之前，屬性和屬性[被同等對待]（http://msdn.microsoft.com/en-us/library/dd347148（v = VS.85 ）的.aspx）。正如你之前提到的，房地產是要走的路。 – 2012-04-23 17:21:44

@MattMcDonald：是的，這就是我所指的破碎。我沒有在這個答案中擴展它，因爲我覺得我已經做了足夠的其他答案，我鏈接到:) – 2012-04-23 17:32:52

getAttribute('attribute')通常以字符串的形式返回屬性值，完全如頁面的HTML源代碼中所定義。

但是，element.attribute可能會返回屬性的標準化或計算值。例子：

<a href="/foo"></a>
- a.href將包含全 URL
<input type="checkbox" checked>
- input.checked爲真（布爾）
<input type="checkbox" checked="bleh">
- input.checked爲真（布爾）
<img src='http://dummyimage.com/64x64/000/fff'>
- IMG。寬度將是0（個）加載圖像之前
- img.width將64（編號），當圖像（或它的前幾個字節）加載
<img src='http://dummyimage.com/64x64/000/fff' width="50%">
- IMG .WIDTH將是計算 50％
<img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
- img.width將50（號碼）
<div style='background: lime;'></div>
- div.style將是一個對象

來源

2012-04-23 13:24:05

嘗試例如低於完全理解這一點。對於下面的DIV

<div class="myclass"></div>

的Element.getAttribute('class')將返回myclass但你必須使用Element.className從DOM屬性進行檢索。

來源

2017-03-20 06:20:14 Hrushikesh

一個區域，這是一個很大的區別是基於屬性的CSS樣式。

考慮以下幾點：

const divs = document.querySelectorAll('div'); 
 

 
divs[1].custom = true; 
 
divs[2].setAttribute('custom', true);

div { 
 
    border: 1px solid; 
 
    margin-bottom: 8px; 
 
} 
 

 
div[custom] { 
 
    background: #36a; 
 
    color: #fff; 
 
}

<div>A normal div</div> 
 
<div>A div with a custom property set directly.</div> 
 
<div>A div with a custom attribute set with `setAttribute`</div>

直接設置並不能反映價值的屬性自定義屬性的DIV，而不是由我們的屬性選擇器選擇（div[custom]）在CSS中。

但是，使用setAttribute設置自定義屬性的div可以使用css屬性選擇器進行選擇並進行相應設置。

來源

2017-04-27 00:52:34 Jsilvermist

getAttribute（）與Element對象的屬性？

回答

相關問題