Parsing XML/XHTML in Actionscript

Question

Is there anything similar to getElementById in actionscript?

I'm trying to make a prototype of a flash page wich gets it's data from a xhtml file. I want to have both an accessible html version (for search engines, textreaders and people without flash) and a flash version (because the customer insists to use flash even though a html-css-ajax solution would do quite nicely).

What I need is a simple way of getting the text or attributes from the html with a certain id, like <h1 id="flashdataTitle">This is the title</h1> etc. I'm guessing a few ways it might be possible:

• Somehow use an ExternalInterface.call and do the DOM trickery in JavaScript (wich is probably what I will do, because I'm very familiar with JS and a complete newbie with flash/actionscript, unless you have a better solution)
• Load the xhtml with the Actionscript XML class, and manually traverse the XML looking for the correct id attribute (but this is probably very slow)
• Use XPath with the XML class in actionscript. (I'd like some hints on how to do this, if this is the reccomended way)
• There is actually an Actionscript equivalent to getElementById to use with the XML?
• Allthough my employer hope we don't have to do this: I could rewrite the server side code to output the relevant texts and image urls in a flash-friendly format.

What is the most effective, easiest to implement, and robust-crossbrowser way of doing this? Any totally different ideas?

Please post any ideas even if you think the question have been answered, I'd like to explore all the different possibilities, and allso what disadvantages the proposed solutions have.

Answer 1

Since you said your input would be XHTML, you can do it with XPath:

import mx.xpath.XPathAPI;

var elementId:String = "flashdataTitle";
var elementPath:String = "//h1[@id'" + elementId + "']";
found_elements = XPathAPI.selectNodeList(xhtml.firstChild, elementPath);

if (found_elements.length == 1) {
  trace(found_elements[0]);
}

The code example is inspired from here, where you also can find some mode detail on XPath and ActionScript.

AS3 has it's own XPath Library, the general approach would be the same.

Answer 2

Use XML.idMap (or XMLDocument.idMap in ActionScript 3.0) property if quering elements by id is enough. This method is probably fastest way to do this. While XPath gives you advanced quering capabilities it reduces performance. So if you need some elements having id attributes I recomend you use idMap.

Answer 3

Is there anything like the prototype.js function inspect() in Actionscript? I've tried testing the xpath solution but it just won't work. I've tested that the xpath is correct using scetchpad (I think that's what it's called), so I beleave theres a problem with the XML object... It seems to contain the xhtml file when viewing it in the debugger, though it seems quite chaotic, but if I could "inspect" the variables and trace them it would help locating the problem. (Thanks Tomalak, I will upvote your answer as soon as my "reputation" is high enough.)

BTW, I still want to hear other ideas.