JavaScript/jQuery: How do I get an array of all attributes in an XML element?

Question

Given an XML element in jQuery like so:

$('<foo oy="vey" foo="bar" here="is" another="attribute" />')

Can I use either jQuery or plain old JavaScript to get an array containing the names of all the attributes in an XML element? I would expect this:

['oy','foo','here','another']

Hasen

A word of caution, jquery does not really support forming XML from a string literal. It will work in firefox and maybe in other browsers, but not IE. See docs.jquery.com/Core/jQuery : "A string of HTML to create on the fly. Note that this parses HTML, not XML." – Schaab

Oh, I should also mention, there are plugins that will allow you to do this if you want. – Schaab

Answer 1

The jQuery function isn't really meant to parse XML, it can parse HTML, but it's not really the same.

What about using the browser's XML parser:

function parseXML(text) {
  var parser, xmlDoc;

  if (window.DOMParser) {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(text,"text/xml");
  } else {  // IE
    xmlDoc=  new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = "false";
    xmlDoc.loadXML(text); 
  }
  return xmlDoc;
}

// Demo
var doc = parseXML('<foo oy="vey" foo="bar" here="is" another="attribute" />');
var foo = doc.childNodes[0];
for (var i = 0; i < foo.attributes.length; i++) {
  var attr = foo.attributes[i];
  alert(attr.name + " = " + attr.value); 
}

Run the above code here.

Does

Answer 2

This plugin will help you do that.

You can also do it using plain old javascript using something like that :

 var elt = document.getElementsByTagName('id'); 
 for (i=0;i<elt.attributes.length;i++){ 
     //elt.attributes[i].nodeName is what you want, .nodeValue for its value.
 }

Replay

I am affraid elt is a HTMLCollection - collection of elements that does not have attributes property - you have to do inner loop for each element in collection (I posted solution as an aswer) – Depurate

Answer 3

A) Single <Foo> element

Do you need list of attributes of a single element?
... if so - do you really need an array?
Simple $('<foo ... />').get(0).attributes
...will give you NamedNodeMap (object) of attributes

B) All elements <Foo> in the whole (XML) document

@Soufiane Hassou 's answer is showing approach but is missing the inner loop...

Do you need to fetch all possible attribute names of an element (e.g. Product element) inside a whole XML document?

var yourElements = document.getElementsByTagName('Foo'); //get all <Foo> elements
var listOfAttributeNames = []; //prepare empty array for attribute names
var attributeNameBuffer; //buffer for current attribute name in loop

//Loop all elements
for(var i = 0; i < yourElements.length ; ++i){ 

   //Loop all attributes of a current element
   for( k = 0 ; k < yourElements[i].attributes.length ; ++k ){ 
       //Temporary store current attribute name
       attributeNameBuffer = yourElements[i].attributes[k].name;

       //First, 
       //test if the attribute name does not already exist in our array of names
       if( listOfAttributeNames.indexOf(attributeNameBuffer) == -1 )
         listOfAttributeNames.push( attributeNameBuffer ); //if not, add it
   }

} 
console.log(listOfAttributeNames); //display array of attributes in console

Depurate