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

Indexing page elements to JSON object? Or jQuery selector it every time?

本文关键字：jQuery 或者 选择器 对象 元素 索引 JSON      更新时间：2023-09-26

我有一个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 s（并检查该ID是否重复），一些本机函数？

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

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

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

因此，我的主要问题是，如果您采用 indexELEMS 函数，我如何获得一个可通过以下方式访问的对象：

DOMobj.body.div.h1

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

我想，循环浏览 DOMobj.body[index] 而不是 $（''），哦，等等，我真的可以访问从 $（''） 创建的对象吗？这不可能那么容易。

您的结构内部不一致：<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
相关文章：