错误消息：“无法克隆传递的参数 [[object HTMLHeadElement]]”

Question

我想在控制台中的 JavaScript 中将元素显示为 HTML DOM 中的对象，以便查看该对象的“树”模式。但如果我这样做，我得到的信息是：

“无法克隆第 1 行传递的参数 [[object HTMLHeadElement]]”

我尝试使用 console.log(document.getElementsByTagName("head")[0]);

Answer 1

错误消息“无法克隆第 1 行传递的参数 [[object HTMLHeadElement]]”表明浏览器的控制台在直接将 DOM 元素显示为对象时遇到问题。这可能是由于克隆和显示 DOM 元素涉及的复杂性。

但是，还有其他方法可以在控制台中将 DOM 元素作为对象进行检查：

使用

console.dir()

console.dir()

方法允许您显示指定 JavaScript 对象的属性的交互式列表。该方法提供了一种查看 DOM 对象属性的方法。

console.dir(document.getElementsByTagName("head")[0]);

将 JSON.stringify 与替换函数一起使用

您可以将

JSON.stringify()

与替换函数一起使用，将 DOM 对象转换为 JSON 字符串。但是，这将仅包括可枚举属性，并将丢失所有方法和 DOM 特定的行为。

console.log(JSON.stringify(document.getElementsByTagName("head")[0], (key, value) => {
  if (value instanceof Node) return 'Node';
  if (value instanceof Window) return 'Window';
  return value;
}, 2));

使用对象.分配

您可以使用

Object.assign()

创建对象的浅表副本。这将仅包括对象自己的可枚举属性。

console.log(Object.assign({}, document.getElementsByTagName("head")[0]));

这些方法都有其自身的局限性，但它们可以在控制台中为您提供对象属性的“树”状视图。