Question

我有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），或者在对象中添加，在适当的位置创建一个元素。

或者是否有更好的方法来概述哪些元素具有ID（并检查ID是否重复），一些原生函数？

我还担心JSON对象不允许多个div:条目？

或者我应该完全选择jQuery选择器并停止抱怨效率？

（编辑：好的，多个div部分可能不可能，或者我不能用.div [1]访问第二个？）

所以，我的主要问题是，如果你采用indexELEMS函数，我怎样才能获得一个可访问的对象：

DOMobj.body.div.h1

所以我可以对其进行If ==，或者在div.[index]循环中使用$.each进行循环

我认为，循环使用DOMobj.body [index]而不是$（''），等等，我可以实际访问从$（''）创建的对象吗？喜欢.body？它不是那么容易..

Answer 1

您的结构内部不一致：<body>有一个对象子对象，但它的所有子对象都是一个对象的数组。这应该映射到任何页面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对象的大小写来回答有关DOM的查询，并进行一些迭代，那么最好使用$（'your.selector.here'）。每个和类似的代码执行测试你想。

如果你想在DOM中一直手动索引（找到<body>的第二个<div>孩子的第五个<a>元素，并告诉我它是否{{1} } attribute是id），你想要XPath：

"link5"

将页面元素索引到JSON对象？或者每次jQuery选择它？

1 个答案: