34

有人知道如何获取innerHTML元素的或文本吗?甚至更好;如何单击具有特定元素的元素innerHTML?这就是它与普通 JavaScript 一起工作的方式:

var found = false
$(selector).each(function() {
    if (found) return;
    else if ($(this).text().replace(/[^0-9]/g, '') === '5' {
        $(this).trigger('click');
        found = true
    }
});

提前感谢您的帮助!

4

8 回答 8

44

这就是我获得innerHTML的方式:

page.$eval(selector, (element) => {
  return element.innerHTML
})
于 2017-10-04T13:11:45.753 回答
21

返回元素的innerHTML

您可以使用以下方法返回innerHTML元素的:

page.$eval()

const inner_html = await page.$eval('#example', element => element.innerHTML);

page.evaluate()

const inner_html = await page.evaluate(() => document.querySelector('#example').innerHTML);

page.$() / elementHandle.getProperty() / jsHandle.jsonValue()

const element = await page.$('#example');
const element_property = await element.getProperty('innerHTML');
const inner_html = await element_property.jsonValue();

单击具有特定 innerHTML 的元素

您可以使用以下方法根据innerHTML包含在元素中的元素单击元素:

page.$$eval()

await page.$$eval('.example', elements => {
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  element.click();
});

page.evaluate()

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('.example')];
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  element.click();
});

page.evaluateHandle() / elementHandle.click()

const element = await page.evaluateHandle(() => {
  const elements = [...document.querySelectorAll('.example')];
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  return element;
});

await element.click();
于 2020-03-16T21:18:49.343 回答
12

这应该适用于 puppeteer :)

const page = await browser.newPage();
const title = await page.evaluate(el => el.innerHTML, await page.$('h1'));
于 2017-12-27T14:55:09.080 回答
5

您可以利用page.$$(selector)获取所有目标元素,然后使用page.evaluate()获取内容(innerHTML),然后应用您的标准。它应该看起来像:

const targetEls = await page.$$('yourFancySelector');
for(let target of targetEls){
  const iHtml = await page.evaluate(el => el.innerHTML, target); 
  if (iHtml.replace(/[^0-9]/g, '') === '5') {
    await target.click();
    break;
  }
}
于 2017-10-09T03:04:32.570 回答
3

关于你问题的这一部分......

“或者更好;如何单击具有特定 innerHTML 的元素。”

关于innerHTML、innerText 和 textContent的一些细节可能会让您感到悲伤。您可以使用Puppeteer v1.1.1使用足够松散的 XPath 查询来解决这个问题。

像这样的东西:

const el = await page.$x('//*[text()[contains(., "search-text-here")]]');
await el[0].click({     
                button: 'left',
                clickCount: 1,
                delay: 50
            });

请记住,您将从该查询中得到一个 ElementHandles 数组。所以...如果您的文本不是唯一的,您正在寻找的特定项目可能不在 [0] 处。

如果您只需要单击左键,则不需要传递给 .click() 的选项。

于 2018-03-02T18:32:13.477 回答
2

我永远无法让 .innerHtml 可靠地工作。我总是做以下事情:

let els = page.$$('selector');
for (let el of els) {
  let content = await (await el.getProperty('textContent')).jsonValue();
}

然后,您将文本放在“内容”变量中。

于 2019-02-23T12:16:12.340 回答
0

你可以简单地写如下。(不需要在最后一部分等待语句)

const center = await page.$eval('h2.font-34.uppercase > strong', e => e.innerHTML);
于 2018-12-01T14:06:45.540 回答
-15
<div id="innerHTML">Hello</div>


var myInnerHtml = document.getElementById("innerHTML").innerHTML;
console.log(myInnerHtml);
于 2017-10-04T13:20:33.380 回答