YUI匹配给定选择器的Node的第一个子节点

Question

我见过questions of similar title，但它们并不完全相同。

首先，我使用的是YUI（3.2.0与Liferay 6.0兼容）。

我已经有Node引用了。我的目标是让Node的第一个孩子与给定的CSS选择器匹配。起初，我这样做：

...
parse: function(node) {
    var title = node.one('>span, >div, >a, >h1');
    ...
},
...

这适用于Firefox，Chrome和IE 9+。但是，我们必须支持IE 8.所以我深入研究并找到w3c参考说明：

  

A child selector is made up of two or more selectors separated by ">"

这似乎表明，根据规范，父母是必需的，即使在实践中似乎并非如此。所以我再搜索一下，看到jQuery实际上提到这个特定情况被弃用了：

  

Note: The $("> elem", context) selector will be deprecated in a future release. Its usage is thus discouraged in lieu of using alternative selectors.

我在YUI文档中找不到这种情况的明确提及，但我仍然认为使用它并不安全（而且IE8中也不支持它）。我尝试了很多东西，包括使用*>span, *>div, ...，*:first-child+span, ...，但它们没有用。所以我留下的是：

var title = node.get('children').filter('>span, >div, >a, >h1').item(0);

但这似乎是不优雅和低效的，因为它背后的代码会有很多循环（因为过滤器不会短路，我想要的只是第一个匹配）。有人有更好的建议吗？

Answer 1

在这种情况下，退一步可能是有意义的。目前您的要求被定义为“匹配此CSS选择器”。你可以把它框起来，“得到这个节点的第一个孩子，是一个跨度，一个div，一个锚或一个h1”（或类似的东西？）

如果是这样，请抛弃选择器引擎。相反，调用node.get（'children'）然后遍历生成的NodeList - 您的迭代器函数可以简单地检查节点名称是否正确值，如果是，则短路。这应该会给你带来可靠的性能，并且应该具有相当的可读性。