JS调用element.classList.contains()报undefined错误是什么原因？

错误诱因 #

• childNodes API 会返回目标节点下的所有子节点，包括文本节点（比如标签之间的换行、空格内容）、注释节点等非元素类型节点，这类节点不存在classList属性，因此访问elements[0].classList会返回undefined，调用contains方法时就会触发类型错误。
• 即便main标签下存在元素，只要第一个子节点是空白文本节点，elements[0]就不是你预期的DOM元素，依然会触发报错。

修复方案 #

方案1：替换childNodes为children（最简便） #

children API 只会返回元素类型的子节点，自动过滤文本、注释等非元素节点，修改后的代码如下：

function find(clas="*"){
        const elements = document.querySelector("main").children;
        if(clas!="*"){
            console.log(elements[0].classList.contains("v"));
        }
}

方案2：增加节点类型判断 #

如果必须使用childNodes获取全量节点，可以在访问classList前先判断节点类型：

function find(clas="*"){
        const elements = document.querySelector("main").childNodes;
        if(clas!="*"){
            // nodeType等于1表示当前是元素节点，可选链?.避免节点不存在的异常
            if(elements[0]?.nodeType === 1){
                console.log(elements[0].classList.contains("v"));
            }
        }
}

额外优化建议 #

如果你只是需要判断main下是否存在包含v类的元素，不需要手动遍历子节点，直接用选择器判断即可，代码更简洁高效：

// 返回true表示存在含v类的元素，false表示不存在
const hasVClass = document.querySelector('main .v') !== null;
console.log(hasVClass);

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