element.tagName 返回未定义

如何解决element.tagName 返回未定义

我必须编写一个函数，该函数将返回具有给定 tagName 的最近亲属（父级或子级）。这是我的代码：

function closestRelative(parent,relativeName) {
  var closestParent = parent.parentNode.closest(relativeName);
  var childrenElements = parent.children;
  var closetChild;
  
  for(var i=0; i<childrenElements.length; i++) {
    if(childrenElements[i].tagName === relativeName.toupperCase()){
      closestChild = childrenElements[i];
    }
  }
  
  console.log(closestChild.tagName);
  //if(closestParent) return closestParent.tagName;
  //if(closestChild) return closestChild.tagName;
  //return null;
  return closestChild.tagName.toString();
}

// Example case
document.body.innerHTML = 
'<James>' +
  '<Dave></Dave>' +
  '<Mike></Mike>' +
  '<Sarah></Sarah>' +
'</James>';

let parent = document.getElementsByTagName('James')[0];
let relative = closestRelative(parent,'Mike');
console.log(relative && relative.tagName); // prints MIKE

控制台正在返回标签的名称，但返回值为 undefined。

解决方法

您正在尝试阅读 .tagName 两次。

在您的 closestRelative 函数中，您将返回 closestChild.tagName.toString()。然后在您的测试代码中，您正在执行 relative && relative.tagName，尝试再次阅读它。由于函数已经返回一个字符串，读取 .tagName 的结果是 undefined。

您可能希望删除最后一个 .tagName 中的 console.log，或更改 closestRelative 以返回标签本身 (closestChild) 而不是标签名称。>