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

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 方法将节点的子元素 return 到脚本，如下所示：

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，它为我想要分析的每个元素和子元素添加了唯一的类名，然后将其作为 JSON 字符串传回，因为 [=18] =]只有returns一个字符串。然后，我只需在每个唯一选择器上调用 DOM.querySelector 并以这种方式循环遍历它们。

从 page.$eval 返回 children 没有给我可以运行更多开发协议功能的协议节点，而且 xpath 没有解决我的真正问题，因为它不能' t 递归循环所有 sub-children，然后 children.

中的 sub-children

我正在关闭问题，因为使用唯一类名进行标记可以解决我的问题。

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

Using puppeteer how do you get all child nodes of a node?

node.js

headless-browser

google-chrome-devtools

puppeteer