基于元素实例推导CSS选择器

Question

背景

许多问题都在询问如何根据CSS选择器获取特定的DOM元素。而这个问题则是相反的方向。一个文档使用jsoup进行解析，但可以轻松转换为以下任意一种：

• jdom
• dom4j
• HtmlUnit

应用场景

对于某些特定的问题领域（例如化合物），成千上万个网页以类似的方式列出了化学物质，但标记在不同的网站上有所不同。例如：

<div id="chemical-list">
  <div class="compound">
    <span class="compound-name">water</span>
    <span class="compound-periodic">H2O</span>
  </div>
  <div class="compound">
    <span class="compound-name">sodium hypochlorite</span>
    <span class="compound-periodic">NaClO</span>
  </div>
</div>

另一个网站可能会以不同的方式列出它们：

<ul class="chemical-compound">
  <li class="chem-name">water, H2O</li>
  <li class="chem-name">sodium hypochlorite, NaClO</li>
</ul>

另一个网站可能会使用不同的标记：

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr><td>water</td><td>H2O</td></tr>
    <tr><td>sodium hypochlorite</td><td>NaClO</td></tr>
  </tbody>
</table>

从成千上万个网站中下载一些样本页面。然后，使用现有的化学品清单，可以相对简单地检索候选网络页面元素列表。使用jsoup，这就像这样简单：

  Elements elements = chemicals.getElementsMatchingOwnText( chemicalNames );

这将允许对数千个页面进行高精度分析。（页面可以讨论水和次氯酸钠的应用，但只有列表正在被分析。）了解CSS将极大地简化分析并提高准确性。

另一种选择是处理整个页面寻找化学品“组”，然后尝试提取列表。两个问题都很困难，但使用CSS选择器跳转到页面上的准确位置要更高效，也更可能更准确。两个问题都需要手工制作，但我想尽可能地自动化。

问题

所述的API似乎没有生成给定元素实例（越独特越好）的CSS选择器的方法。可以通过迭代父元素并手动生成选择器来实现。这已经在一些问题中使用JavaScript进行了演示。还有关于生成XPath的答案，可能也可以使用Selenium。

具体来说，您如何做类似以下的事情：

String selector = element.getCSSPath();
Elements elements = document.select( selector );

这将会：

1. 返回给定元素的CSS选择器。
2. 在文档中搜索给定的CSS选择器。
3. 返回与选择器匹配的元素列表。

第二行不是问题；第一行有问题。

问题

哪个API可以从DOM元素生成一个尽可能唯一的CSS选择器？

如果没有现有的API，那么知道这一点会很好。

- Dave Jarvis

---

Jsoup并没有提供这个功能，但如果它提供的话，最独特的选择器将是使用>和:eq()来模拟XPath表达式的选择器。不清楚这样做的用途是什么——它将精确地选择该元素而不会选择其他任何内容，因此您的示例代码将毫无用处。那么你实际使用这样的API的用例是什么？ - Jeffrey Bosboom

Answer 1

截至2014年9月28日/1.8.1 JSoup，通过方法Element.cssSelector()（感谢pull request）已具备此功能。

cssSelector - 获取CSS选择器，可唯一选择此元素。如果元素具有ID，则返回#id；否则返回父级（如果有）CSS选择器，后跟'>'，后跟一个唯一的元素选择器（tag.class.class:nth-child(n)）。

返回：可用于在选择器中检索元素的CSS路径。

这将返回使用元素ID（如果存在）或创建形式为tag.class.class:nth-child(n)的选择器以返回唯一元素的选择器。

例如："html > body > h2.section:nth-child(3)"

- James Fry

Answer 2

我使用了Mike的答案，并做了以下更改，以使返回的css选择器更短。

更新：还使用name属性来缩短CSS选择器，并在每次迭代时检查选择器，以确保目前在页面上返回一个元素

更新：正如@10basetom在评论中指出的那样，在元素没有唯一的id或唯一的class名称或唯一的class名称+name属性的情况下，该方法可能会产生非唯一的css路径，但在其他情况下它会产生最短的css选择器。因此，建议使用document.querySelectorAll(result).length === 1检查css路径结果，并在其他方法此处描述失败时退回。

function getShortestSelector(element) {
    var selector = element.id;

    // if we have an ID, that's all we need. IDs are unique. The end.
    if(selector.id) {
        return "#" + selector;
    }

    selector = [];
    var cl, name;
    while(element.parentNode && (selector.length === 0 || document.querySelectorAll(selector.join(' ')).length !== 1)) {

        // if exist, add the first found id and finish building the selector
        var id = element.getAttribute("id");
        if (id) {
            selector.unshift("#" + id);
            break;
        }

        cl = element.getAttribute("class");
        cl = cl ? "." + cl.trim().replace(/ +/g,'.') : '';
        name = element.getAttribute("name");
        name = name ? ("[name=" + name.trim() + "]") : '';
        selector.unshift(element.localName + cl + name);
        element = element.parentNode;
    }

    var result = selector[0];
    if (selector.length > 1) {
        result += " " + selector.slice(1).join(" ").replace(/\[name=[^\]]*]/g, '');
    }

    return result;
}

- Arik

---

这在许多情况下都不起作用。例如，请参见此处的getSelector1()控制台输出：https://codepen.io/thdoan/pen/WjVRyG?editors=1111 - thdoan

Answer 3

只需要使用Java的实际JavaScript引擎，并运行一些纯JavaScript即可吗？

function getSelector(element) {
  var selector = element.id;

  // if we have an ID, that's all we need. IDs are unique. The end.
  if(selector.id) { return "#" + selector; }

  selector = [];
  var cl;
  while(element.parentNode) {
    cl = element.getAttribute("class");
    cl = cl ? "." + cl.trim().replace(/ +/g,'.') : '';
    selector.push(element.localName + cl);
    element = element.parentNode;
  }
  return selector.reverse().join(' ');
}

并且让我们验证它是否正确

<div class="main">
  <ul class=" list of things">
    <li><a href="moo" class="link">lol</a></li>
  </ul>
</div>

带有。

var a = document.querySelector("a");
console.log(getSelector(a));

http://jsfiddle.net/c8k6Lxtj/ -- 结果：html body div.main ul.list.of.things li a.link... 金子。

- Mike 'Pomax' Kamermans

---

谢谢，Mike。我已经使用这个来创建一个（递归）仅限Java的解决方案。 - Dave Jarvis

在许多情况下，这不会返回唯一的选择器。例如，请参见此处的getSelector2()控制台输出：https://codepen.io/thdoan/pen/WjVRyG?editors=1111 - thdoan

只要映射是稳定的，我不认为会有任何问题。 - Mike 'Pomax' Kamermans

Answer 4

据我所知，目前没有任何API提供这种功能。以下方法似乎可行：

  /**
   * Returns the shortest CSS path identify a given element. Note that this
   * will not return a unique element, but can be used to obtain all elements
   * that match the selector returned.
   * 
   * @param cssElement The element that must be identified by its CSS selector.
   * @return The CSS selector for the given element, or the empty string if
   * no selector is found.
   */
  private String cssPath( Element cssElement ) {
    StringBuilder result = new StringBuilder( 256 );

    String id = cssElement.id();

    // If the element has an ID, then return it as the shortest path (IDs are
    // supposed to be unique).
    if( id.length() > 0 ) {
      // This will break the chain of recursion.
      result.append( '#' ).append( id );
    }
    else {
      Element parent = cssElement.parent();

      // If there is a parent node, then recurse to determine its CSS path.
      // Otherwise, the chain of recursion ends here.
      if( parent != null ) {
        result.append( cssPath( parent ) );
      }

      // Generate a CSS path using the element's tag name and classes.
      if( cssElement.className().length() > 0 ) {
        result.append( " > " ).append( cssElement.tagName() );
        Set<String> cssClasses = cssElement.classNames();
        cssClasses.forEach( c -> result.append( '.' ).append( c ) );
        result.append( ' ' );
      }
    }

    // Return the (possibly incomplete) CSS selector through recursion.          
    return result.toString();
  }

- Dave Jarvis