Question

我在找到一种方法来遍历puppeteer中给定节点的子节点时遇到麻烦。我事先不知道html结构，只是父元素的ID。

var elemId = "myelemid";

const doc = await page._client.send('DOM.getDocument');
const node = await page._client.send('DOM.querySelector', {
    nodeId: doc.root.nodeId,
    selector: '#' + elemId
});
//node.children empty
//node['object'].children empty

//try requesting childnodes
var id = node.nodeId;   
var childNodes = await page._client.send('DOM.requestChildNodes', {
   nodeId: id
});         
//childNodes empty

//try requesting by resolveNode?
var aNode = await page._client.send('DOM.resolveNode', {
   nodeId: id
});      
//aNode.children is empty

如果您不知道puppeteer中的html结构，是否可以获取节点的子代？

Answer 1

我在这里要做的是使用Puppeteer的evaluate方法，将节点的子元素返回到脚本，如下所示：

const nodeChildren = await page.$eval(cssSelector, (uiElement) => {
  return uiElement.children;
});
console.log(nodeChildren); // Outputs the array of the nodes children

希望这会有所帮助！

Answer 2

我最终使用page.evaluate运行一些js，该js向要分析的每个元素和子元素添加唯一的类名，然后将其作为JSON字符串传递回去，因为page.evaluate仅返回一个字符串。然后，我只在每个唯一选择器上调用DOM.querySelector，并以此方式遍历它们。

从页面返回子代。$ eval不会给我提供可以在其上运行更多dev协议功能的协议节点，并且xpath不能解决我的真正问题，因为它无法递归遍历所有子子代，然后这些孩子的子孩子。

我正在解决此问题，因为使用唯一的类名进行标签解决了我的问题。

使用puppeteer，如何获取节点的所有子节点？

2 个答案: