Convert DOM Object to Javascript Object

Question

I came around a method to merge objects

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

Result is

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

Now I have a Video DOM Object which have properties like currentTime,duration

So I wanted to merge DOM Video Object with a simple object like this

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

Result is not what I wanted , sometimes its only the video element and sometimes its {www:1}

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

So I could create a new object having properties of my own object and video dom element properties
Thanks in advance and If you vote down please let me know why

Answer 1

Result is not what I wanted , sometimes its only the video element and sometimes its {www:1}

This should not be the case unless you're being inconsistent in your order of arguments.

Object.assign does not create a new object. It modifies and returns the first argument, by coping any directly-assigned enumerable properties over from subsequent argument objects.

Here are some simple examples demonstrating reliable behaviour with DOM elements:

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>

If you put a different Object as the first argument, it will be returned instead.

If a property isn't being copied, it's probably because it's a "non-enumerable" property. A lot of built-in DOM Element Object properties are non-enumerable, but this isn't DOM-specific. There are non-DOM objects with the same behaviour.

Answer 2

You could use for...in to loop all properties and create normal object from HTML element and use Object.assign() to merge two object, here is 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 objects are not pure JavaScript objects, they are a weird thing called host objects. In short, host objects may behave differently when accessed. They don't have to report their type correctly, nor do they have to claim methods as type function and other such weirdness.

When reading the polyfill method for Object.assign , there are a few lines that might cause trouble on host objects:

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

as such, as useful as such a short cut would be, I recommend avoiding it.