Convert DOM-Objekt zu JavaScript-Objekt

Question

I kam ein Verfahren um Objekte zu fusionieren

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

Ergebnis ist

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

Jetzt habe ich ein Video DOM-Objekt, das Eigenschaften wie current haben, Dauer

Also wollte ich DOM Video-Objekt mit einem einfachen Objekt wie dieses

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

Ergebnis verschmelzen ist nicht das, was ich wollte, manchmal ist es nur das Videoelement und manchmal seine {www: 1}

So ich frage mich, ob es eine Methode ist, dieses DOM Video-Objekt JavaScript-Objekt zu konvertieren, so dass ich es mit einfachen JavaScript-Objekten wie diese

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

so verschmelzen kann ich könnte eine erstellen ew Objekt mit Eigenschaften meiner eigenen Objekt und Video dom Elementeigenschaften
Vielen Dank im Voraus und wenn Sie niederstimmen bitte lasst Sie mich weiß, warum

Answer 1

Sie for...in Schleife alle Eigenschaften verwenden könnte und normales Objekt aus HTML Element erstellen und Object.assign() verwenden zwei Objekt zu verschmelzen, ist hier 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 2

DOM-Objekte nicht reine JavaScript-Objekte sind, sind sie ein seltsames Ding namens host objects. Kurz gesagt, Host-Objekte Mai verhalten sich anders, wenn zugegriffen wird. Sie müssen ihren Typ nicht korrekt melden, noch müssen sie Methoden wie Typ function und andere solche Seltsamkeiten beanspruchen.

Wenn die polyfill Methode Object.assign zum Lesen, gibt es ein paar Zeilen, die Probleme auf dem Host-Objekte verursachen könnten:

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

als solche, so nützlich wie eine solche Abkürzung wäre, ich kann es empfehlen, zu vermeiden.

Answer 3

Ergebnis ist nicht das, was ich wollte, manchmal ist es nur das Videoelement und manchmal seine {www:1}

Dies sollte nicht der Fall sein, wenn Sie in Ihrer Reihenfolge der Argumente inkonsistent zu sein sind.

Object.assign erstellt kein neues Objekt. Es ändert das erste Argument und gibt es zurück, indem alle direkt zugewiesenen aufzählbaren Eigenschaften von nachfolgenden Argumentobjekten übernommen werden.

Hier sind einige einfache Beispiele zuverlässige Verhalten mit DOM-Elementen demonstriert:

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> 

Wenn Sie ein anderes Objekt als erstes Argument gesetzt, es wird stattdessen zurückgegeben.

Wenn eine Eigenschaft nicht kopiert wird, liegt das wahrscheinlich daran, dass es sich um eine nicht aufzählbare Eigenschaft handelt. Viele integrierte DOM-Element-Objekteigenschaften sind nicht aufzählbar, aber dies ist nicht DOM-spezifisch. Es gibt Nicht-DOM-Objekte mit demselben Verhalten.