如何获取接口返回note对象对应的渲染父div，实现非重要笔记隐藏

问题原因 #

你在filterImportant里遍历的note是从接口拿到的纯JSON数据对象，不是DOM节点对象，自然不存在parentNode属性，所以输出undefined是正常的。

解决方案 #

方案1：渲染阶段直接控制显隐（最推荐）

你可以直接在渲染逻辑的循环里加判断，不需要额外写筛选函数，修改渲染阶段的代码即可：
在创建note对应的div之后，加一行判断：

let div = document.createElement("div"); // creation of the note
div.setAttribute("class", "note"); // giving them class "note"
// 新增下面这段判断
if(note.important === "off"){
  div.style.display = "none";
}

这样渲染的时候就自动把不重要的笔记隐藏了，不需要后续再单独处理。

方案2：渲染时加唯一标识，筛选时通过标识找DOM

如果必须把筛选逻辑和渲染逻辑拆到两个文件，那你可以在渲染的时候给每个note的div加上和数据对应的唯一标识，比如用noteName（如果不重复的话）作为自定义属性：

// 渲染阶段给div加自定义属性
let div = document.createElement("div");
div.setAttribute("class", "note");
div.dataset.noteName = note.noteName; // 新增这行，把note的名称存在DOM的自定义属性里

然后在筛选逻辑里，拿到数据后遍历，找到对应的DOM再隐藏：

function filterImportant(){
    const fetchFile = async () => {
        const res = await fetch("http://localhost:3001/api");
        const data = await res.json();
        data.notes.forEach((note)=>{
            if(note.important !== "on"){
                // 找到对应的DOM节点
                const targetNote = document.querySelector(`.note[data-note-name="${note.noteName}"]`);
                if(targetNote) targetNote.style.display = "none";
            }
        });
    }
    fetchFile();
}

如果noteName可能重复，你也可以给后端返回的每条note加个唯一id字段，用id作为标识更稳妥。

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