js获取html页面节点方法(递归方式)

当我们需要获取页面内的某个节点时，我们可以使用JavaScript对DOM树进行遍历，找到目标节点并返回。递归是一种逐级下降的方式，在DOM树上寻找目标节点。下面是详细的攻略：

核心思路

1. 判断当前节点是否是目标节点，是的话则返回该节点
2. 不是目标节点则遍历该节点的所有子节点，并依次调用自己，直到找到目标节点或子节点均为null时停止递归。

代码实现

function getNodeByClassName(node, className) {
    if(node.classList && node.classList.contains(className)) {
        return node;
    } else {
        var children = node.children;
        for(var i = 0; i < children.length; i++) {
            var result = getNodeByClassName(children[i], className);
            if(result) {
                return result;
            }
        }
    }
    return null;
}

代码解析：

• node 参数表示当前需要查找的节点。
• className 参数表示想要找到的节点的 class 名称。
• 首先判断当前节点是否包含指定的 class，如果是则返回该节点。
• 如果该节点不是目标节点，则遍历该节点的所有子节点，依次调用自身来查找目标节点。
• 如果子节点也不包含目标节点，则返回null，表示未找到目标节点。

示例1：查找指定ID的节点

以下是示例代码：

<div>
    <div>
        <div id="target">
            <p>This is the target node!</p>
        </div>
    </div>
</div>

var targetNode = getNodeByClassName(document.body, "target");
console.log(targetNode);

代码解析：

• document.body 表示整个页面的根节点。
• getNodeByClassName 函数的第二个参数为"className"，在这里我们使用了"id"，但是其实它们的作用类似，都是用来表示节点的特征。
• 通过传入document.body作为查找起点，可以查找整个页面上指定ID的节点。

示例2：遍历列表查找包含指定文本的节点

以下是示例代码：

<ul>
    <li>白云</li>
    <li>蓝天</li>
    <li>绿地</li>
</ul>

var targetNode = getNodeByClassName(document.body, "绿地");
console.log(targetNode);

代码解析：

• 要查找包含文本"绿地"的节点，可以直接作为className传入。
• getNodeByClassName 函数会递归遍历整个列表，找到包含"绿地"的节点并返回。