将 DOM 对象转换为 Javascript 对象

Question

我想出了一种合并对象的方法

Object.assign({a:1,b:2},{c:3,d:4})

结果是

{a:1,b:2,c:3,d:4}

现在我有一个视频 DOM 对象，它具有 currentTime,duration

等属性

所以我想将 DOM 视频对象与像这样的简单对象合并

Object.assign(videoElement,{www:1})

结果不是我想要的，有时它只是视频元素，有时它是 {www:1}

所以我想知道是否有任何方法可以将此 DOM 视频对象转换为 javascript对象，以便我可以将它与像这样的简单 javascript 对象合并

Object.assign(ConvertToObject(videoElement),{www:1})

所以我可以创建一个具有我自己的对象属性和视频 dom 元素属性的新对象
在此先感谢，如果您投反对票，请告诉我原因

Answer 1

结果不是我想要的，有时它只是视频元素，有时它是{www:1}

除非您的论点顺序不一致，否则情况不应如此。

Object.assign 不会创建新对象。它通过处理来自后续参数对象的任何直接分配的可枚举属性来修改并返回第一个参数。

以下是一些简单的示例，展示了 DOM 元素的可靠行为：

var link = document.createElement('a');
Object.assign(link, { href: 'https://google.com' }) === link;
console.log(link.outerHTML);

<a href="https://google.com"></a>

var vid = document.createElement('video');
Object.assign(link, { src: 'https://example.com/video.mp4' }) === vid;
console.log(link.outerHTML);

<video src="https://example.com/video.mp4"></video>

如果你把一个不同的对象作为第一个参数，它将被返回。

如果一个属性没有被复制，那可能是因为它是一个“不可枚举”的属性。许多内置的 DOM 元素对象属性是不可枚举的，但这不是特定于 DOM 的。存在具有相同行为的非 DOM 对象。

Answer 2

您可以使用for...in 循环所有属性并从HTML 元素创建普通对象并使用Object.assign() 合并两个对象，这里是Fiddle

var vid = document.querySelector('video');

function convertToObject(obj) {
  obj = {}
  for (var p in vid) {
    obj[p] = vid[p];
  }
  return obj;
}

var result = Object.assign(convertToObject(vid), {www: 1});
console.log(result.www);

<video src=""></video>

Answer 3

DOM 对象不是纯 JavaScript 对象，它们是一种叫做 host objects. 的奇怪东西。简而言之，宿主对象在访问时可能表现不同。他们不必正确报告他们的类型，也不必将方法声明为function 类型和其他类似的怪事。

在读取Object.assign的polyfill方法时，有几行可能会对宿主对象造成问题：

if (Object.prototype.hasOwnProperty.call(source, key)) {
    target[key] = source[key];
}

因此，尽管这样的捷径很有用，但我建议避免使用它。