需要实现的问题:我要使用递归去检查子节点是否有包含某个className
错误示例:
// 递归函数,用于检查节点及其所有子孙节点的类名
function checkForDateItem(node: Node | null): boolean {
let bool = false;
if (!node) return false; // 如果节点为空,直接返回
// 检查当前节点的类名
if (node.nodeType === Node.ELEMENT_NODE && (node as Element).className.match(/\bdateItem\d*\b/)) {
console.log('找到匹配的类名:', (node as Element).className);
bool = true;
return true;
// 如果只需检查是否存在一个匹配的类名,可以在这里返回或者进行其他处理
}
// 检查子节点
node.childNodes.forEach(childNode => {
checkForDateItem(childNode); // 递归调用,检查每个子节点
});
return bool;
}
这段代码定义了一个递归函数 checkForDateItem
,用于检查给定节点及其所有子孙节点的类名是否匹配特定模式。函数接收一个 Node
类型的参数 node
(或 null
),首先检查节点是否为空。如果不为空,它会检查当前节点是否是一个 ELEMENT_NODE
类型,并且其类名是否匹配正则表达式 \bdateItem\d*\b
。如果匹配,函数会打印类名并返回 true
。接着,函数递归地检查每个子节点。函数最后返回一个布尔值 bool
,指示是否在整个节点树中找到过匹配的类名。
但是我这样写会每次都返回false
有以下几个原因:
-
递归调用不影响返回值: 在递归过程中,函数
checkForDateItem
调用自身来检查每个子节点,但这些递归调用的返回值不会影响主函数的bool
变量。在每个递归调用的返回值都没有被用来更新bool
变量,所以即使子节点中有匹配的类名,主函数的bool
变量仍然保持初始值false
。 -
bool
变量的作用范围:bool
变量在函数内是局部的,它只在当前的函数调用中有效。即使在某次递归调用中找到了匹配的类名并将bool
设置为true
,它的改变不会影响其他层次的递归调用。 -
递归的返回值处理: 即使递归调用发现了匹配的类名,它的返回值没有正确地传递回上层调用。当前的实现中,
checkForDateItem
函数不会在发现匹配的子节点后正确地将结果返回到上层。
所以修改后的代码
function checkForDateItem(node: Node | null): boolean { if (!node) return false; // 如果节点为空,直接返回 // 检查当前节点的类名 if (node.nodeType === Node.ELEMENT_NODE && (node as Element).className.match(/\bdateItem\d*\b/)) { console.log('找到匹配的类名:', (node as Element).className); return true; // 如果找到匹配的类名,直接返回 true } // 检查子节点 const childNodes = Array.from(node.childNodes); for (const childNode of childNodes) { if (checkForDateItem(childNode)) { return true; // 如果子节点中找到匹配的类名,直接返回 true } } return false; // 如果没有找到匹配的类名,返回 false }