javascript puppet 戏-按职业移除元素

axkjgtzd  于 2023-01-19  发布在  Java
关注(0)|答案(4)|浏览(131)

我尝试通过类名删除元素,但没有效果。
这是我使用的代码:

await page.screenshot({path: 'pic.png'});   //for testing purposes
    let div_selector_to_remove= ".xj7.Kwh5n";
    var thingToRemove = document.querySelectorAll(div_selector_to_remove);
    var number_of_elements = thingToRemove.length;
    for (var i = 0; i < number_of_elements.length; i++) {
        thingToRemove[i].parentNode.removeChild(thingToRemove);
    }

浏览器加载后,我得到了一个加载了元素的屏幕截图。什么都没有发生。元素仍然在那里

lmyy7pcs

lmyy7pcs1#

page.evaluate中运行document.querySelector,答案如下:

await page.goto('<url_here>');
let div_selector_to_remove= ".xj7.Kwh5n";
await page.evaluate((sel) => {
    var elements = document.querySelectorAll(sel);
    for(var i=0; i< elements.length; i++){
        elements[i].parentNode.removeChild(elements[i]);
    }
}, div_selector_to_remove)
xeufq47z

xeufq47z2#

可能更容易...
删除与selector匹配的第一个节点:

await page.$eval(selector, el => el.remove());

删除与selector匹配的所有节点:

await page.$$eval(selector, els => els.forEach(el => el.remove()));

如果出于某种原因,您需要在控制台浏览器中选择并删除:

const selector = ".foo";

// single
await page.evaluate(`
  document.querySelector("${selector}").remove()
`);

// multiple
await page.evaluate(selector =>
  document.querySelectorAll(selector).forEach(el => el.remove()),
  selector
);

您也可以将选择器硬编码到eval字符串/函数中,但我认为为了以防万一,以两种不同的方式显示它来自变量会很有用。
与Puppeteer中的任何东西一样,了解哪些代码在Node/Puppeteer-land中运行,哪些代码在浏览器/控制台-land中运行是非常重要的。如果它是回调函数或者字符串化函数体,那么它就在浏览器中,你只能使用浏览器/DOM的概念,比如HTMLElement.remove()windowdocument,否则它就在Node中运行,你只能调用Puppeteer API函数。在OP的例子中,看起来我们在Node-land的回调函数之外,所以document不是一个东西,只有Puppeteer page.函数。

laawzig2

laawzig23#

首先,number_of_elements是数字。
但是你叫number_of_elements.length
接下来,thingToRemove[i].parentNode.removeChild(thingToRemove)thingToRemove[i].parentNodethingToRemove[i]的父节点,而不是thingToRemove
所以不能从thingToRemove[i].parentNode中删除thingToRemove
我想这个代码可能有用。

await page.screenshot({path: 'pic.png'});   //for testing purposes
let div_selector_to_remove= ".xj7.Kwh5n";
var thingToRemove = document.querySelectorAll(div_selector_to_remove);
var number_of_elements = thingToRemove.length;
for (var i = 0; i < number_of_elements; i++) {
    thingToRemove[i].parentNode.removeChild(thingToRemove[i]);
}
2admgd59

2admgd594#

//Wait for the element with id="xe7COe" to show up
    await page.waitForSelector('#xe7COe');
    //delete the element with id="xe7COe"  
    await page.evaluate(() => document.querySelector('#xe7COe').remove());

相关问题