List Attributes of an HTML Element with JS

Question

Talk, you guys, all in peace?

I was looking for a solution on the Internet, but I didn’t find what I needed, nor did I understand a way to do it, if anyone can shed some light?

I would like to list the attributes of an element, using Jquery, for example this input:

<input type="text" name="input1" id="input1" class="class1">

And the way out would be:

object{
    type: "text",
    name: "input1",
    id: "input1",
    class: "class1"
}

Answer 1

You can use the Element.attributes that gives you an eternal object with nodes where you can extract the key and value of each property.

An example would be like this:

const input = document.getElementById('input1');
const attributes = {};
for (let attr of input.attributes) {
  attributes[attr.name] = attr.value; 
}

console.log(attributes) // {type:"text",name:"input1",id:"input1",class:"class1"}

<input type="text" name="input1" id="input1" class="class1">

Answer 2

With jQuery you can extend the method function .attr() to return all attributes of an element:

(function(e){
   $.fn.attr = function(){
      if(!arguments.length){
         if(!this.length) return null;

         var obj = {};
         $.each(this[0].attributes, function(){
            if(this.specified) obj[this.name] = this.value;
         });
         return obj;
      }

      return e.apply(this, arguments);
   }
})($.fn.attr);

var atributos = $("#input1").attr();

console.log(atributos);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" id="input1" class="class1">