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但是，如果我在's上试一下，就像这样：

  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] 访问第二个部分？）

所以，我的主要问题是，如果你使用 indexELEMS 函数，我怎样才能得到一个可以通过以下方式访问的对象：

DOMobj.body.div.h1

所以我可以If ==在上面做一个，或者div.[index]在一个循环中$.each循环

我想，通过 DOMobj.body[index] 而不是 $(' ') 循环，哦等等，我真的可以访问从 $(' ') 创建的对象吗？像.body？不可能那么容易..

4

1 回答 1

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').each 和类似的代码来执行您想要的测试。

如果您想手动索引整个 DOM（找到<body>的第二个<div>孩子的第五个<a>元素，并告诉我它的id属性是否为"link5"），您需要 XPath：

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