Read html's elements attributes like an array?

Question

I'm thinking for develop a web component form, so... I was wondering my self if it's possible read attributes from a html elements. For example:

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

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

I know that I can access through .getAttribute, but this way will take more code... I just want to be something smart :P

Sorry, my english is poor... I hope you can understand what I want to do :P :)

KevBot · Accepted Answer · 2016-05-26 15:17:40Z

1

If you want to get all of the attributes and their values, you can do something like this:

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>

The function getElementAttrs returns an array of objects to you with attribute name-value pairs as keys on the object so that you can loop over it, or just pull by key.

edited May 26, 2016 at 15:17

answered May 26, 2016 at 15:04

KevBot

19k5 gold badges54 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nenad Vracar · Accepted Answer · 2016-05-26 15:36:06Z

1

You can use dataset to get specific data attribute

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>

If you want to return all attributes from element you can use attributes which return array-like object, but you can create object with name-value from that

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>

edited May 26, 2016 at 15:36

answered May 26, 2016 at 14:48

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

1 Comment

KevBot Over a year ago

I think the OP is wanting to get all of the attributes and their values, not just data- attribute values

Chris Wissmach · Accepted Answer · 2016-05-26 14:53:46Z

0

You can just use .attributes:

document.getElementById("ELEMENT_ID").attributes

This will return an object containing each attribute with its associated value. You can then index the attributes array for specific attributes and use .value for it's corresponding value.

answered May 26, 2016 at 14:53

Chris Wissmach

5054 silver badges11 bronze badges

1 Comment

ClaudioZ Over a year ago

Wow... jajajaja it's so simple... i never imagined got all attributes with the method .attributes :P This is just what I need :). Thanks.

Collectives™ on Stack Overflow

Read html's elements attributes like an array?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related