javascript - 在 CasperJS 中查询 getElementInfo 对象

Question

我正在使用 casperjs，我已经到了这样的地步:

var domElem = this.getElementInfo(".foo");

现在我想进一步查询 domElem，如下所示:

var domElemChild = domElem.QUERYFUNCTIONHERE(".bar");

我不能那样做，因为 domElem 是一个对象而不是 DOM Node ，我可以(最好)只使用 casperjs 做什么？

注意:我尝试使用 cheerio，但在尝试要求它时输出了以下错误:

Error: Cannot find module 'util'
D:/dev/myproj/phantomjs:/bootstrap.js:289
D:/dev/myproj/phantomjs:/bootstrap.js:254 in require
D:/dev/myproj/node_modules/cheerio/node_modules/htmlparser2/lib/Pars er.js:120
D:/dev/myproj/node_modules/cheerio/node_modules/htmlparser2/lib/Pars er.js:351 Unsafe JavaScript attempt to access frame with URL about:blank from frame with U RL file:///d:/casperjs/bin/bootstrap.js. Domains, protocols and ports must match

Answer 1

有很多可能性取决于你想用 domElem 做什么。

最简单的可能是连接 CSS 选择器:

var domElemChild = this.getElementInfo(".foo .bar");

由于 CSS 路径可能会根据您的文档返回意外结果，因此以下 XPath 将按预期工作:

var domElemChild = this.getElementInfo(x("(//*[contains(@class,'foo')])[1]//*[contains(@class,'bar')]"));

其他一切都必须在页面上下文中完成。所以你可以做类似的事情

var text = this.evaluate(function(){
  var domElem = document.querySelector(".foo");
  window._someDomElement = domElem; // save for later
  // DOM nodes cannot be passed out of the page context, so return the innerHTML
  return domElem.innerHTML;
});
// do something with `text`
var text = this.evaluate(function(){
  var domElemChild = window._someDomElement.querySelector(".bar");
  return domElemChild.innerHTML;
});

使用 clientutils module 可以完成类似的事情，但不要忘记此模块只能在页面上下文中使用。