需要帮助在 Javascript 中查找/遍历 dom

Need help finding/traversing dom in Javascript

本文关键字：查找 遍历 dom Javascript 帮助      更新时间：2023-09-26

我确定这是一个多余的问题，但是我已经找了一个小时左右，空手而归，所以希望有人能帮忙......

寻找一种方法，在搜索"Chicken"（或任何值）时使用JS（不是jquery）返回下面的li类。

<li class='113252'>
    <span>Chicken</span>
</li>

所以希望javascript在给定span值时返回li类（在本例中为Chicken）。

谢谢！

试试这个：

var spanArray = document.getElementsByTagName('span');
for (var i=0; i<spanArray.length; i++) {
    if(spanArray[i].innerHTML.toUpperCase() === 'CHICKEN')
    {
        alert(spanArray[i].parentNode.className);
        break;
    }
}

现在，我更熟悉jQuery，但似乎在这里链接的小提琴中工作：http://jsfiddle.net/FranWahl/fCzYc/2/（更新以包括匹配后的建议break;）

您可以为parentNode添加更多类型检查，以确保它是li等等，但这应该可以帮助您入门。

另外，我完全不确定这在大文档中的效率如何。

编辑
阅读了一些评论后，我更新了上面的代码以包含 ajax333221 建议的中断。

丹尼斯提到最好在ul上打电话给getElementByTagName.鉴于您可以在没有ul的情况下拥有li，我将其作为单独的代码添加到此处，因为我不确定 OP 是否具有ul标签。

针对每个ul进行代码查询（此处为 jsFiddle） 

var ulArray = document.getElementsByTagName('ul');
var parentFound = false;
for (var i = 0; i < ulArray.length; i++) {
    var spanArray = ulArray[i].getElementsByTagName('span');
    for (var i = 0; i < spanArray.length; i++) {
        if (spanArray[i].innerHTML.toUpperCase() === 'CHICKEN') {
            alert(spanArray[i].parentNode.className);
            parentFound = true;
            break;
        }
    }
    if(parentFound)
    {
        break;
    }
}​

这绝不是完全完整的，这就是为什么你应该寻求一个库，但它做了两件事：

  1. 递归遍历子元素（从文档的 BODY 开始），以查找提供的文本
  2. 递归遍历父元素以查找提供的父元素标记，一旦找到，它将返回该父元素的类

JSFiddle： http://jsfiddle.net/vol7ron/bttQN/

function getParentClass(element, parentTag){
   if (element.tagName == parentTag.toUpperCase())
       return element.className;
   return getParentClass(element.parentNode,parentTag);
}
window.findParentClass = function (text,tagName){
    var elements = document.getElementsByTagName('body');
    for (var n=elements.length; n--;){
        var foundClass = (function searchNextChild(el){
            if (!el.children.length) {
                if (el.textContent == text) 
                   return getParentClass(el,tagName);
                return;
            }
            for (var i=0, n=el.children.length; i<n; i++)
               return searchNextChild(el.children[i]);
        })(elements[n]);
        return foundClass;
    }
};

调用示例：

alert( findParentClass('Chicken','li') );
相关文章：