javascript - Getting the text of an inner span

Question

if i have the following links :

    <a href="#" onclick="return navigateTo(this)" id="menuList:0:menu" class="normalLink">
        <span id="menulist:0:menuLabel">
            <span > Main Page </span>
        </span>
    </a>        
    
    <a href="#" onclick="return navigateTo(this)" id="menuList:1:menu" class="normalLink">
        <span id="menulist:1:menuLabel">
            <span > Search Orders </span>
        </span>
    </a>
    
    <a href="#" onclick="return navigateTo(this)" id="menuList:2:menu" class="selectedLink">
        <span id="menulist:2:menuLabel">
            <span > Orders History </span>
        </span>
    </a>

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

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

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

Can anyone suggest a way to retrieve Order History? Thanks

UPDATE: Follow up question

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 selectedLink style applied to another page (happens when user presses BACK) i wanted JavaScript logic to fix the problem so below is my 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 < 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 < 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;
                           }
                       }
                   }
                }
            }

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

UPDATE 2:

Fixed, It was my silly mistake :

changed the ordering of the following :

    allLinks[j].className = "selectedLink";
    elems[i].className = "normalLink";

to:

    elems[i].className = "normalLink";
    allLinks[j].className = "selectedLink";

score 3 · Accepted Answer

Firstly, just use getElementsByClassName() to get the element, that saves you a huge amount of effort:

var link = document.getElementsByClassName("selectedLink")[0]; // new browsers only
var link = document.querySelector(".selectedLink"); // more support, but not in IE7 or lower
var link = $(".selectedLink"); // with jQuery

Then, since that text is the only text, you can just use textContent (innerText in older IE)

Your end code is one of these, depending on your target browsers and if you have a framework or not:

var text = link.textContent; // new browsers
var text = link.innerText || link.textContent; // older browers
var text = link.text(); // jQuery

score 0 · Accepted Answer

This sounds like a perfect job for jquery. include the jquery library on your page, then use the following code:

var text = $('.selectedLink').first('span').first('span').html();

score 0 · Accepted Answer

Try this:

var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) 
{
    var classes = elem[i].className;
    if(classes == 'selectedLink' ){
        alert("ok found it the selected link");
        var a = elem[i].getElementsByTagName('span')[1].innerHTML;
        alert(a);
    }
}

JSBin
http://jsbin.com/epoxej/edit#preview

javascript - Getting the text of an inner span

UPDATE: Follow up question

UPDATE 2:

3 回答 3

Related

Reference