Javascript XML DOM Trickiness

Question

all. I'm having some issues accessing an XML node's properties using Javascript.

The XML node in particular looks like the following:

<List DocTemplateUrl="" DefaultViewUrl="/Lists/Announcements/AllItems.aspx" MobileDefaultViewUrl="" ID="{blahblahblahblah}" ... />

The node itself has no "data" contained within its tags; all the data it holds are actual modifiers of the List tag.

Javascript's XML DOM reference provides little information on how to access modifiers of node tags; all the methods and properties in the DOM reference refer to child nodes and how to access the contents of a node. This makes sense, of course, because XML is supposed to be well-formed and pretty, but those of you who know where that XML snippet came from are already laughing, because that horribly unintuitive XML is directly output from Microsoft SharePoint's Web Services API. :)

Anyway, that's besides the point. If anyone knows how to access the properties of an XML node using Javascript's XML DOM, I would really appreciate some help. :D

Edit: The problem may be somewhere different. I did mean attributes, not properties; that helped a bunch. However, it's still telling me that all the XML DOM Node properties and methods are undefined; I think the actual reference I'm using to access the methods is undefined. Here is the code I use to generate it:

var xmlDoc = $.parseXML(xml);
$(xmlDoc).find('List').each (
    function ()
    {
        var id = $(this).attributes.getNamedItem("ID").value;
        alert(id);
    });

Where "xml" contains the List snippet above, and is straight XML output from SharePoint Web Services.

I was under the assumption that this code found all the nodes with type 'List' and iterated through them; is this incorrect?

Edit: Solution found. Apparently, when you use JQuery to encapsulate a Javascript XML DOM Node, $(this) does NOT give you the DOM element, but instead gives you a JQuery object that contains the DOM element. There are two ways around this, given the code I used above:

1. var id = $(this).attr('ID'); // This is JQuery's way of letting you access attributes within an encapsulated XML node - attr() is NOT part of the standard Javascript XML DOM, because $(this) is NOT an XML DOM element.

2. var id = $(this).get(0).attributes.getNamedItem("ID").value; // This is Javascript's way. Here, we call get(0) to return the actual XML DOM node from JQuery's encapsulated object; after that, we can call whatever Javascript XML DOM methods we would like. I'm using this method because I know the Javascript XML DOM, and I'd prefer to use JQuery for as little as possible outside of GUI generation.

Hope that helps whoever else comes across a similar problem. :)

(Oh, and attributes vs properties. Good to know. :D)

Answer 1

I think you mean attribute by saying property. If you hit Google with that, you may find alot more usefull answers. I found this for example How to access xml attributes using Javascript? .

One of the answers there describes the solution as follows:

===

For xml, your javascript would be:

document.getElementByTagname("person").attributes.getNamedItem("name").value;

===

Answer 2

The values to which you are referring are called attributes .

Assuming you have a reference to the appropriate element:

var mobileDefaultViewUrl = element.getAttribute('MobileDefaultViewUrl');

A more full example for Mozilla-based browsers:

var xmlText = "<root><element id='elementId' attribute1='test1' attribute2='test2' /></root>";

var parser=new DOMParser();
var dom=parser.parseFromString(xmlText,"text/xml");    
var element = dom.getElementsByTagName('element')[0];

console.log(element.getAttribute('attribute1'));

In jQuery:

var xml = "<root><element id='elementId' attribute1='test1' attribute2='test2' /></root>",
    xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc ),
    $element = $xml.find( "element" );

console.log($element.attr('attribute1'));