html5lib 飞镖。通过类选择器查询抛出异常答案

【问题标题】：html5lib dart. Query by class-selector throw exceptionhtml5lib 飞镖。通过类选择器查询抛出异常
【发布时间】：2013-12-01 19:18:59
【问题描述】：

我正在尝试通过选择器.nav 获取具有类导航的元素。结果库抛出异常：

仅实现类型选择器。

代码示例：

import 'package:html5lib/parser.dart';

void main() {
  String html = '''
    <html>
    <head><title>Some title</title></head>
    <body>
    <div class="nav">Some nav content</div>
    </body>
    </html>
  ''';
  var doc = parse(html);

  print(doc.query('.nav'));
}

控制台输出：

Breaking on exception: UnimplementedError: only type selectors are implemented
Unhandled exception:
UnimplementedError: only type selectors are implemented
#0      Node._typeSelector (package:html5lib/dom.dart:269:7)
#1      Node.query (package:html5lib/dom.dart:249:62)
#2      main (/home/hello/dart/test/bin/simple_exp.dart:14:18)
#3      _startIsolate.isolateStartHandler (dart:isolate-patch/isolate_patch.dart:190)
#4      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:93)

怎么了？

【问题讨论】：

标签： html dart html5lib

【解决方案1】：

尚未实现完整的 CSS 选择器匹配。

根据您的用例，您可以匹配类型（标签名称），然后使用元素的类属性过滤结果。

这是一个如何做到这一点的示例：

  var el = doc.queryAll('div').where((el) => 
      el.attributes.keys.contains('class') &&
        el.attributes['class'].split(' ').contains('nav')).first;

希望有人能尽快实现查询选择器匹配支持 - 因为这种解决方法对于具有大量 div 标签的文档非常低效。

另一种解决方案是进行自己的遍历 - 像这样：

queryClass(Node element, String className) {
  for (var node in element.nodes) {
    if (node is! Element) continue;
    if (node.attributes.keys.contains('class') 
        && node.attributes['class'].split(' ').contains(className)) {
      return node;
    }
    var result = queryClass(node, className);
    if (result != null) return result;
  }
  return null;
}

main() {
   var doc = parse(...);
   var el = queryClass(doc, 'nav');
   print(el);
}

【讨论】：

不知道会不会实现？
听起来这是计划的一部分——来自自述文件：“最终解析树 API 将与 dart:html 兼容，因此相同的代码将在客户端和服务器上运行。”我认为它最初是为与 webui/polymer 构建工具一起使用而构建的——这个用例可能不需要类匹配。那些家伙目前正忙于编写其他代码。您可以在此处关注一个错误：code.google.com/p/dart/issues/detail?id=14135

【解决方案2】：

查看html5lib解析器的代码，可以看到查询功能只对类型选择器起作用（如：div、head等）。源代码中有一条注释说明，而且抛出的异常非常明确。

对于您的情况，可能的解决方案是使用 queryAll 方法返回所有 div 并遍历它们，直到找到具有相应类的一个（或多个）。我知道这不是理想的解决方案，但它可能会奏效。

希望对你有帮助！

【讨论】：