阅读html的elements属性像数组一样吗？

Question

我正在考虑开发Web组件表单，所以...我想知道自己是否可以从html元素中读取属性。 例如：

<my-component input="3" data-input='"name", "address", "email"' textarea="1" data-textarea='"mensaje"'></my-component>

<script>
while i <= elementattributes.length{
elementattributes[i] 
} 
</script>

我知道我可以通过.getAttribute访问，但是这种方式将花费更多的代码...我只是想成为一个聪明的人：P

抱歉，我的英语不好...我希望你能理解我想做的事：P :)

Answer 1

您可以使用dataset获取特定的data属性

 var data = document.querySelector('my-component').dataset.input.split(','); data.forEach(function(e) { console.log(e) }) 

 <my-component input="3" data-input='name,address,email' textarea="1" data-textarea='"mensaje"'></my-component> 

如果要从元素返回所有属性，则可以使用返回类似数组的对象的属性，但是可以从该attributes创建具有name-value对象

 var data = document.querySelector('my-component').attributes, attr = {}; Array.from(data).forEach(function(e) { attr[e.name] = e.value; }); console.log(attr['data-input']); 

 <my-component input="3" data-input='name,address,email' textarea="1" data-textarea='mensaje'></my-component> 

Answer 2

如果要获取所有属性及其值，则可以执行以下操作：

 function getElementAttrs(el) { var attributes = [].slice.call(el.attributes); return attributes.map(function(attr) { return { name: attr.name, value: attr.value } }); } var allAttrs = getElementAttrs(document.querySelector('my-component')); console.log(allAttrs); 

 <my-component input="3" data-input='name,address,email' textarea="1" data-textarea='"mensaje"'></my-component> 

函数getElementAttrs向您返回一个对象数组，其中具有属性名称-值对作为对象上的键，以便您可以在其上循环，也可以按键拉动。

Answer 3

您可以只使用.attributes：

document.getElementById("ELEMENT_ID").attributes

这将返回一个包含每个属性及其关联值的对象。 然后，您可以为特定属性建立属性数组的索引，并使用.value作为其对应的值。