背景

Question

背景

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

使用案例

对于特定问题域（例如，化学化合物），数千个网页以类似方式列出化学品，但标记在网站上不同。例如：

<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将大大简化分析并提高其准确性。

另一种方法是处理整个页面，寻找＆＃34; groups＆＃34;化学品，然后尝试提取清单。这两个问题都很困难，但使用CSS选择器跳转到页面中的确切位置效率要高得多，而且可能更准确。这两个问题都需要一些手工制作，但我希望尽可能地自动化。

问题

前面提到的API似乎没有生成给定Element instance的CSS选择器的方法（越独特越好）。可以迭代父元素并手动生成选择器。在demonstrated中使用JavaScript questions已XPath。还有用于生成Selenium的答案，也可以使用{{3}}。

具体来说，你会怎样做：

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

这会：

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

第二行不是问题;第一行是有问题的。

问题

什么API可以从DOM元素生成CSS选择器（尽可能唯一）？

如果没有现有的API，那么很高兴知道。

Answer 1

只需使用Java的actual JavaScript engine并运行一些简单的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 ...金。

Answer 2

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

更新：同样使用name属性缩短css选择器并检查每次迭代，如果选择器到目前为止，返回页面上的单个元素

更新：正如@ 10basetom在评论中指出的那样，在元素没有唯一ID或唯一类名或唯一类名+ name属性的情况下，该方法可能会生成一个非唯一的css路径，但在其他情况下它会产生最短的css选择器。所以，我建议使用document.querySelectorAll(result).length === 1检查css路径结果，然后使用其他方法described here

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;
}

Answer 3

从 2014-09-28 / 1.8.1开始，JSoup 通过方法pull request获得了此功能（感谢Element.cssSelector()）。

cssSelector

public String cssSelector() - 获取 CSS 选择器   唯一地选择此元素。如果元素具有ID，则返回#id;   否则返回父（如果有的话） CSS 选择器，然后返回＆＃39;＆gt;＆＃39;，   然后是元素的唯一选择器   （ tag.class.class：第n个孩子（n）的）。

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

这将返回使用元素ID（如果存在）返回唯一元素的选择器，否则创建 tag.class.class：nth-child（n）形式的选择器。

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

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();
  }

基于Element实例派生CSS选择器

背景

使用案例

问题

问题

4 个答案: