有關DOM元素的哪些信息將允許JavaScript（有些）唯一地識別它？ （例如，當它沒有`id`時）

Question

這是我正在嘗試做的事情：我有一個書簽正在尋找當前頁面中的元素（可以是任何網站），並在匹配的事件上發送點擊事件。 我有那個部分在工作。

但在某些情況下，沒有任何內容會自動匹配，我希望能夠顯示（通過將其懸停）應激活哪個元素，然后在localStorage保存一些有關它的信息。 下次我在該頁面上使用書簽時，我想檢索該信息以識別DOM中的元素，然后調度click事件。

問題是：我應該保存哪些信息才能識別出來？ （在大多數情況下，因為總是可以創建一個不起作用的情況）

在最好的情況下，所述元素將具有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”開頭，這樣的東西本來就很脆弱，那就是在頁面創建的時候通過任何邏輯知道應該是什么該頁面首先。

Answer 2

如何找到沒有ID的所有元素並為它們分配唯一的ID。 然后你總是可以使用id。

Answer 3

方法是使用name，tagName和className-combination。 innerHTML可能太大了。

另一種方法是查找具有id的選擇元素的子元素。

檢查id =>檢查id =>的孩子檢查name，tagName和className-combination（if =>告訴用戶選擇不同的項目:-)

Answer 4

如何在DOM中使用元素的索引（整數）？ 您可以遍歷頁面加載中的每個元素並將自定義屬性設置為索引...

var els = document.getElementsByTagName("*");
for(var i = 0, l = els.length; i < l; i++) {
  els[i].customIndex = i;
}