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

问题

I'm having trouble finding a way to iterate subnodes of a given node in puppeteer. I do not know the html structure beforehand, just the id of the parent element.

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

Is there a way to get the children of a node if you don't know the html structure in puppeteer?

回答1:

What I would do here is to use the evaluate method of Puppeteer to return the children elements of your node to your script as follows:

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

Hope this helps!

回答2:

I ended up using page.evaluate to run some js that adds unique classnames to every element and subelement I want analyzed and then pass that back as JSON string since page.evaluate only returns a string. Then I just call DOM.querySelector on each of those unique selectors and loop through them that way.

Returning children from page.$eval doesn't give me protocol nodes that I can run more dev protocol functions on, and xpath doesn't solve my real problem because it can't recursively loop through all sub-children, then the sub-children of those children.

I'm closing the issue since labeling using unique classnames solves my problem.

来源：https://stackoverflow.com/questions/53700494/using-puppeteer-how-do-you-get-all-child-nodes-of-a-node