0

我正在寻找一种在不重新定义对象的情况下将 javascript 对象添加到 DOM 的方法。

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

我在这里有一个例子：http: //jsfiddle.net/y56wS/

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 =内必须有 no addToDOM，这样它就不会被重新定义，也不需要 return 语句。有没有办法简单地将 javascript 对象扩展到 DOM 上？

4

2 回答 2

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; }​

​现场测试用例。

于 2012-08-15T07:10:19.330 回答
1

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

无论如何，继续讨论关于如何不必从函数返回对象并将其分配回变量的问题，你不能。JavaScript 按值传递参数 - 在这种情况下，“值”是对对象的引用。您可以更改对象的属性，但不能使传入的变量指向其他对象。（显然，您可以使声明的参数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属性复制到，然后在重新分配给新的 DOM 元素后将temp所有属性复制回。（即使您决定保留当前代码返回新对象的想法，您也可以使用我的简化形式，只需.）objobjreturn temp

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

于 2012-08-15T07:30:31.340 回答