面试题：JavaScript 批量操作 DOM 节点的复杂场景应用

Question

在一个复杂的 Web 应用中，有多个不同类型的 DOM 节点组，每个组都有不同的条件筛选规则。例如，一组是具有 'class1' 类名且 data - type 属性为 'type1' 的节点，另一组是具有 'class2' 类名且 data - status 属性为 'active' 的节点。现在需要对每组节点分别进行不同的批量操作，如第一组节点添加特定样式，第二组节点改变其文本内容等。要求设计一个通用的函数，能够灵活处理这种复杂的批量操作 DOM 节点的场景，详细描述设计思路并给出完整代码。

Answer 1

设计思路

1. 参数化筛选规则：使用对象来定义每组 DOM 节点的筛选规则，这样可以灵活配置不同的筛选条件。
2. 操作函数的抽象：将对每组节点的不同操作也通过函数来抽象，使得每个操作可以独立定义和修改。
3. 遍历执行：遍历每组筛选规则及其对应的操作函数，根据筛选规则找到相应的 DOM 节点，并执行对应的操作。

完整代码

function batchDOMOperations(operations) {
    Object.keys(operations).forEach((group) => {
        const { selector, action } = operations[group];
        const nodes = document.querySelectorAll(selector);
        nodes.forEach((node) => {
            action(node);
        });
    });
}

// 使用示例
const operations = {
    group1: {
        selector: '.class1[data - type="type1"]',
        action: (node) => {
            node.style.color ='red';
        }
    },
    group2: {
        selector: '.class2[data - status="active"]',
        action: (node) => {
            node.textContent = 'New Text';
        }
    }
};

batchDOMOperations(operations);