如何獲得HTML的非DOM屬性在Javascript

說一個HTML網頁摘要：如何獲得HTML的非DOM屬性在Javascript

<div a_example = "x" b_example = "y" class = "z"></div>

什麼是正確的方式來獲得的a_example和相應的屬性b_example在Javascript？

xpath可以完成這項工作嗎？

來源

2012-11-06 novice3

使用getAttribute：

var elem = document.getElementsByClassName("z")[0], 
    a = elem.getAttribute("a_example");

這是working example。

但是，如前所述，您應該真正使用HTML5 data-*屬性，否則您的標記無效。

來源

2012-11-06 10:45:47

謝謝。對我遺忘這件事感到羞恥。 – novice3

你應該看看HTML5數據屬性，這裏是一個有用的文章：從標籤http://html5doctor.com/html5-custom-data-attributes/

讀取數據的屬性是很容易，並且回退可用於舊的瀏覽器。從文章中的一個例子：

<div id="sunflower" data-leaves="47" data-plant-height="2.4m"></div> 

<script> 
// 'Getting' data-attributes using dataset 
var plant = document.getElementById('sunflower'); 
var leaves = plant.dataset.leaves; // leaves = 47; 
</script>

來源

2012-11-06 10:43:59

謝謝。我主要使用javascript編寫userscript來修改頁面，所以更改HTML本身對我來說不是真正的可用選擇。不管怎麼說，還是要謝謝你。 – novice3

如果您正在使用jQuery，它是作爲簡單的話說：

HTML

<div id="testDiv" a_example = "x" b_example = "y" class = "z"></div>

的Javascript：

var attr1 = $('#testDiv').attr('a_example');

來源

2012-11-06 10:44:36

你真的不需要整個庫來完成這麼簡單的任務。 –

@JonKoops我知道。我說的很明顯。有些方法可以使用「傳統」方式來實現。我會在這裏列出他們。 –

我瞭解你的立場。然而，我認爲給一個'只用這個圖書館'的答案是危險的。它會讓人問這個問題依賴於一個庫而不理解底層API。 –

element.getAttribute(attributename)

這應該適合你。

來源

2012-11-06 10:45:55 Ankur

有些瀏覽器會將所有屬性添加爲DOM元素的命名屬性，其他瀏覽器只會添加標準屬性。在這兩種情況下，您都可以使用getAttribute獲得非標準屬性，但不建議使用這種方案。

通常使用標準屬性和DOM屬性，並且只在必要時使用getAttribute，因爲它在不同的瀏覽器中不一致地實現。

來源

2012-11-06 10:47:26 RobG

我同意你應該看看數據屬性和更好的方法來添加非標準屬性，但這裏是對你的問題的'原始的'答案，但我不會將其視爲普遍支持（或可取的）：

alert(document.getElementsByTagName('div')[0].getAttribute('b_example'));

來源

2012-11-06 10:47:55

如何獲得HTML的非DOM屬性在Javascript

回答

相關問題