Получить тот же элемент HTML без идентификатора, используя JavaScript

Question

Я получаю элемент с помощью event.target или event.srcElement.

Какую информацию о событии я могу сохранить, чтобы точно знать ранее выбранный элемент без указания идентификатора?

Если язакрыть страницу, как получить тот же элемент?

Сохранить все parentNode, кажется, очень медленный способ снова получить элемент.

Есть ли более эффективный способ?

Страница будет содержать фиксированное количество элементов.Но эту страницу нельзя изменить, я не смог включить атрибут id.Однако я бы пометил последний тег, по которому щелкнули, когда пользователь снова откроет страницу.

Answer 1

Мне нужно что-то подобное, и мне интересно, что может пойти не так с использованием селекторов CSS (кроме совместимости с более старым браузером).

Что-то вроде:

$('body>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(3)')

http://jsfiddle.net/ddimitrop/Qa8P2/

Такой селектор можно легко построить, следуя по пути к телу.

function structureSelector(element) {
  var tagName = element.tagName.toLowerCase();
  if (tagName == 'body') {
    return tagName;
  }
  var indexInParent = Array.prototype.indexOf.call(element.parentNode.childNodes, element);
  return structureSelector(element.parentNode)+'>'+tagName+':nth-child('+(indexInParent+1)+')';
}

http://jsfiddle.net/ddimitrop/w9tbw/

Answer 2

Наилучшим способом, основанным на ваших требованиях, является генерирование некоторого вида пути xpath на основе имен классов и, если они не существуют, имен элементов. Если у вас нет идентификатора, это единственный способ получить какой-то уникальный идентификатор для элемента. См. Мой jsfiddle для примера.

var getNodeIdentifier = function(element) {
    return element.nodeName.toLowerCase() + "." + $(element).index();
};    

var current = element;
var xpath = getNodeIdentifier(this);

while (current.parentNode != null) {
    xpath = getNodeIdentifier(current.parentNode) + "/" + xpath;
    current = current.parentNode;
}

console.log(xpath);

http://jsfiddle.net/qZMXN/29/

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

Answer 3

Я нашел интересный способ.

Для сохранения элемента:

// Save node name and position with this
// el = elemento
var p = document.getElementsByTagName(nodeName);
for(var i=0; i<p.length; i++)
{
    if( el == p[i])
    {
        return i;
    }
}

Чтобы получить:

// With nodeName saved and "position" i
var elem = document.getElementsByTagName(nodeName)[i];