Какая информация об элементе DOM позволила бы JavaScript идентифицировать его (несколько) уникально? (например, когда у него нет идентификатора)

Question

Вот что я пытаюсь сделать: у меня есть букмарклет, который ищет элементы на текущей странице (это может быть любой сайт) и отправляет событие click на те из них, которые соответствуют. У меня эта часть работает.

В некоторых случаях, однако, ничего не совпадает автоматически, и я хочу иметь возможность показать (при наведении на него), какой элемент должен быть активирован, а затем сохранить некоторую информацию о нем в localStorage. В следующий раз, когда я использую букмарклет на этой странице, я хочу получить эту информацию, чтобы идентифицировать элемент в DOM, а затем отправить событие щелчка.

Вопрос в том, какую информацию я должен сохранить, чтобы иметь возможность ее идентифицировать? (в большинстве случаев, поскольку всегда можно создать случай, когда она не работает)

В лучшем случае, элемент-элемент будет иметь значение id, и я готов. В некоторых других случаях это не так, и я хотел бы увидеть ваши предложения относительно того, какую информацию и какой метод я должен использовать, чтобы получить ее обратно.

Пока что моя идея - сохранить некоторые свойства элемента и пройти через DOM, чтобы найти элементы, которые соответствуют всему. Не все свойства будут работать (например, clientWidth будет зависеть от размера браузера), и не все типы элементов будут иметь все свойства (например, узел div не будет иметь значения src), что означает, что с одной стороны, я не могу слепо сохранить все свойства, но с другой стороны, мне нужно либо выбрать ограниченный список свойств, которые будут работать для любых типов элементов (с риском потери полезной информации), либо иметь другие случаи для разных элементов (что звучит не супер).

Вещи, о которых я думал, я мог бы использовать:

• id конечно
• className, tagName помогло бы, хотя className в некоторых случаях может не совпадать
• innerHTML должно работать во многих случаях, если содержимое текста
• src должно работать в большинстве случаев, если содержимое является изображением
• иерархия предков (но это может запутаться)
• ...

Итак, мой вопрос немного «как бы вы поступили по этому поводу?», Не обязательно код. Спасибо!

Answer 1

Вы могли бы сделать то, что сказал @brendan. Вы также можете создать строку селектора в стиле jQuery для каждого элемента в DOM, выяснив «индекс» элемента с точки зрения его места в списке дочерних узлов его родителя, а затем построив его, подняв DOM до тег тела.

В итоге вы получите нечто похожее на

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

Конечно, если DOM изменится, это не будет работать так хорошо. Вы можете добавить имена классов и т. Д., Но, как вы сами сказали, такие вещи по своей природе хрупки, если у вас нет хорошего «идентификатора» для начала, то есть того, который помещается туда во время создания страницы независимо от того, какая логика знает, что должно быть в страница на первом месте.

Answer 2

подход будет использовать name, tagName и className-комбинацию. innerHTML может быть слишком большим.

другой подход - поиск дочерних элементов выбранного элемента, имеющих идентификатор.

проверить для id => проверить для потомков с id => проверить для имени, tagName и className-комбинации (если => сказать пользователю выбрать другой элемент: -)

Answer 3

Как насчет поиска всех элементов без идентификатора и присвоения им уникального идентификатора. Тогда вы всегда можете использовать идентификатор.

Answer 4

Как насчет использования индекса (целого числа) элемента в DOM? Вы можете перебрать каждый элемент при загрузке страницы и установить пользовательский атрибут для индекса ...

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