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

如果您想获得所有属性及其值，可以执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

函数getElementAttrs向对象返回一个对象数组，其中属性名称 - 值对作为对象上的键，以便您可以循环它，或者只是按键拉。

Answer 3

你可以使用.attributes：

document.getElementById("ELEMENT_ID").attributes

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

读取html的元素属性，如数组？

3 个答案: