将页面元素索引到JSON对象？还是jQuery选择器每次？ [英] Indexing page elements to JSON object? Or jQuery selector it every time?
问题描述
我有一个 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
}
]，
跨度：[
{
h1：header2，
a：link2，
p：para2
}
]
}
}
我已经尝试过： / p>
function indexELEMS（）
{
listy = $（* [id]） 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 s（并检查 ID 是否重复） ，一些本机函数？
我也担心JSON对象不会允许多个 div：条目？
或者我应该完全去jQuery选择器d停止呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜]] ？）
所以，我的主要问题是，如果你使用indexELEMS函数，我该如何获取一个可访问的对象：
DOMobj.body.div.h1
所以我可以做一个 If == ，或者用 div循环。[index] 在 $。每个循环
我会想，骑自行车通过DOMobj.body [index]而不是$（ '哦，等等，我可以实际访问从$（''）创建的对象吗？像.body？
您的结构内部不一致：< body> 有一个对象子对象，但它的所有子对象都是array-with-a-single-object。是否应该将其映射到任何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对象的案例来回答查询ab出现DOM，并进行一些迭代，最好使用$（'your.selector.here'）。每个和相似的代码执行你想要的测试。
如果要手动索引通过DOM索引（找到< body> 的第二个< div> child的第五个< a> 元素，并告诉我，如果它的 id 属性是link5），你想要XPath：
document.evaluate（'// body / div [2] / a [5] / @ id =link5'，document）.booleanValue
I have a 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:
{
"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:
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?
Or better yet, how do I get the whole document element structure output in nice JSON form?
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.
Or is there a better way get an overview of which elements have IDs (and check if that ID is duplicate or not), some native function?
I'm also afraid that the JSON Object won't allow multiple div: entries?
Or should I just go for the jQuery selector completely and stop whining about efficiency?
(edit: Ok, the multiple div part is maybe not possible, or can't I access the second one with .div[1] ?)
So, my main question would be, if you take the indexELEMS function, how can I get an object that is accesibly by:
DOMobj.body.div.h1
So I can do an If == on it, or cycle through it with div.[index] in a $.each loop
I would think, cycling through DOMobj.body[index] instead of $(''), oh wait, can I actually access the object created from $('')? like .body? It can't be that easy..
Your structure is internally inconsistent: <body> has an object child, but all its children are array-with-a-single-object. Should this map to any page DOM or just some custom one of your own?
If you want any DOM to be able to be represented as JSON, is what you seek rather something like this?
[ { "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.
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:
document.evaluate('//body/div[2]/a[5]/@id = "link5"', document).booleanValue
这篇关于将页面元素索引到JSON对象？还是jQuery选择器每次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
