Convert DOM Object to Javascript Object - Stack Overflow

admin管理员组

文章数量:1401670

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}

So I was wondering if there is any method to convert this DOM Video Object to javascript object so that I can merge it with simple javascript objects like this

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

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}

So I was wondering if there is any method to convert this DOM Video Object to javascript object so that I can merge it with simple javascript objects like this

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

• javascript
• dom
• video
• merge

Share Improve this question Follow asked Jun 9, 2016 at 18:09 Waqas TahirWaqas Tahir 8,31288 gold badges2929 silver badges5656 bronze badges 3

• Is using jQuery an option for you? – Hector Barbossa Commented Jun 9, 2016 at 18:12
• No , Sorry but I am just starting to learn it I would really prefer a pure javascript way – Waqas Tahir Commented Jun 9, 2016 at 18:12
• Related: How to serialize DOM node to JSON even if there are circular references? – Jeremy Banks Commented Jun 9, 2016 at 18:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>

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.' }) === link;
console.log(link.outerHTML);

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

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

<video src="https://example./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.

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 remend avoiding it.

本文标签： Convert DOM Object to Javascript ObjectStack Overflow