Getting the text of an inner span 
<p>if i have the following links :</p>

<pre><code>    &lt;a href="#" onclick="return navigateTo(this)" id="menuList:0:menu" class="normalLink"&gt;
        &lt;span id="menulist:0:menuLabel"&gt;
            &lt;span &gt; Main Page &lt;/span&gt;
        &lt;/span&gt;
    &lt;/a&gt;        

    &lt;a href="#" onclick="return navigateTo(this)" id="menuList:1:menu" class="normalLink"&gt;
        &lt;span id="menulist:1:menuLabel"&gt;
            &lt;span &gt; Search Orders &lt;/span&gt;
        &lt;/span&gt;
    &lt;/a&gt;

    &lt;a href="#" onclick="return navigateTo(this)" id="menuList:2:menu" class="selectedLink"&gt;
        &lt;span id="menulist:2:menuLabel"&gt;
            &lt;span &gt; Orders History &lt;/span&gt;
        &lt;/span&gt;
    &lt;/a&gt;
</code></pre>

<p>I want to get the element which has the class name <code>selectedLink</code> and then get the value of the inner <code>span</code> of that element where it says in above example <code>Order History</code>.</p>

<p>I can do the first part of finding the element which has <code>selectedLink</code> class, but i cannot retrive the text inside the inner span of that element. Below is my code to find the element with class <code>selectedLink</code>:</p>

<pre><code>    var elem = this.getElementsByTagName('*');
    for (var i = 0; i &lt; elem.length; i++) 
    {
        var classes = elem[i].className;
        if(classes == 'selectedLink' ){
            alert("ok found it the selected link");
        }
    }
</code></pre>

<p>Can anyone suggest a way to retrieve <code>Order History</code>? Thanks    </p>

<h2>UPDATE: Follow up question</h2>

<p>So the point of this excerise is that, i wanted to add a check where if the page is "Order History" yet the navigation menu had <code>selectedLink</code> style applied to another page (happens when user presses BACK) i wanted JavaScript logic to fix the problem so below is my code:</p>

<pre><code>            //get the element that has "selectedLink" style
           // if the text says "Order History" then style is applied ok  
           var elems =  document.getElementsByClassName("selectedLink");
           if(typeof elems != "undefined"){
               for(var i = 0; i &lt; elems.length; i++){
                   alert(elems.length);
                   var text = elems[i].innerText || elems[i].textContent;
                   alert(text);
                   if(text == "Order History"){
                       alert("its ok");
                   }
                   else { //we're here because the element that has "selectedLink" style in not "order History"

                        //get all elements that have "normalLink" style and see which one is "Order History"
                       var allLinks = document.getElementsByClassName("normalLink");
                       for(var j = 0; j &lt; allLinks.length; j++ ){
                           var curText = allLinks[j].innerText || allLinks[j].textContent;

                           if(curText == "Order History"){
                               alert("there it is at counter " + j);
                               alert(allLinks[j].innerText);

                               //swap the class names
                               allLinks[j].className = "selectedLink";
                               elems[i].className = "normalLink";
                               break;
                           }
                       }
                   }
                }
            }
</code></pre>

<p>The changing class names bit isn't working! Am i doing it wrong? </p>

<h2>UPDATE 2:</h2>

<p>Fixed, It was my silly mistake :</p>

<p>changed the ordering of the following :</p>

<pre><code>    allLinks[j].className = "selectedLink";
    elems[i].className = "normalLink";
</code></pre>

<p>to:</p>

<pre><code>    elems[i].className = "normalLink";
    allLinks[j].className = "selectedLink";
</code></pre>
