Question

是否有一个快捷方式函数将DOM元素及其各种属性/值对转换为相应的Javascript对象？

例如，在HTML页面中转换它：

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

到Javascript中的对象，就好像你输入了一样：

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

Answer 1

不是真正的捷径，但至少是一个能够做你想做的简短实现：

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

在更具功能性的风格中，有一个陈述：

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

Answer 3

为什么不使用HTML数据和JQuery？

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

sample code

我不确定你是否被允许使用jQuery

将DOM元素的属性/值对转换为Javascript对象？

3 个答案: