如何通过循环获取JavaScript dom中元素的多个属性的值

How to get the value of more than one attribute of element in JavaScript dom via loop

本文关键字：属性 元素 循环 何通过 获取 JavaScript dom      更新时间：2023-09-26

我如何通过循环从 HTML evlemnt 获取所有属性的列表值现在从我的代码中，我有三个 attr，我想通过循环在一个列表中获取所有三个 attr 的值，我该怎么做？例：

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

在按钮元素中，我想将它们放在一起

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

像这样，

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);
    }
}

使用 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的数组对象。然后我们使用排序按字母顺序对数组进行排序。我们根据属性的名称进行排序。我们不想返回属性的名称，所以我们使用 map 再次遍历数组。现在只返回值。最后，我们使用 join 返回字符串中的值。

相关文章：