JS DOM类增删逻辑报错：Cannot read properties of undefined (reading 'classList')

我尝试实现一个给DOM元素添加/移除类的逻辑，以下以short配置数组为例说明遇到的问题：

相关代码 #

1. 导出/导入语句：

export const hideNonIlluminated

import myDOMelement from './dom-element.js';
import { short, long, all, LMDChoice, LMSChoice, LMSMChoice, hideNonIlluminated, hideIlluminated, powerLEDClass, normalLEDClass } from './utility-variables.js';

2. short配置数组：

export const short = [
    {
        elementId: "short-sides",
        action: "add",
        className: "active"
    },
    {
        elementId: "long-sides",
        action: "remove",
        className: "active"
    },
    {
        elementId: "all-sides",
        action: "remove",
        className: "active"
    },
];

3. 类增删处理函数：

const addRemoveClasses = element => {
    element.forEach(({ elementId, className, action }) => myDOMelement[elementId].classList[action](className));
};

4. 点击事件绑定：

myDOMelement['short-sides'].addEventListener("click", () => addRemoveClasses(short));

5. myDOMelement的定义：

const x = ['height', 'width', 'single-sided', 'double-sided', 'wp', 'print-price', 'power-led', 'normal-led', 'support', 'support-choice', 'long-sides', 'short-sides', 'all-sides', 'choice-with-print', 'choice-without-print', 'illuminated', 'non-illuminated', 'LMD', 'LMS', 'LMSM', 'DTF', 'STF', 'STFL'];

const funGetX = () => {
    return x.reduce((acc, classX) => {
        acc[classX] = document.getElementById(classX);
        return acc;
    }, {});
}

const myDOMelement = funGetX();

export default myDOMelement;

运行报错 #

script.js:127 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at script.js:127:38
at Array.forEach (<anonymous>)
at addRemoveClasses (script.js:123:10)
at HTMLButtonElement.<anonymous> (script.js:216:61)

我怀疑是import/export的引用问题，请问该怎么解决？

这个报错本质是myDOMelement[elementId]为undefined，导致无法读取classList。不一定是import/export的问题，按以下步骤排查修复：

1. 检查DOM元素是否存在 #

先确认short数组里的三个ID（short-sides、long-sides、all-sides）在HTML中都有对应的元素，拼写完全一致（包括大小写、连字符）。如果某个ID不存在，document.getElementById会返回null，存到myDOMelement里就是undefined。

2. 确保DOM加载完成后再获取元素 #

当前myDOMelement是脚本一加载就执行funGetX生成的，如果JS脚本放在HTML头部，DOM还没渲染完成，getElementById会返回null。修改dom-element.js：

const x = ['height', 'width', 'single-sided', 'double-sided', 'wp', 'print-price', 'power-led', 'normal-led', 'support', 'support-choice', 'long-sides', 'short-sides', 'all-sides', 'choice-with-print', 'choice-without-print', 'illuminated', 'non-illuminated', 'LMD', 'LMS', 'LMSM', 'DTF', 'STF', 'STFL'];

const funGetX = () => {
    return x.reduce((acc, classX) => {
        acc[classX] = document.getElementById(classX);
        return acc;
    }, {});
}

// 等待DOM加载完成后初始化
let myDOMelement;
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        myDOMelement = funGetX();
    });
} else {
    myDOMelement = funGetX();
}

// 改用异步导出，确保获取到初始化后的元素
export const getMyDOMelement = () => {
    return new Promise(resolve => {
        if (myDOMelement) {
            resolve(myDOMelement);
        } else {
            document.addEventListener('DOMContentLoaded', () => {
                myDOMelement = funGetX();
                resolve(myDOMelement);
            });
        }
    });
};

然后在使用的地方改成异步获取：

import { getMyDOMelement } from './dom-element.js';
import { short } from './utility-variables.js';

getMyDOMelement().then(myDOMelement => {
    myDOMelement['short-sides'].addEventListener("click", () => {
        short.forEach(({ elementId, className, action }) => {
            const el = myDOMelement[elementId];
            if (el) el.classList[action](className);
        });
    });
});

或者更简单的方式：把JS脚本标签放在HTML的</body>之前，确保DOM先渲染完成。

3. 给处理函数加防御性判断 #

在addRemoveClasses里先检查元素是否存在，避免报错：

const addRemoveClasses = (element, myDOMelement) => {
    element.forEach(({ elementId, className, action }) => {
        const domEl = myDOMelement[elementId];
        if (domEl && domEl.classList) {
            domEl.classList[action](className);
        } else {
            console.warn(`元素${elementId}不存在，无法执行${action}操作`);
        }
    });
};

4. 排查循环引用 #

检查utility-variables.js是否也导入了myDOMelement，如果两个模块互相导入，会导致初始化异常。如果有循环引用，重构代码把共享变量抽离到单独模块。

内容的提问来源于stack exchange，提问作者Karol