使用自定义对象合并HTML元素对象 [英] Merge HTML Element object with a custom object

问题描述

我试图找出为什么当其中一个是HTML元素时，我无法合并2个或更多的对象。

编辑：

为什么当我与 Object.assign 2正常对象，如 obj1 和 obj2 我从常用属性中获取obj2的值，但是当我对 root 做同样的事情，这是一个HTML元素，我没有得到它的值（例如 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 ）; //新对象从obj2const获取id和textContent mergeed2 = Object.assign（{}，obj1，root）; //新对象从obj1获取id和textContent。为什么不从root？console.log（merged1）; console.log（merged2）; console.log（root.id）; console.log（root.textContent）;  

 < div id =root>我是root< / div>  / pre> 

解决方案

通过根作为第一个参数 Object.assign（）

 < div id =root>我是root< / div> code> 

我不想覆盖根，我想要一个新对象，并获得
相关值来自根对象

  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>我是root< / div>  




编辑：为什么当我合并 Object.assign 2正常对象像
obj1 和 o bj2 我从公共属性中获取obj2的值，但是当我使用 root 这样的HTML元素时，
不能获得
值（例如$ code> id 属性值）

Object.assign（）可以复制对象的枚举属性。 HTMLDivElement id 和 textContent 属性不可枚举。 p>

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>我是root< / div> ;  

I'm trying to figure out why I can't merge 2 or more objects when one of them is an HTML Element.

EDIT:
Why when i merged with Object.assign 2 "normal" objects like obj1 and obj2 i get the values from obj2 on common properties, but when i do the same with root which is an HTML element i don't get its values (for example the value of id property)

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>

解决方案

Pass root as first parameter to 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>

i don't want to override root, i want a new object and get the relevant values from the root object.

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>

EDIT: Why when i merged with Object.assign 2 "normal" objects like obj1 and obj2 i get the values from obj2 on common properties, but when i do the same with root which is an HTML element i don't get its values (for example the value of id property)

Object.assign() can copy enumerable properties of an object. HTMLDivElement id and textContent properties are not enumerable.

Object.assign()

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

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>

这篇关于使用自定义对象合并HTML元素对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！