HTML Canvas - loading multiple images using xml file

I am trying convert an Edge Animate project to Animate CC where single images are loaded into a series of empty movie clips using a frame actions and a xml file. These movie clips are all prepositioned in a single movie clip that has an initiating action to load all the images before playing the timeline and fading up all the images in turn.

I have solved the loading of the images once I have the 'imageid' (MC instance) and 'small_url'. However, I cannot seem to get the data from the XML file into the relevant variables.

the xml is structured like this:

<images>
<imagedata ID = "image1_1">
    <imageid>image1_1</imageid>
    <small_url>images/small/HF0307_008.jpg</small_url>

</imagedata>
<imagedata ID = "image1_2">
    <imageid>image1_2</imageid>
    <small_url>images/small/HF0001_187.jpg</small_url>

</imagedata>
<imagedata ID = "image1_3">
    <imageid>image1_3</imageid>
    <small_url>images/small/HF0226_157.jpg</small_url>

</imagedata>
<images>

The code I have tried with no success is:

var myimageid = "theMovieClipInstanceName";

var imagedata = new XMLHttpRequest(); 

imagedata.addEventListener("load", imagedataF);imagedata.open("GET", "myXMLfile", true);  
imagedata.setRequestHeader("Content-Type", "text/xml");imagedata.send();


function imagedataF(e) { 

var imagedatafile = e.target.responseXML;

//from here is where I am uncertain what to do!!
//I want to identify the xml element with child[0] that = "myimageid" and then set the 'smallurl' variable to this value.

var images = imagedatafile.getElementsByTagName("imagedata");

var smallurl = images.getElementsByTagName("imageid").[0] = myimageid;  

//use variable "smallurl" to load images

}

Been trying everything with no joy.

Any help would be much appreciated.