[对象节点列表]是什么意思？

Question

我正在开发一个简单的待办事项 html 网页，我添加了一个按钮，用于选择该网页上所有添加的任务并将其添加到用户的 cookie，

document.getElementById("save-all-btn").addEventListener("click", function(e) {
    let elements = document.querySelectorAll("li");

    setCookie("taskList", elements, 30);
    let Value = getCookie("taskList");
    console.log(Value);
});

就像上面的代码一样，我有一个事件监听器，它在我的按钮单击时运行一个函数，然后这个函数选择我网页上的所有“Li”，然后我有一个函数，我只是用来设置 cookie 名称, value & 它过期了，然后我有一个变量，其中存储了一个名为 getCookie 的函数的返回值，该函数只是通过 cookie 名称读取用户 cookie

但是当我在返回值上使用console.log 时，它会显示[object NodeList]

我很困惑它是什么，有什么方法可以将节点列表保存在 cookie 中，然后将其作为节点列表加载回来并将其附加到我的 HTML 文件中

我的setCookie 和getCookie 函数如下所示：

function setCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    let expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

我从Here得到的这段代码

Answer 1

这里有一段解释 Array 和 NodeList 之间区别的摘录：

NodeLists 和 Arrays 是两个不同的东西，因为 NodeLists 是 实际上不是 JavaScript API，而是浏览器 API。

像 querySelectorAll() 和 getElementsByTagName() 这样的东西不是 JavaScript 方法，它们是允许您访问 DOM 的浏览器 API 元素。然后，您可以使用 JavaScript 操作它们。

(source)

话虽如此，节点列表和数组之间没有一对一的转换，结果数组将包含浏览器 API 上下文中的所有属性和方法。

您可以查询节点，并以文本格式（如 json）保存节点的一些重要属性，例如尺寸、数据等。您必须阅读此文本并通过 DOM 方法自己创建节点列表。