Question

我正在使用event.target或event.srcElement获取元素。

如果没有设置ID，我可以保存哪些事件信息以准确了解所选的先前元素？

如果我关闭页面，如何获得相同的元素？

保存所有parentNode似乎是一种非常慢的方式再次获取该元素。

有更有效的方法吗？

该页面将包含固定数量的元素。但是这个页面无法更改，我无法包含id属性。但是，我会标记用户再次打开页面时单击的最后一个标记。

Answer 1

根据您的要求，最好的方法是根据类名生成某种xpath，如果它们不存在，则生成元素名称。如果您没有id，那么这是获取元素的某种唯一标识符的唯一方法。请参阅我的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/

请注意，唯一的问题是如果你的元素都没有任何类，这可能不会起作用，因为如果同一级别的多个元素具有相同的节点类型，则无法唯一地识别它们。 / p>

Answer 2

我需要类似的东西，我想知道使用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 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];

使用javascript获取没有id的相同html元素

3 个答案: