序列化HTML元素有什么巧妙的方法吗？-Javascript

我正在尝试存储HTML标记的引用，以供以后重用。

e、 如果我点击一个div并在Javascript中保存一个指向该div的指针，有没有办法序列化这样的指针？所以我可以反序列化它并在web应用程序的另一个实例中使用指针

---

我能想到的唯一方法如下：

• 使用id或name属性

• 为该元素创建CSS选择器

---

还有其他想法吗

唯一合乎逻辑的方法是使用id

---

通常，根据数据库值为所有重要元素分配id并不困难。

我尝试过以下方法：

{tag:"div", style:"float:left;", "class":"fancy", inner:[
  {tag:"a", href:"http://google.com", inner:"A link to google!" },
  {tag:"a", href:"http://yahoo.com", inner:"A link to yahoo!" }
]}

看起来效果不错，不过用这些花括号很容易迷路

---

编辑-也许我完全误解了你想要什么。。。如果您想序列化该元素的句柄，比如getElementById将返回的句柄，那么最好只使用该id。

它看起来像JSON.stringify（yourDivReference）和JSON.parse（serializedObjectString）可以完成您要查找的任务

更新：实际上，JSON方法不喜欢DOM中的循环引用。有关更多详细信息，请参见此问题：

---

不过，我同意Sergey的观点，使用ID似乎是一种更好的方式。

你到底想保存什么？你到底在哪里使用它

---

DOM元素将非常特定于该页面上的特定浏览器呈现——只需点击refresh将为您提供一个全新的DOM元素。那么，您需要保存和重新创建它吗

元素的innerHTML如何？

根据您对问题的措辞，我认为这是不可能的。“web应用程序的另一个实例”到底是什么意思？由于JavaScript将在客户端运行，您将无法在客户端之间共享数据。但是，您可能需要执行类似于存储/读取数据库的操作。您能描述一下您试图实现的更多功能吗？

您可以尝试为元素生成XPath字符串-字符串越复杂，标识符就越准确和可移植

例如，一个简单的纯元素XPath查询字符串不会是唯一的，并且可能会再次出现：

'//html/body/div/div/p/strong'

在所有属性中进行因子分解可能是过分的

'//html/body[@onclick="somereallylongjavascript" and class="nosidebar"]/div[@id="wrapper" and @class="posts"]/div[@class="entry" and @id="firstentry"]/p[@class="first"]/strong'

您可以在所有浏览器中以本机方式检索XPath。有W3C方法：


var myElement=document.evaluate(
  XPathstring,
  document,
  function(ns){return{'html':'http://www.w3.org/1999/xhtml','':null}[ns];},
  9,
  null
).singleNodeValue;
（如果您需要应用程序/xhtml+xml支持，ns函数仅适用于此）

IE方法更简单，但灵活性更低：

var myElement=document.selectSingleNode(XPathString);

创建XPath字符串当然是另一个问题——有各种选项，不幸的是没有。XPather是一个moz插件，它提供了一个实现这一点的接口——它的源代码是MPL-ed，相对简单，但可能比您需要的更多。可以使用各种较短的脚本来提供更简单的解决方案

编辑：Justin Johnson提供了一个指向SO答案的链接，该答案包含一个非常短的XPath生成函数。它有点简单，它使用了奇怪的id表示法（
id（blah）
而不是
[@id=“blah”]
），并且没有
toLowerCase（）；但是，仅当页面结构在该节点之前（相对）是静态的。以下是一些参考资料和代码：

并举例说明

getPathTo($("a")[4]):

屈服

"id("hlinks-custom")/A[2]"

另一个想法-根据一些规则为所有元素生成自己的自定义id：

元素id从父id开始。->customid=“body/item”
如果正常id可用，请使用它。如果不是，则使用元素类型。然后在当前子树中添加顺序
因此，您将获得类似于上面示例中的“body-0/item-0”或“body-0/div-4”的内容（如果id未知）

当您尝试使用“自定义id”并更改页面时，您将有机会找到最接近的元素，将所有元素的自定义id与存储的“自定义id”进行比较。
问题是，并不是每个可单击的元素都保证有一个id。因此，我认为基于公共属性构建css选择器将更有效。e、 g.class href src标记…我会限制用户仅从其下有逻辑项的元素中进行选择。我开始理解你的问题了——你正在构建一个必须使用通用html的工具。@RadiantHex如果不使用一些黑客算法或繁重的JS库，你就无法在javascript中检索CSS选择器——这两种方法都不有效。另一方面，XPath在每个浏览器中都是本机支持的，而且速度非常快。它可以是空元素，也可以是重复元素。这也会非常低效，因为每次都需要在整个文档中搜索字符串。嗯，我不知道他到底想做什么，但这确实符合序列化HTML元素的要求，正如他所要求的——当然，“重用”指针本身是不成问题的。从我在这里看到的答案来看，似乎很多人将他的问题解释为“序列化对元素的引用”，而不是“序列化元素本身”。他要求能够“反序列化并用作指针”，因此这显然是一个引用。他也给出了使用ID或“CSS选择器”的例子——这两种引用。谢谢各位=）我想innerHTML将是尝试序列化指针的准确方法。我开始想，我可以使用标记名称存储页面的树结构，然后只为每个元素存储某种选择器。谢谢！！这实际上是我所想的一个版本。这是一个很好的回答，我非常感谢你！！我想我可以勾选这个=）
"id("hlinks-custom")/A[2]"