2

私は持っていDOMます：

<body>
      <div>
         <h1 id="header1">home1</h1>
         <a id="link1">link1</a>
         <p id="para1">things1</p>
      </div>
      <span>
         <h1 id="header2">home2</h1>
         <a id="link2">link2</a>
         <p id="para2">para2</p>
      </span>
</body>

これを好きなようにインデックス付けしたいJSON：

{
"body": {
    "div": [
        {
            "h1": "header1",
            "a": "link1",
            "p": "para1"
        }
    ],
    "span": [
        {
            "h1": "header2",
            "a": "link2",
            "p": "para2"
        }
    ]
  }
}

私はこれを試しました：

  function indexELEMS()
  {
    listy = $("*[id]").map(function(){

        outy = this.tagName+":"+this.id;

        return outy;
    }).get();

    DOMobj = $.extend({}, listy);

    console.log(DOMobj);

  }

しかし、私はこのようなものを得ます:

0:"h1:home"
1:"a:link1"
2:"p:things1"

理解できます。関数にそれを行うように指示したところです。

しかし、次h1のようなだけで試してみると：

  function indexELEMS()
  {
           outy = {};
    listy = $("h1[id]").map(function(){

        outy.h1s = this.tagName+":"+this.id;

        return outy;
    }).get();

    DOMobj = $.extend({}, listy);

    console.log(DOMobj);

  }

最後のオブジェクトで上書きしますがouty.h1s、(JSON) オブジェクトに追加するにはどうすればよいですか?

さらに良いことに、ドキュメント要素構造全体の出力を適切な JSON 形式で取得するにはどうすればよいでしょうか?

私はできる：$('document > body > div > h1').attr('id')毎回、しかしそれは非常に非効率的でリソースを大量に消費する.すべての要素をキャッシュしてからそれらを読みたい.watch. 、適切な位置に要素を作成します。

または、どの要素がIDs を持っているか (そしてそれIDが重複しているかどうかを確認する)、いくつかのネイティブ関数の概要を取得するより良い方法はありますか?

また、JSON オブジェクトが複数のdiv:エントリを許可しないのではないかと心配しています。

それとも、完全に jQuery セレクターを使用して、効率性について泣き言を言うのをやめるべきですか?

(編集:わかりました。複数の div 部分はおそらく不可能です。または、 .div[1] で 2 番目の部分にアクセスできませんか?)

したがって、私の主な質問は、 indexELEMS 関数を使用する場合、次の方法でアクセス可能なオブジェクトを取得するにはどうすればよいかということです。

DOMobj.body.div.h1

だから私はそれを実行したり、ループIf ==で循環したりできますdiv.[index]$.each

$(' ') の代わりに DOMobj.body[index] を巡回すると、$(' ') から作成されたオブジェクトに実際にアクセスできるのでしょうか? 体のような？そう簡単にはいかない..

4

1 に答える 1

1

あなたの構造は内部的に一貫性<body>がありません: オブジェクトの子がありますが、そのすべての子は単一オブジェクトの配列です。これを任意のページ DOM にマップする必要がありますか?それとも独自のカスタム DOM にマップする必要がありますか?

任意の DOM を JSON として表現できるようにしたい場合、求めるのはむしろこのようなものですか?

[ { "tag": "body"
  , "children":
    [ { "tag": "div"
      , "children":
        [ { "tag": "h1"
          , "id": "header1"
          }
        , { "tag": "a"
          , "id": "link1"
          }
        , { "tag": "p"
          , "id": "para1"
          }
        ]
      }
    , { "tag": "span"
      , "children":
        [ { "tag": "h1"
          , "id": "header2"
          }
        , { "tag": "a"
          , "id": "link2"
          }
        , { "tag": "p"
          , "id": "para2"
          }
        ]
      }
    ]
  }
]

この JSON オブジェクトの case のみを使用して DOM に関するクエリに応答し、いくつかの反復を行う場合は、 $('your.selector.here').each および必要なテストを実行する同様のコードを使用するのがおそらく最善です。

<body>DOM 全体を手動でインデックス化する場合 (の 2 番目の<div>子の 5 番目の<a>要素を見つけ、そのid属性が であるかどうかを教えてください"link5")、XPath が必要です。

document.evaluate('//body/div[2]/a[5]/@id = "link5"', document).booleanValue
于 2012-06-21T18:45:50.370 に答える