JavaScript任务列表开发：setAttribute调用报null类型错误求助

核心错误原因 #

触发Cannot read properties of null (reading 'setAttribute')的直接原因是：在ProjectView构造函数中尝试给null对象调用setAttribute，根源是MainView的appendProject方法没有正确获取模板内容，导致传入ProjectView的element为null。此外还有选择器使用错误、属性引用错误等问题。

具体修复步骤 #

1. 修复模板内容获取逻辑（MainView.js） #

模板元素的实际内容存储在content属性中，原代码直接克隆模板元素而非其内容，导致无法获取到目标div：

// 原错误代码
appendProject(item){
    let templateContent = this.getByID('project-template')
    let projectDivElementClone = templateContent.cloneNode(true).querySelector("div");
    // ...
}

// 修复后代码
appendProject(item){
    let templateContent = this.getByID('project-template').content; // 加上.content
    let projectDivElementClone = templateContent.cloneNode(true).querySelector("div");
    // ...
}

2. 修复ProjectView中的选择器错误（ProjectView.js） #

所有class选择器缺少.前缀，导致无法匹配到目标元素：

// 原错误代码
get projectName(){
    return this.element.querySelector('proj-name') 
}
get deleteBttn(){
    return this.element.querySelector('proj-trash-icon')
}
get editBttn(){
    return this.element.querySelector('proj-edit-icon')
}

// 修复后代码
get projectName(){
    return this.element.querySelector('.proj-info-name') 
}
get deleteBttn(){
    return this.element.querySelector('.proj-trash-icon')
}
get editBttn(){
    return this.element.querySelector('.proj-edit-icon')
}

3. 修复appendProject中的option属性引用错误（MainView.js） #

错误引用了Project实例不存在的element属性，应使用name属性：

// 原错误代码
let option = document.createElement('option')
option.value = item.element
option.text = item.element
option.id = `checkbox-${item.id}`

// 修复后代码
let option = document.createElement('option')
option.value = item.name
option.text = item.name
option.id = `checkbox-${item.id}`

验证修复效果 #

完成上述修改后，新创建的Project实例的UUID会正确设置到对应的DOM元素上，同时项目名称也能正常渲染，不会再触发null相关的错误。

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