将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>