Question

我正在寻找一种方法来向DOM添加javascript对象，而无需重新定义对象。

我创建了一个函数，将所有对象方法放入一个新对象中，将对象重新定义为一个新的DOM元素，然后将所有对象放回到它上面，但这并不是我想要的。我需要在不使用任何return语句的情况下更新对象。

function addToDOM(obj) {
    temp = {};
    for (p in obj) {
        temp[p] = obj[p];
    }
    obj = document.createElement('prop');
    document.body.appendChild(obj);
    for (p in temp) {
        obj[p] = temp[p];
    }
    return obj;
}

var obj = {var1:123};
obj = addToDOM(obj);

生成的代码模板应该是这样的：

function addToDOM(obj) {
    //Code for method
    //No return statement
}

var obj = {var1:123};
//No obj=
addToDOM(obj);

要实现这一点，obj =函数中必定没有addToDOM，因此永远不会重新定义它，也不需要返回语句。有没有办法简单地将javascript对象扩展到DOM？

Answer 1

不，JavaScript对象无法像这样添加到文档中 - appendChild()方法期望某些类型的对象，通常使用document.createElement()方法创建。

因此，您必须每次都创建新的DOM元素，或者克隆现有的元素。

假设您想拥有某种“模板”元素，我建议使用全局变量来保存该元素，创建一次然后每次克隆它并放入新属性。

代码就是：

var _globalDOMobj = 0;
function addToDOM(obj) {
    temp = {};
    for (p in obj) {
        temp[p] = obj[p];
    }
    if (!_globalDOMobj) {
        _globalDOMobj = document.createElement('prop');
        _globalDOMobj.className = "myprop";
    }
    obj = _globalDOMobj.cloneNode(true);
    obj.innerHTML = "I am dynamic element";
    document.body.appendChild(obj);
    for (p in temp) {
        obj.setAttribute(p, temp[p]);
    }
    return obj;
}

addToDOM({"var1": "123", "style": "color: red;"});
addToDOM({"var2": "789", "style": "color: blue;"});

如您所见，您可以将对象直接传递给函数，而无需先将其分配给变量。

此外，要在DOM元素中应用对象属性，必须使用setAttribute()，否则这些属性将不会成为DOM的一部分。

在上面的代码中，模板对于所有实例都具有相同的类，因此您可以应用一些CSS来影响它们，例如。

.myprop { font-weight: bold; }

Live test case

Answer 2

“向DOM添加JS对象”的概念实际上没有任何意义，实际上您的代码不这样做，它正在创建一个新的<prop>元素并从对象中分配属性。我没有看到这一点：您希望浏览器对<prop>元素做什么？

无论如何，继续讨论如何不从函数返回对象并将其分配回变量的问题，你不能。 JavaScript按值传递参数 - 在这种情况下，“value”是对对象的引用。您可以更改对象的属性，但不能使传递的变量指向其他对象。（显然你可以使声明的参数obj指向其他对象，就像你正在做的那样。）

但是这会导致可能的解决方法可能对您有所帮助：相反，您只需向现有对象添加属性，新属性引用DOM对象 -

function addToDOM(obj) {
    var temp = document.createElement('prop');
    document.body.appendChild(temp);
    for (var p in obj) {
        temp[p] = obj[p];
    }
    obj.myDOMElement = temp;
}

var obj = {var1:123};
//No obj=
addToDOM(obj);
// obj now has a property myDOMElement that references the DOM element

请注意，我已稍微简化了您的功能：您无需将所有obj属性复制到temp，然后在重新分配后将所有属性复制回obj obj到新的DOM元素。（即使您决定继续使用当前代码返回新对象的想法，您也可以使用我的简化表单，只需return temp。）

请注意，您应该使用var声明变量，否则它们将是全局的。

将JavaScript对象添加到DOM中

2 个答案: