如何通過循環獲取JavaScript dom中元素的多個屬性的值

Question

我如何從循環中從HTML evlemnt獲取HTML屬性的所有屬性的列表值，現在我有三個attr我想通過循環獲取一個列表中所有三個attr的值，我該怎么做？ 例：

 f1="hi" 
 f2=" how" 
 f3=" are" 
 f4="you"

在按鈕元素中，我想將所有元素放在一起

Answer 1

var elem = document.getElementById("target");

for (var i = 0; i < elem.attributes.length; i++) {
  var attrib = elem.attributes[i];
  alert(attrib.name + " = " + attrib.value);
}

Answer 2

使用element.attributes

  function returnAttributes(el) { return Array.prototype.map.call(el.attributes, function(obj){ return [obj.name, obj.value]; }).sort(function(a, b){ return a[0]-b[0] || a[0].localeCompare(b[0]); }).map(function(a){return a[1];}).join(" "); } document.querySelector("button").addEventListener("click", function(){ var attr = returnAttributes(document.querySelector("button")); alert(attr); }, false); 

 <button f1="How" f2="are" f3="you" f4="doing?" >Test</button> 

它看起來像魔術，但僅執行以下操作：

Element.attributes是一個數組對象。 我們可以使用Array.prototype.map.call循環它。 Map遍歷所有元素，並對它們執行操作。 在這種情況下，返回帶有包含屬性name和value數組對象的數組。 然后，我們使用sort按字母順序對數組進行排序。 我們對屬性名稱進行排序。 我們不想返回屬性的名稱，因此我們使用map再次遍歷數組。 現在僅返回值。 最后，我們使用join返回字符串中的值。

Answer 3

像這樣，

function getValues() {
    var yourElement = document.getElementById("your_element_id");
    var valueArray = [];
    for(var i = 0; i < yourElement.attributes.length; i++) {
        vauleArray.push(yourElement.attributes[i].value);
    }
}