Question

我正在尝试执行递归函数来按类查找HTMLelement，但由于某种原因它在到达没有子元素的子元素后停止。这是代码：

var alpha = Obj.elementByClass(document.body, "message");

Obj.elementByClass = function(element, cl) {
   var elementChildren = element.children,
       elementChildrenLength = elementChildren.length;

   for(var num=0; num<elementChildrenLength; num++) {
      if(elementChildren[num].className && elementChildren[num].className.indexOf("cl") > -1) {
         return elementChildren[num];
      }
      else if(elementChildren[num].children.length !=0) {
         return Obj.elementByClass(elementChildren[num], cl);
      }
   }
};

请不要建议jquery或其他库，我想了解为什么它到达没有孩子的元素时会停止。

谢谢！

Answer 1

因为for循环在元素没有子元素时永远不会执行，因为num和elementChildrenLength都是0且条件num<elementChildrenLength永远不会是真的。

Answer 2

非元素节点（例如文本节点）没有childNodes属性，因此尝试在其上读取.children.length会抛出错误，从而中止执行。

您必须验证节点是否为元素：

for(var num=0; num<elementChildrenLength; num++) {
    if (elementChildren[num].nodeType !== 1) {
        continue;
    }
    ...

或者在访问节点之前检查该节点是否具有childNodes属性：

else if(elementChildren[num].children && elementChildren[num].children.length !=0) {

Answer 3

如果elementChildrenLength等于零，那么整个for循环块将不会执行。

避免这种情况的最好方法是使用以下内容包装for循环块：

if(elementChildrenLength==0){
    return 0;
}else{
   for(var num=0; num<elementChildrenLength; num++) {
       //for loop block here
   }
}

Answer 4

Obj.elementByClass = function(element, cl) {
   for(var i=0, len = element.children.length; i<len; i++) {
    if (element.children[i].className && new RegExp('\\b'+cl+'\\b').test(element.children[i].className))
       return element.children[i];
    else if(element.children[i].children.length)
       return Obj.elementByClass(element.children[i], cl);
   }
};

有几点：

你在定义之前调用了函数（并且，因为这不是一个悬挂的函数，那就错了）
该类的测试现在更加严格，因为它现在不允许在共享相同单词的其他类名中找到的类名（现在使用REGEXP进行检查，使用单词bounaries）
您的indexOf()明确查找字符串“cl”，我认为您的意思是cl
为了便于阅读，我把它剪了一下
作为代码当前，您只返回第一个匹配节点，而不是所有节点

Answer 5

据我所知，您正在使用className'message'搜索body元素的第一个子元素。我可以建议这个替代方案吗？

document.querySelector('body .message')

该函数返回undefined，因为第一个条件AND else if(elementChildren[num].children.length !=0)都不为真。所以，无事可做，退出，没有任何回报。

JavaScript：递归函数不能像它应该的那样工作

5 个答案: