[对象节点列表]是什么意思?
What does it mean by [Object Nodelist]?
我正在开发一个待办事项简单 html 网页,我在那里添加了一个按钮,用于选择该网页上所有添加的任务并将其添加到用户的 cookies,
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 名称、值及其到期,之后我有一个变量,其中存储了一个名为 getCookie
的函数的 return 值,该函数只是通过 cookie 名称
读取用户 cookie
但是当我在 returned 值上使用 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
这里有一段解释 Array 和 NodeList 之间区别的摘录:
NodeLists and Arrays are two different things because NodeLists are
actually not a JavaScript API, but a browser API.
Things like querySelectorAll() and getElementsByTagName() aren’t
JavaScript methods, they’re browser APIs that let you access DOM
elements. You can then manipulate them with JavaScript.
(source)
话虽如此,节点列表和数组之间没有一对一的转换,结果数组将包含它在浏览器上下文中的所有属性和方法API.
您可以查询节点,并以文本格式(如json)保存它们的一些重要属性,例如它们的维度、数据等。您将必须重新阅读本文并通过 DOM 方法自行创建节点列表。
我正在开发一个待办事项简单 html 网页,我在那里添加了一个按钮,用于选择该网页上所有添加的任务并将其添加到用户的 cookies,
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 名称、值及其到期,之后我有一个变量,其中存储了一个名为 getCookie
的函数的 return 值,该函数只是通过 cookie 名称
但是当我在 returned 值上使用 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
这里有一段解释 Array 和 NodeList 之间区别的摘录:
NodeLists and Arrays are two different things because NodeLists are actually not a JavaScript API, but a browser API.
Things like querySelectorAll() and getElementsByTagName() aren’t JavaScript methods, they’re browser APIs that let you access DOM elements. You can then manipulate them with JavaScript.
(source)
话虽如此,节点列表和数组之间没有一对一的转换,结果数组将包含它在浏览器上下文中的所有属性和方法API.
您可以查询节点,并以文本格式(如json)保存它们的一些重要属性,例如它们的维度、数据等。您将必须重新阅读本文并通过 DOM 方法自行创建节点列表。