javascript - 关于 DOM 元素的哪些信息可以让 JavaScript 唯一地(某种程度上)识别它？ (例如，当它没有 `id` 时)

Question

这是我正在尝试做的事情:我有一个小书签，它正在当前页面(可以是任何站点)中寻找元素，并在匹配的元素上发送点击事件。我有那个部分在工作。

但在某些情况下，没有任何内容会自动匹配，我希望能够显示(通过将其悬停)应激活的元素，然后将一些相关信息保存在 localStorage 中。下次我在该页面上使用小书签时，我想检索该信息以识别 DOM 中的元素，然后发送点击事件。

问题是:我应该保存哪些信息以便能够识别它？(在大多数情况下，因为总是有可能创建它不起作用的情况) p>

在最好的情况下，said-element 将有一个 id 值，我很高兴。在其他一些情况下，它不会，我希望看到您关于我应该使用什么信息和什么方法取回它的建议。

到目前为止，我的想法是保存元素的一些属性并遍历 DOM 以找到匹配所有元素的元素。并非所有属性都有效(例如 clientWidth 将取决于浏览器的大小)并且并非所有类型的元素都具有所有属性(例如 div 节点不会有src 值)，这意味着一方面，我不能盲目地保存所有属性，但另一方面，我需要选择适用于任何类型的有限属性列表元素(有丢失一些有用信息的风险)或不同元素有不同的大小写(这听起来不太好)。

我认为我可以使用的东西:

• 当然是id
• className、tagName 会有所帮助，但在某些情况下 className 可能不是明确匹配
如果内容是文本，
• innerHTML 应该在很多情况下都能正常工作
如果内容是图像，
• src 应该在大多数情况下有效
• 祖先的层次结构(但这可能会变得困惑)
• ...?

所以，我的问题有点像“你会怎么做？”，不一定是代码。谢谢!

Answer 1

你可以按照@brendan 所说的去做。您还可以为 DOM 中的每个元素构建一个 jQuery 样式的选择器字符串，方法是根据元素在其父级子节点列表中的位置确定元素的“索引”，然后通过将 DOM 向上移动到正文标签。

你最终得到的是看起来像的东西

body > :nth-child(3) > :nth-child(0) > :nth-child(4)

当然，如果 DOM 发生变化，那将不会很好地工作。你可以添加类名等，但正如你自己所说，如果你没有一个好的“id”开始，那么这样的事情本质上是脆弱的，一个在页面创建时通过任何逻辑知道应该是什么的东西页面放在首位。