將HTML元素對象與自定義對象合併

Question

我想弄清楚爲什麼當其中一個元素是HTML元素時，我無法合併2個或更多對象。

編輯：
爲什麼當我與像obj1和obj2我從公共屬性OBJ 2得到的值，但Object.assign 2「正常」的對象合併時，我做同樣的root這是一個HTML元素我不「T獲得其值（例如id屬性的值）

const root = document.getElementById("root"); 
 
const obj1 = { id: "obj1", textContent: "i am obj1" }; 
 
const obj2 = { id: "obj2", textContent: "i am obj2"}; 
 
const merged1 = Object.assign({}, obj1, obj2); // the new object got the id and textContent from obj2 
 
const merged2 = Object.assign({}, obj1, root); // the new object got the id and textContent from obj1. why not from root? 
 
console.log(merged1); 
 
console.log(merged2); 
 
console.log(root.id); 
 
console.log(root.textContent);

<div id="root">i am root</div>

Answer 1

通root作爲第一個參數Object.assign()

const root = document.getElementById("root"); 
 
const obj1 = { id: "obj1", textContent: "i am obj1" }; 
 
const obj2 = { textContent: "i am obj2"} 
 
const merged = Object.assign(root, obj1, obj2); 
 
console.log(merged); 
 
console.log(root.id); 
 
console.log(root.textContent);

<div id="root">i am root</div>

我不希望重寫root，我希望有一個新的對象，然後從root對象獲得 相關的值。

const root = document.getElementById("root"); 
 
const obj1 = { id: "obj1", textContent: "i am obj1" }; 
 
const obj2 = { textContent: "i am obj2"}; 
 
const {id, textContent} = root; 
 
const merged = Object.assign({}, obj1, obj2, {id, textContent}); 
 
console.log(merged); 
 
console.log(root.id); 
 
console.log(root.textContent);

<div id="root">i am root</div>

編輯：爲什麼當我用Object.assign 2 「正常」 的對象合併像 obj1和obj2我從公共屬性OBJ 2得到的值，但 當我這樣做與root相同，這是一個HTML元素，我沒有得到它的 值（例如值爲id屬性）

Object.assign()可以複製對象的枚舉屬性。 HTMLDivElementid和textContent屬性不可枚舉。

Object.assign()

的Object.assign()方法用於從一個或多個源對象的所有 枚舉自己的屬性的值複製到目標對象 。它會返回目標對象。

const root = document.getElementById("root"); 
 
const props = ["textContent", "id"]; 
 

 
for (const prop of props) console.log(Object.propertyIsEnumerable(root, prop));

<div id="root">i am root</div>