Question

如果我有以下链接：

    <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>

我想获取具有类名selectedLink的元素，然后获取该元素的内部span的值，如上例Order History中所述。

我可以在找到具有selectedLink类的元素的第一部分，但我无法在该元素的内部范围内检索文本。下面是我的代码，用于查找具有类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");
        }
    }

有人可以建议一种方法来检索Order History吗？谢谢

更新：跟进问题

所以这个问题的重点在于，我想添加一个检查，如果页面是“订单历史记录”，导航菜单将selectedLink样式应用于另一个页面（当用户按下BACK时发生）i想要JavaScript逻辑来解决问题所以下面是我的代码：

            //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;
                           }
                       }
                   }
                }
            }

更改类名称位不起作用！我做错了吗？

更新2：

修正了，这是我的愚蠢错误：

更改了以下内容的顺序：

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

为：

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

Answer 1

首先，只需使用getElementsByClassName()来获取元素，这可以为您节省大量精力：

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

然后，由于该文本是唯一的文本，您可以使用textContent（旧版IE中的innerText）

您的最终代码就是其中之一，具体取决于您的目标浏览器以及是否有框架：

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

Answer 2

这听起来像是jquery的完美工作。在页面上包含jquery库，然后使用以下代码：

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

Answer 3

试试这个：

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

获取内部跨度的文本

更新：跟进问题

更新2：

3 个答案: