有什么聪明的方法可以序列化HTML元素吗？-Javascript

Question

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

例如，如果我单击一个div并在Javascript中保存一个指向该div的指针，是否有一种方法可以序列化此类指针？所以我可以反序列化它，并在Web应用程序的另一个实例中使用指针？

---

我只能想到的方法如下：

• 使用ID或名称属性

• 为该元素创建一个CSS选择器

还有其他想法吗？=）

Answer 1

您可以尝试为元素生成 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'

但是您可能可以通过限制某些属性（也许只是 ID）来找到一个不错的中间立场：

'//html/body/div[@id="wrapper"]/div[@id="firstentry"]/p/strong'

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

var myElement=document.evaluate(
  XPathstring,
  document,
  function(ns){return{'html':'http://www.w3.org/1999/xhtml','':null}[ns];},
  9,
  null
).singleNodeValue;

（ns功能纯粹是如果你需要application/xhtml+xml支持）

IE 方法更简单但灵活性较差：

var myElement=document.selectSingleNode(XPathString);

当然，创建 XPath 字符串是一个不同的问题 - 有多种选项，不幸的是没有一个是原生的。XPather 是一个 moz 插件，提供了一个执行此操作的接口 - 它的源代码是 MPL 的并且相对简单，但可能超出您的需要。有各种较短的脚本可以提供更简单的解决方案。

编辑： Justin Johnson 提供了一个指向 SO 答案的链接，其中包含一个非常短的 XPath 生成函数。它有点简单化，它使用奇怪的 id 表示法（id(blah)而不是[@id="blah"]），并且toLowerCase()它的tagNames 不会影响可移植性，但除此之外它看起来非常适合您的需求。