获取特定元素的 xpath 和 css 选择器的最佳方法答案

【问题标题】：Best way to GET the xpath and css selector of a specific element获取特定元素的 xpath 和 css 选择器的最佳方法
【发布时间】：2011-01-10 01:53:30
【问题描述】：

寻找使用 jQuery 或 Extjs 获取特定元素的 xpath 和 css 选择器的最佳方法。基本上选择一个随机元素并遍历 dom 并检索它的唯一 css 选择器或 xpath。是否已经有可以执行此操作的函数，或者是否有人有可以执行此操作的自定义函数？

【问题讨论】：

这个想法是对其执行反向查找以使用生成的 xpath 或 css 选择器再次选择元素。喜欢网络抓取项目或类似项目。

标签： javascript jquery xpath extjs css-selectors

【解决方案1】：

为什么不只检查一个“id”值，如果有就使用它。如果没有，则生成一个唯一的随机“id”值，将其赋予元素，然后使用它。

编辑：这是一个概念验证 jQuery hack，可为您单击的任何元素构建选择器。

$('*').unbind('click.m5').bind('click.m5', function(ev) {
  if (this != ev.target) return;

  var cn = function(elem) {
    var n = $(elem).parent().children().index(elem);
    return elem.tagName + ':nth-child(' + n + ')';
  };
  var selector = cn(this);
  $(this).parents().each(function() {
    if (/BODY|HTML/.test(this.tagName))
      selector = this.tagName + '>' + selector;
    else
      selector = cn(this) + '>' + selector;
  });
  console.log("Selector: " + selector);
  $(selector).css('background-color', 'red');
});

【讨论】：

是的...但是在网络抓取的情况下，这不适用于回访。
确实如此，但如果您在网页上抓取您无法控制的网站，您可能无法依赖任何一致的内容。换句话说，正文中第二个“h1”之后的第一个“div”下的第四个“div”的第三个子“span”可能与您上次看到的内容相同，也可能不同。
是的，但它应该可以工作一段时间，直到它被更改并需要更新。我认为css选择器可能会做得更好。
那么最好的方法是从目标元素构建一个选择器，添加“tag:nth-child(n)”形式的片段。我将使用概念验证来编辑我的答案。

【解决方案2】：

任何给定元素都有无限数量的选择器。你需要它做什么？你也许可以使用像XPather这样的Firefox插件？

【讨论】：

需要能够对其执行反向查找以使用生成的 xpath 或 css 选择器再次选择元素
我明白了。问题是；如果你有这个元素，为什么不简单地存储一个对它的引用呢？如果你在做网页抓取，为什么不能使用 XPather 之类的工具？