Javascript Puppeteer：获取innerHTML

Puppeteer: Get innerHTML

提问by Noah

Does anybody know how to get the innerHTMLor text of an element? Or even better; how to click an element with a specific innerHTML? This is how it would work with normal JavaScript:

有人知道如何获取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
    }
});

Thanks in advance for any help!

在此先感谢您的帮助！

回答by Ryan

This is how i get innerHTML:

这就是我获得innerHTML的方式：

page.$eval(selector, (element) => {
  return element.innerHTML
})

回答by E. Fortes

This should work with puppeteer:)

这应该适用于 puppeteer :)

const page = await browser.newPage();
const title = await page.evaluate(el => el.innerHTML, await page.$('h1'));

回答by LeOn - Han Li

You can leverage the page.$$(selector)to get all your target elments and then use page.evaluate()to get the content(innerHTML), then apply your criteria. It should look something like:

您可以利用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;
  }
}

回答by rwinscot

With regard to this part of your question...

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

"Or even better; how to click an element with a specific innerHTML."

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

There are some particularsaround innerHTML, innerText, and textContent that might give you grief. Which you can work-around using a sufficiently loose XPath query with Puppeteer v1.1.1.

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

Something like this:

像这样的东西：

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

Just keep in mind that you will get an array of ElementHandles back from that query. So... the particular item you are looking for might not be at [0] if your text isn't unique.

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

Optionspassed to .click() aren't necessary if all you need is a single left-click.

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

回答by JMDE

I can never get the .innerHtml to work reliable. I always do the following:

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

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

Then you have your text in the 'content' variable.

然后你在'content'变量中有你的文本。

回答by Grant Miller

Returning innerHTML of an Element

返回元素的innerHTML

You can use the following methods to return the innerHTMLof an element:

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

page.$eval()

page.$eval()

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

page.evaluate()

page.evaluate()

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

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

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

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

---

---

Clicking an Element with Specific innerHTML

单击具有特定 innerHTML 的元素

You can use the following methods to click on an element based on the innerHTMLthat is contained within the element:

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

page.$$eval()

page.$$eval()

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

page.evaluate()

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()

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();

回答by Naga

You can simply write as below. (no need await sentence in the last part) const center = await page.$eval('h2.font-34.uppercase > strong', e => e.innerHTML);

你可以简单地写如下。（最后部分不需要 await 语句） const center = await page.$eval('h2.font-34.uppercase > strong', e => e.innerHTML);

回答by Kapil Kumar

<div id="innerHTML">Hello</div>


var myInnerHtml = document.getElementById("innerHTML").innerHTML;
console.log(myInnerHtml);