0

オブジェクトを再定義せずに、JavaScriptオブジェクトをDOMに追加する方法を探しています。

すべてのオブジェクトメソッドを新しいオブジェクトに入れ、そのオブジェクトを新しいDOM要素として再定義し、すべてのオブジェクトをそのオブジェクトに戻す関数を作成しましたが、これは私が望んでいることではありません。returnステートメントを使用せずにオブジェクトを更新する必要があります。

ここに例があります：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 =、関数内に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

関数をいくらか単純化したことに注意してください。新しい DOM 要素に再割り当てした後、すべてのobjプロパティをtempにコピーして、すべてのプロパティを元に戻す必要はありません。(新しいオブジェクトを返すという現在のコードの考え方にとどまることにした場合でも、単純化された形式を使用して.objobjreturn temp

また、変数を宣言する必要があることに注意してください。そうしvarないと、グローバルになります。

于 2012-08-15T07:30:31.340 に答える