Konvertieren Sie Attribut/Wert-Paare eines DOM-Elements in ein Javascript-Objekt?

Question

Gibt es eine Shortcut-Funktion, die ein DOM-Element und seine verschiedenen Attribut/Wert-Paare in ein entsprechendes Javascript-Objekt umwandelt?

Konvertieren Sie dies z.B. in die HTML-Seite:

<div id="snack" type="apple" color="red" size="large" quantity=3></div>

zu einem Objekt in Javascript, als ob Sie getippt hätten:

var obj = {
        id:  "snack"
        type: "apple"
        color: "red"
        size: "large"
        quantity: 3
};

Answer 1

Nicht wirklich eine Abkürzung, aber zumindest eine kurze Implementierung, die das Gewünschte bewirkt:

var attributes = document.getElementById('someId').attributes;
var obj = {};

for (var i = 0, len = attributes.length; i < len; i++) {
    obj[attributes[i].name] = attributes[i].value;
}

Answer 2

In einem eher funktionalen Stil, eine Aussage:

[].slice.call(attributes).reduce(function(obj,attr){obj[attr.name] = attr.value;return obj;},{})

Answer 3

Warum nicht HTML-Daten und JQuery verwenden?

// First, append the attributes with `data-`. 
<div id="snack" data-type="apple" data-color="red" 
     data-size="large" data-quantity="3"></div> 

// Then use jQuery to retrive the data, for this case, 
// the `snack` variable is populated
var snack = $("#snack").data();

for(prop in snack) {
    alert(prop + " => " + snack[prop]);
}

Beispielcode

Ich bin nicht sicher, ob Sie jQuery verwenden dürfen.

Answer 4

So würde ich es im Jahr 2021 machen.

let attributes = document.getElementById('snacks').attributes
let obj = [...attributes].reduce((o,a)=>{ o[a.name] = a.value; return o},{})