php DomXPath - how to select child node from parent node of current node?

Question

i have a very important question that seem to be difficult for me.. simply i need to select child node from parent node of current node.. i know that we use (..) to select parent node. but in my case it not enough .. this is my php code to get all color values

<?php
    /////////////////////////////////////////////////////////////////////
        $html='
            <table>
                <tr>
                    <td colspan="2">
                        <span>green</span>
                        <img src="green.gif" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>yellow</span>
                        <img src="yellow.gif" />
                    </td>
                    <td>
                        <span>red</span>
                        <img src="red.gif" />
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                        <span>black</span>
                        <img src="black.gif" />
                    </td>
                </tr>
            </table>
        ';
    /////////////////////////////////////////////////////////////////////
        $dom = new DOMDocument();
        $dom->loadHTML($html);
        $xpath = new DomXPath($dom);
    /////////////////////////////////////////////////////////////////////
        $evaluate = $xpath->evaluate('.//table/tr/td/span');
        for($x=0,$results=''; $x<$evaluate->length; $x++)
        {
            $x1=$x+1;

            $query1 = $xpath->query('.//table/tr/td/span');
            $color = $query1->item($x)->nodeValue;
            $results .= "color $x1 is : $color<br/>";
        }
        echo $results;
    /////////////////////////////////////////////////////////////////////
?>

* now i need to get for every color its images src ..
i tried this but no way 

<?php
    /////////////////////////////////////////////////////////////////////
        $html='
            <table>
                <tr>
                    <td colspan="2">
                        <span>green</span>
                        <img src="green.gif" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>yellow</span>
                        <img src="yellow.gif" />
                    </td>
                    <td>
                        <span>red</span>
                        <img src="red.gif" />
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                        <span>black</span>
                        <img src="black.gif" />
                    </td>
                </tr>
            </table>
        ';
    /////////////////////////////////////////////////////////////////////
        $dom = new DOMDocument();
        $dom->loadHTML($html);
        $xpath = new DomXPath($dom);
    /////////////////////////////////////////////////////////////////////
        $evaluate = $xpath->evaluate('.//table/tr/td/span');
        for($x=0,$results=''; $x<$evaluate->length; $x++)
        {
            $x1=$x+1;

            $query1 = $xpath->query('.//table/tr/td/span');
            $color = $query1->item($x)->nodeValue;

            $query2 = $xpath->query('.//table/tr/td/span['.$x1.']/../img');
            $image = $query2->item($x)->getAttribute("src");
            $results .= "color $x1 is : $color - and- image $x1 is : $image<br/>";
        }
        echo $results;
    /////////////////////////////////////////////////////////////////////
?>

please help::

Answer 1

Try this:

... initiate/load dom+xpath ...
$res = $xpath->query('//table/tr/td');
foreach($res as $td) {
    $spans = $td->getElementsByTagName('span');
    $color = $spans[0]->nodeValue;
    $imgs = $td->getELementsByTagName('img');
    $src = $imgs[0]->getAttribute('src');
}

There's no need to run full xpath queries twice. Every node in a DOM tree is fully aware of its parents and children.