Get all Attributes from a HTML element with Javascript jQuery

Question

I want to put all attributes in a Html element into an array  like i have a jQuery Object  whichs html looks like this    lt span name  test  message  test2  gt  lt  span gt    now one way is to use the xml parser described here  but then i need to know how to get the html code of my object   the other way is to make it with jquery  but how  the number of attributes and the names are generic   Thanks  Btw  I can t access the element with document getelementbyid or something similar

User · Answer

In javascript   var attributes  var spans   document getElementsByTagName  span    for var s in spans     if  spans s  getAttribute  name        test          attributes   spans s  attributes       break          To access the attributes names and values   attributes 0  nodeName attributes 0  nodeValue

User · Answer

Every answer here is missing the simplest solution using the getAttributeNames element method   It retrieves the names of all the element s current attributes as a regular Array  that you can then reduce to a nice object of keys values    x000D   x000D  const getAllAttributes   el   gt  el x000D     getAttributeNames   x000D     reduce  obj  name    gt     x000D         obj  x000D       name   el getAttribute name  x000D            x000D   x000D  console log getAllAttributes document querySelector  div     x000D   lt div title  hello  className  foo  data-foo  bar  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Element prototype getA   function  a            if  a                return this getAttribute a             else               var o                   for let a of this attributes                   o a name  a value                            return o                    having  lt div id  mydiv  a  1  b  2  gt     lt  div gt  can use  mydiv getA       id  mydiv  a  1  b  2

User · Answer

If you just want the DOM attributes  it s probably simpler to use the attributes node list on the element itself   var el   document getElementById  someId    for  var i   0  atts   el attributes  n   atts length  arr       i  lt  n  i         arr push atts i  nodeName       Note that this fills the array only with attribute names  If you need the attribute value  you can use the nodeValue property   var nodes     values     for  var att  i   0  atts   el attributes  n   atts length  i  lt  n  i         att   atts i       nodes push att nodeName       values push att nodeValue

User · Answer

Attributes to Object conversion   Requires  lodash  function getAttributes element  parseJson false       let results          for  let i   0  n   element attributes length  i  lt  n  i             let key   element attributes i  nodeName replace  -                let value   element attributes i  nodeValue         if parseJson               try                  if   isString value                   value   JSON parse value                catch e                         set results  key  value            return results     This will convert all html attributes to a nested object  Example HTML   lt div custom-nested-path1  value1  custom-nested-path2  value2  gt  lt  div gt   Result   custom  nested  path1  value1  path2  value2      If parseJson is set to true json values will be converted to objects

User · Answer

Use  slice to convert the attributes property to Array  The attributes property of DOM nodes is a NamedNodeMap  which is an Array-like object   An Array-like object is an object which has a length property and whose property names are enumerated  but otherwise has its own methods and does not inherit from Array prototype  The slice method can be used to convert Array-like objects to a new Array    x000D   x000D  var elem    document querySelector   name test     x000D      attrs   Array prototype slice call elem attributes   x000D   x000D  console log attrs   x000D   lt span name  test  message  test2  gt See console  lt  span gt  x000D   x000D   x000D

User · Answer

Much more concise ways to do it   Old way  IE9     var element   document querySelector                slice call element attributes  map function  attr    return attr nodeName        ES6 way  Edge 12         document querySelector            attributes  map attr   gt  attr nodeName      document querySelector   returns the first Element within the document that matches the specified selector  Element attributes returns a NamedNodeMap object containing the assigned attributes of the corresponding HTML element     map   creates a new array with the results of calling a provided function on every element in the calling array    Demo    x000D   x000D  console log  x000D        document querySelector  img   attributes  map attr   gt  attr nodeName  x000D     x000D     Output console formatting    x000D   as-console-wrapper   position  absolute  top  0    x000D   lt img src       alt       height       width        gt  x000D   x000D   x000D

User · Answer

Imagine you ve got an HTML element like below    lt a class  toc-item     href   books n ukhta2333 s5      id  book-link-29   gt     Chapter 5  Conclusions and recommendations  lt  a gt    One way you can get all attributes of it is to convert them into an array   const el   document getElementById  book-link-29   const attrArray   Array from el attributes      Now you can iterate all the attributes and do whatever you need  const attributes   attrArray reduce  attrs  attr    gt        attrs         amp  amp   attrs             attrs       attr nodeName     attr nodeValue        return attrs        console log attributes    And below is the string that what you ll get  from the example   which includes all attributes   class  toc-item  href   books n ukhta2333 s5   id  book-link-29

User · Answer

Very simple  You just need to loop over the attributes element and push their nodeValues into an array   let att   document getElementById  id     let arr   Array     for  let i   0  i  lt  att attributes length  i          arr push att attributes i  nodeValue       If want the name of the attribute you can replace  nodeValue  for  nodeName    let att   document getElementById  id     let arr   Array     for  let i   0  i  lt  att attributes length  i          arr push att attributes i  nodeName

User · Answer

Setter and Getter    function             Attrs       fn attrs   function attrs            var t     this           if  attrs                   Set attributes             t each function i  e                    var j     e                   for  var attr in attrs                        j attr attr  attrs attr                                                  return t            else                  Get attributes             var a                       r   t get 0               if  r                    r   r attributes                  for  var i in r                        var p   r i                       if  typeof p nodeValue      undefined   a p nodeName    p nodeValue                                              return a                      jQuery     Use      Setter     element   attrs        name     newName        id     newId        readonly   true         Getter var attrs       element   attrs

User · Answer

Simple   var element      span name  test        element 0  attributes  each function     console log this nodeName     this nodeValue

User · Answer

Roland Bouman s answer is the best  simple Vanilla way  I noticed some attempts at jQ plugs  but they just didn t seem  full  enough to me  so I made my own  The only setback so far has been inability to access dynamically added attrs without directly calling elm attr  dynamicAttr    However  this will return all natural attributes of a jQuery element object   Plugin uses simple jQuery style calling     elm  getAttrs       OR   getAttrs elm     You can also add a second string param for getting just one specific attr  This isn t really needed for one element selection  as jQuery already provides   elm  attr  name    however  my version of a plugin allows for multiple returns  So  for instance  a call like    getAttrs       class      Will result in an array    return of objects     Each object will look like     class   classes names   elm    elm   index  i      index is   elm  index     Plugin     function            getAttrs       extend           getAttrs  function                 var a   arguments                  d  b              if  a length                  for  x in a  switch  typeof a x                         case  object                           a x  instanceof jQuery  amp  amp   b   a x                            break                      case  string                           b   d     d   a x     b     a x                                 if  b instanceof jQuery                    var e                       if  1    b length                        for  var f   0  g   b 0  attributes  h   g length  f  lt  h  f    a   g f   e a name    a value                      b data  attrList   e                       d  amp  amp   all     d  amp  amp   e   b attr d                     else d  amp  amp   all     d   b each function a                        a                             elm    this                           index    this  index                                              a d      this  attr d                       e push a                       b each function a                         elmRet                           for  var b   0  d   this attributes  f   d length  b  lt  f  b    a   d b    elmRet a name    a value                      e push                           elm    this                           index    this  index                            attrs   elmRet                                               this  data  attrList   e                                      return e                           return  Error  Cannot find Selector                      fn extend           getAttrs  function                 var a      this                if  arguments length                  for  x in arguments  a push arguments x                return   getAttrs apply    a                       jQuery     Complied     function c  c getAttrs   c extend  getAttrs function   var a arguments d b if a length for x in a switch typeof a x   case  object  a x instanceof jQuery amp  amp  b a x   break case  string  b d   d a x   b c a x   if b instanceof jQuery  if 1  b length  for var e    f 0 g b 0  attributes h g length f lt h f   a g f  e a name  a value b data  attrList  e  d amp  amp  all   d amp  amp  e b attr d   for x in e e length   else e    d amp  amp  all   d b each function a  a  elm c this  index c this  index    a d  c this  attr d  e push a    b each function a   elmRet    for var b 0 d this attributes f d length b lt f b   a d b   elmRet a name  a value e push  elm c this  index c this  index   attrs  elmRet   c this  data  attrList  e  for x in  elmRet  elmRet length     return e return Error  Cannot find Selector     c fn extend  getAttrs function   var a  c this   if arguments length for x in arguments a push arguments x   return c getAttrs apply c a        jQuery     jsFiddle   x000D   x000D      BEGIN PLUGIN     x000D     function      x000D     getAttrs       extend   x000D    getAttrs  function     x000D     var a   arguments  x000D      c  b  x000D     if  a length  x000D      for  x in a  switch  typeof a x     x000D       case  object   x000D        a x  instanceof f  amp  amp   b   a x    x000D        break  x000D       case  string   x000D        b   c     c   a x     b     a x   x000D        x000D     if  b instanceof f    x000D      if  1    b length    x000D       for  var d       e   0  g   b 0  attributes  h   g length  e  lt  h  e    a   g e   d a name    a value  x000D       b data  attrList   d   x000D       c  amp  amp   all     c  amp  amp   d   b attr c    x000D       for  x in d  d length   x000D        else d       c  amp  amp   all     c   b each function a    x000D       a     x000D        elm    this   x000D        index    this  index   x000D          x000D       a c      this  attr c   x000D       d push a  x000D           b each function a    x000D        elmRet       x000D       for  var b   0  c   this attributes  e   c length  b  lt  e  b    a   c b    elmRet a name    a value  x000D       d push   x000D        elm    this   x000D        index    this  index    x000D        attrs   elmRet x000D           x000D         this  data  attrList   d   x000D       for  x in  elmRet   elmRet length   x000D          x000D      return d x000D       x000D     return  Error  Cannot find Selector  x000D      x000D         fn extend   x000D    getAttrs  function     x000D     var a      this    x000D     if  arguments length  x000D      for  x in arguments  a push arguments x    x000D     return   getAttrs apply    a  x000D      x000D       x000D     jQuery   x000D      END PLUGIN     x000D    --------------------   x000D      bob   attr  bob    bill    x000D  console log     bob    x000D  console log new Array 50  join   -     x000D  console log     bob   getAttrs  id     x000D  console log new Array 50  join   -     x000D  console log   getAttrs   bob     x000D  console log new Array 50  join   -     x000D  console log   getAttrs   bob    name     x000D  console log new Array 50  join   -     x000D  console log   getAttrs       class     x000D  console log new Array 50  join   -     x000D  console log   getAttrs  p     x000D  console log new Array 50  join   -     x000D  console log     bob   getAttrs  all     x000D  console log        getAttrs  all     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D  All of below is just for stuff for plugin to test on  See developer console for more details  x000D   lt hr   gt  x000D   lt div id  bob  class  wmd-button-bar  gt  lt ul id  wmd-button-row-27865269  class  wmd-button-row  style  display none   gt  x000D   lt div class  post-text  itemprop  text  gt  x000D   lt p gt Roland Bouman s answer is the best  simple Vanilla way  I noticed some attempts at jQ plugs  but they just didn t seem  full  enough to me  so I made my own  The only setback so far has been inability to access dynamically added attrs without directly calling  lt code gt elm attr  dynamicAttr   lt  code gt   However  this will return all natural attributes of a jQuery element object  lt  p gt  x000D   x000D   lt p gt Plugin uses simple jQuery style calling  lt  p gt  x000D   x000D   lt pre class  default prettyprint prettyprinted  gt  lt code gt  lt span class  pln  gt   lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt elm lt  span gt  lt span class  pun  gt    lt  span gt  lt span class  pln  gt getAttrs lt  span gt  lt span class  pun  gt     lt  span gt  lt span class  pln  gt  x000D   lt  span gt  lt span class  com  gt    OR lt  span gt  lt span class  pln  gt  x000D    lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt getAttrs lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt elm lt  span gt  lt span class  pun  gt    lt  span gt  lt  code gt  lt  pre gt  x000D   x000D   lt p gt You can also add a second string param for getting just one specific attr  This isn t really needed for one element selection  as jQuery already provides  lt code gt   elm  attr  name   lt  code gt   however  my version of a plugin allows for multiple returns  So  for instance  a call like lt  p gt  x000D   x000D   lt pre class  default prettyprint prettyprinted  gt  lt code gt  lt span class  pln  gt   lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt getAttrs lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  str  gt     lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt   lt  span gt  lt span class  str  gt  class  lt  span gt  lt span class  pun  gt    lt  span gt  lt  code gt  lt  pre gt  x000D   x000D   lt p gt Will result in an array  lt code gt    lt  code gt  return of objects  lt code gt    lt  code gt   Each object will look like  lt  p gt  x000D   x000D   lt pre class  default prettyprint prettyprinted  gt  lt code gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt   lt  span gt  lt span class  kwd  gt class lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt   lt  span gt  lt span class  str  gt  classes names  lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt  elm lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt    lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt elm lt  span gt  lt span class  pun  gt    lt  span gt  lt span class  pln  gt  index lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt  i  lt  span gt  lt span class  pun  gt   lt  span gt  lt span class  pln  gt   lt  span gt  lt span class  com  gt    index is   elm  index   lt  span gt  lt  code gt  lt  pre gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

Does this help   This property returns all the attributes of an element into an array for you  Here is an example    x000D   x000D  window addEventListener  load   function     x000D    var result   document getElementById  result    x000D    var spanAttributes   document getElementsByTagName  span   0  attributes  x000D    for  var i   0  i    spanAttributes length  i      x000D      result innerHTML    spanAttributes i  value        x000D      x000D      x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D    To get the attributes of many elements and organize them  I suggest making an array of all the elements that you want to loop through and then create a sub array for all the attributes of each element looped through   This is an example of a script that will loop through the collected elements and print out two attributes  This script assumes that there will always be two attributes but you can easily fix this with further mapping    x000D   x000D  window addEventListener  load  function    x000D       x000D    collect all the elements you want the attributes x000D    for into the variable  elementsToTrack  x000D        x000D    var elementsToTrack      body span  body div    x000D      variable to store all attributes for each element x000D    var attributes       x000D      gather all attributes of selected elements x000D    for var i   0  i    elementsToTrack length  i     x000D      var currentAttr   elementsToTrack i  attributes  x000D      attributes push currentAttr   x000D      x000D     x000D      print out all the attrbute names and values x000D    var result   document getElementById  result    x000D    for var i   0  i    attributes length  i     x000D      result innerHTML    attributes i  0  name          attributes i  0  value           attributes i  1  name          attributes i  1  value    lt br gt      x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   lt div name  test  message  test2  gt  lt  div gt  x000D   lt div name  test  message  test2  gt  lt  div gt  x000D   lt div name  test  message  test2  gt  lt  div gt  x000D   lt div name  test  message  test2  gt  lt  div gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Try something like this       lt div id foo  href   url  class  click   alert  hello    data-hello world gt  lt  div gt    and then get all attributes      const foo   document getElementById  foo           or if you have a jQuery object        const foo       foo   0        function getAttributes el            const attrObj               if  el hasAttributes    return attrObj          for  const attr of el attributes              attrObj attr name    attr value          return attrObj                 id   foo    href    url   class       click    alert  hello     data-hello   world       console log getAttributes foo      for array of attributes use            id    href    class    click    data-hello       Object keys getAttributes foo

User · Answer

This approach works well if you need to get all the attributes with name and value in objects returned in an array   Example output                   name   message           value   test2                     x000D   x000D  function getElementAttrs el    x000D    return    slice call el attributes  map  attr    gt    x000D      return   x000D        name  attr name  x000D        value  attr value x000D        x000D        x000D    x000D   x000D  var allAttrs   getElementAttrs document querySelector  span     x000D  console log allAttrs   x000D   lt span name  test  message  test2  gt  lt  span gt  x000D   x000D   x000D    If you want only an array of attribute names for that element  you can just map the results   var onlyAttrNames   allAttrs map attr   gt  attr name   console log onlyAttrNames        name    message

User · Answer

You can use this simple plugin as     some id   getAttributes      function            fn getAttributes   function             var attributes                 if  this length                   each  this 0  attributes  function  index  attr                     attributes  attr name     attr value                                       return attributes            jQuery

User · Answer

Because in IE7 elem attributes lists all possible attributes  not only the present ones  we have to test the attribute value  This plugin works in all major browsers    function            fn getAttributes   function              var elem   this               attr                if elem  amp  amp  elem length    each elem get 0  attributes  function v n                 n   n nodeName  n name              v   elem attr n      relay on   fn attr  it makes some filtering and checks             if v    undefined  amp  amp  v     false  attr n    v                     return attr          jQuery     Usage   var attribs       some id   getAttributes

[javascript] Get all Attributes from a HTML element with Javascript/jQuery

Examples related to javascript

Examples related to jquery

Examples related to attributes

Examples related to parsing