将页面元素索引到JSON对象？还是每次都有jQuery选择器？

Question

I have a DOM : 我有一个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>

I want to index this to JSON like: 我想将其索引为JSON例如：

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

I've tried this: 我已经试过了：

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

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

        return outy;
    }).get();

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

    console.log(DOMobj);

  }

But I get something like this: 但是我得到这样的东西：

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

Understandable, I've just told the function to do that. 可以理解，我刚刚告诉函数要这样做。

But if I try it on just the h1 's like this: 但是，如果我仅在h1上这样尝试：

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

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

        return outy;
    }).get();

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

    console.log(DOMobj);

  }

It will overwrite the outy.h1s with the last one, how do I add it to the (JSON)object? 它将用最后一个覆盖outy.h1s ，如何将其添加到（JSON）对象？

Or better yet, how do I get the whole document element structure output in nice JSON form? 或者更好的是，如何以良好的JSON格式输出整个文档元素结构？

I could do: $('document > body > div > h1').attr('id') every time, but that's pretty inefficient and resource intensive, I want to cache all the elements and then read them out, and when they change, (maybe I'll watch the object with .watch ), or is added in the object, create an element in the appropriate position. 我可以这样做： $('document > body > div > h1').attr('id')每次，但这效率低下且占用大量资源，我想缓存所有元素，然后将其读出，以及何时读取它们更改（也许我将使用.watch监视对象），或者将其添加到对象中，然后在适当的位置创建一个元素。

Or is there a better way get an overview of which elements have ID s (and check if that ID is duplicate or not), some native function? 还是有更好的方法来概述哪些元素具有ID （并检查该ID是否重复）和某些本机功能？

I'm also afraid that the JSON Object won't allow multiple div: entries? 我还担心JSON对象不允许多个div:条目？

Or should I just go for the jQuery selector completely and stop whining about efficiency? 还是我应该完全选择jQuery选择器并停止抱怨效率？

(edit: Ok, the multiple div part is maybe not possible, or can't I access the second one with .div[1] ?) （编辑：好的，可能无法使用multi div部分，或者我不能使用.div [1]访问第二个部分吗？）

So, my main question would be, if you take the indexELEMS function, how can I get an object that is accesibly by: 因此，我的主要问题是，如果您使用indexELEMS函数，那么如何通过以下方式获得可访问的对象：

DOMobj.body.div.h1

So I can do an If == on it, or cycle through it with div.[index] in a $.each loop 因此，我可以对其执行If == ，也可以在$.each循环中使用div.[index] $.each循环

I would think, cycling through DOMobj.body[index] instead of $(' '), oh wait, can I actually access the object created from $(' ')? 我想，通过DOMobj.body [index]而不是$（' '）循环，哦，等等，我可以实际访问从$（' '） 创建的对象吗？ like .body? 喜欢.body？ It can't be that easy.. 不可能那么容易..

Answer 1

Your structure is internally inconsistent: <body> has an object child, but all its children are array-with-a-single-object. 您的结构内部不一致： <body>有一个对象子对象，但是它的所有子对象都是带有单个对象的数组。 Should this map to any page DOM or just some custom one of your own? 该映射应该映射到任何页面DOM还是仅映射到您自己的某个自定义页面？

If you want any DOM to be able to be represented as JSON, is what you seek rather something like this? 如果您希望将任何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"
          }
        ]
      }
    ]
  }
]

If you only use case for this JSON object to answer queries about the DOM, and do some iteration, you're probably best off using $('your.selector.here').each and similar code performing the tests you want. 如果仅使用此JSON对象的用例来回答有关DOM的查询并进行一些迭代，则最好使用$（'your.selector.here'）。each和类似的代码来执行所需的测试。

If you want to index manually all the way down through the DOM (find the <body> 's second <div> child's fifth <a> element, and tell me if its id attribute is "link5" ), you want XPath: 如果要一直手动索引整个DOM（找到<body>的第二个<div>子元素的第五个<a>元素，并告诉我其id属性是否为"link5" ），则需要XPath：

document.evaluate('//body/div[2]/a[5]/@id = "link5"', document).booleanValue

将页面元素索引到JSON对象？还是每次都有jQuery选择器？

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-06-21 18:45:50

将页面元素索引到JSON对象？ 还是每次都有jQuery选择器？

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-06-21 18:45:50

将页面元素索引到JSON对象？还是每次都有jQuery选择器？

解决方案1
1 已采纳 2012-06-21 18:45:50