Get all attributes of an element using jQuery

Question

I am trying to go through an element and get all the attributes of that element to output them  for example an  tag may have 3 or more attributes  unknown to me and I need to get the names and values of these attributes  I was thinking something along the lines of     this  attr   each function index  element        var name     this  name      var value     this  value        Do something with name and value          Could anyone tell me if this is even possible  and if so what the correct syntax would be

User · Answer

Here is a one-liner for you  JQuery Users  Replace  jQueryObject with your jQuery object  i e    div    Object values  jQueryObject get 0  attributes  map attr   gt  console log    attr name           attr value       Vanilla Javascript Users  Replace  domElement with your HTML DOM selector  i e document getElementById  demo    Object values  domElement attributes  map attr   gt  console log    attr name           attr value       Cheers

User · Answer

My suggestion     fn attrs   function  fnc        var obj             each this 0  attributes  function             if this name     value   return     Avoid someone  optional          if this specified  obj this name    this value              return obj      var a     el  attrs

User · Answer

The attributes property contains them all     this  each function         each this attributes  function            this attributes is not a plain object  but an array        of attribute nodes  which contain both the name and value     if this specified          console log this name  this value                       What you can also do is extending  attr so that you can call it like  attr   to get a plain object of all attributes    function old        fn attr   function         if arguments length     0          if this length     0            return null                 var obj               each this 0  attributes  function             if this specified              obj this name    this value                            return obj             return old apply this  arguments             fn attr     Usage   var  div       lt div data-a  1  id  b  gt      div attr           data-a    1    id    b

User · Answer

Using javascript function it is easier to get all the attributes of an element in NamedArrayFormat     x000D   x000D      myTestDiv   click function    x000D    var attrs   document getElementById  myTestDiv   attributes  x000D      each attrs function i elem   x000D          attrs   html         attrs   html     lt br gt  lt b gt   elem name   lt  b gt   lt i gt   elem value   lt  i gt     x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt  x000D   lt div id  myTestDiv  ekind  div  etype  text  name  stack  gt  x000D  click This x000D   lt  div gt  x000D   lt div id  attrs  gt Attributes are  lt div gt  x000D   x000D   x000D

User · Answer

A debugging script    jquery solution based on the answer above by hashchange   function getAttributes    node             each   node 0  attributes  function   index  attribute           console log attribute name     attribute value              getAttributes   this        find out what attributes are available

User · Answer

with LoDash you could simply do this     transform this attributes  function  result  item      item specified  amp  amp   result item name    item value

User · Answer

Here is an overview of the many ways that can be done  for my own reference as well as yours    The functions return a hash of attribute names and their values   Vanilla JS   function getAttributes   node         var i          attributeNodes   node attributes          length   attributeNodes length          attrs            for   i   0  i  lt  length  i     attrs attributeNodes i  name    attributeNodes i  value      return attrs      Vanilla JS with Array reduce  Works for browsers supporting ES 5 1  2011   Requires IE9   does not work in IE8   function getAttributes   node         var attributeNodeArray   Array prototype slice call  node attributes         return attributeNodeArray reduce  function   attrs  attribute             attrs attribute name    attribute value          return attrs                   jQuery  This function expects a jQuery object  not a DOM element   function getAttributes    node         var attrs             each   node 0  attributes  function   index  attribute             attrs attribute name    attribute value                return attrs      Underscore  Also works for lodash   function getAttributes   node         return   reduce  node attributes  function   attrs  attribute             attrs attribute name    attribute value          return attrs                   lodash  Is even more concise than the Underscore version  but only works for lodash  not for Underscore  Requires IE9   is buggy in IE8  Kudos to  AlJey for that one   function getAttributes   node         return   transform  node attributes  function   attrs  attribute             attrs attribute name    attribute value                   Test page  At JS Bin  there is a live test page covering all these functions  The test includes boolean attributes  hidden  and enumerated attributes  contenteditable

User · Answer

Simple solution by Underscore js  For example  Get all links text who s parents have class someClass    pluck     someClass   find  a     text      Working fiddle

[javascript] Get all attributes of an element using jQuery

JQuery Users:

Vanilla Javascript Users:

Examples related to javascript

Examples related to jquery

Examples related to attributes