blocks|key|138543|text|我就是这样得到innerHTML的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138544|page.$eval(selector,+(element)+=>+{
++return+element.innerHTML
})|code-block|syntax|javascript|138545|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is how i get innerHTML:</p>

<pre><code>page.$eval(selector, (element) =&gt; {
  return element.innerHTML
})
</code></pre>


blocks|key|75536|text|<div+id="innerHTML">Hello</div>


var+myInnerHtml+=+document.getElementById("innerHTML").innerHTML;
console.log(myInnerHtml);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|75537|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div id="innerHTML"&gt;Hello&lt;/div&gt;


var myInnerHtml = document.getElementById("innerHTML").innerHTML;
console.log(myInnerHtml);
</code></pre>


blocks|key|138559|text|您可以利用page.$$(selector)获取所有目标单元，然后使用page.evaluate()获取内容(innerHTML)，然后应用您的标准。它应该看起来像：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|138560|const+targetEls+=+await+page.$$('yourFancySelector');
for(let+target+of+targetEls){
++const+iHtml+=+await+page.evaluate(el+=>+el.innerHTML,+target);+
++if+(iHtml.replace(/[%5E0-9]/g,+'')+===+'5')+{
++++await+target.click();
++++break;
++}
}|code-block|syntax|javascript|138561|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageselector|1|https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args^0|5|H|Z|F|1J|9|5|H|0|Z|F|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<p>You can leverage the <a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageselector" rel="noreferrer"><code>page.$$(selector)</code></a> to get all your target elments and then use <a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args" rel="noreferrer"><code>page.evaluate()</code></a> to get the content(<code>innerHTML</code>), then apply your criteria. It should look something like: </p>

<pre><code>const targetEls = await page.$$('yourFancySelector');
for(let target of targetEls){
  const iHtml = await page.evaluate(el =&gt; el.innerHTML, target); 
  if (iHtml.replace(/[^0-9]/g, '') === '5') {
    await target.click();
    break;
  }
}
</code></pre>


blocks|key|1773738|text|这应该适用于木偶技师：)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1773739|const+page+=+await+browser.newPage();
const+title+=+await+page.evaluate(el+=>+el.innerHTML,+await+page.$('h1'));|code-block|syntax|javascript|1773740|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This should work with puppeteer:)</p>

<pre><code>const page = await browser.newPage();
const title = await page.evaluate(el =&gt; el.innerHTML, await page.$('h1'));
</code></pre>


blocks|key|74345|text|关于你问题的这一部分..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74346|“或者更好；如何单击具有特定innerHTML的元素。”|blockquote|74347|有一些详情围绕着innerHTML，innerText和textContent，它们可能会给你带来悲伤。您可以使用足够松散的XPath查询和木偶师v1.1.1来解决这个问题。|offset|length|74348|就像这样：|74349|const+el+=+await+page.$x('//*[text()[contains(.,+"search-text-here")]]');
await+el[0].click({+++++
++++++++++++++++button:+'left',
++++++++++++++++clickCount:+1,
++++++++++++++++delay:+50
++++++++++++});|code-block|syntax|javascript|74350|请记住，您将从该查询中得到一个ElementHandles数组。所以..。如果您的文本不是唯一的，那么您正在寻找的特定项目可能并不是唯一的。|74351|如果只需要单击一个鼠标，那么传递给.click()的.click就不需要了。|74352|entityMap|0|LINK|mutability|MUTABLE|url|http://perfectionkills.com/the-poor-misunderstood-innerText/|1|https://github.com/GoogleChrome/puppeteer/blob/v1.1.1/docs/api.md^0|0|0|3|2|0|1Y|9|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|15|8|@]|9|@$G|16|H|17|1|18]|$G|19|H|1A|1|1B]]|A|$]]|$1|I|3|J|5|6|7|1C|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1D|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1E|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]|11|$5|W|X|Y|A|$Z|12]]]]

<p>With regard to this part of your question...</p>

<blockquote>
  <p><em>"Or even better; how to click an element with a specific innerHTML."</em></p>
</blockquote>

<p>There are some <a href="http://perfectionkills.com/the-poor-misunderstood-innerText/" rel="nofollow noreferrer">particulars</a> around innerHTML, innerText, and textContent that might give you grief. Which you can work-around using a sufficiently loose XPath query with <a href="https://github.com/GoogleChrome/puppeteer/blob/v1.1.1/docs/api.md" rel="nofollow noreferrer">Puppeteer v1.1.1</a>.  </p>

<p>Something like this:</p>

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

<p>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. </p>

<p><a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#elementhandleclickoptions" rel="nofollow noreferrer">Options</a> passed to .click() aren't necessary if all you need is a single left-click.</p>


blocks|key|138729|text|您可以简单地按以下方式编写。(无须在最后部分等候判刑)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138730|const+center+=+await+page.$eval('h2.font-34.uppercase+>+strong',+e+=>+e.innerHTML);|code-block|syntax|javascript|138731|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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


blocks|key|138771|text|我永远无法让.innerHtml可靠地工作。我总是这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138772|let+els+=+page.$$('selector');
for+(let+el+of+els)+{
++let+content+=+await+(await+el.getProperty('textContent')).jsonValue();
}|code-block|syntax|javascript|138773|然后，将文本放在“content”变量中。|138774|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I can never get the .innerHtml to work reliable. I always do the following:</p>

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

<p>Then you have your text in the 'content' variable.</p>


blocks|key|74406|text|返回元素的innerHTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74407|可以使用以下方法返回元素的innerHTML：|offset|length|style|CODE|74408|页.$eval()|74409|const+inner_html+=+await+page.$eval('#example',+element+=>+element.innerHTML);|code-block|syntax|javascript|74410|page.evaluate()|74411|const+inner_html+=+await+page.evaluate(()+=>+document.querySelector('#example').innerHTML);|74412|$()+/+elementHandle.getProperty()+/+jsHandle.jsonValue()|74413|const+element+=+await+page.$('#example');
const+element_property+=+await+element.getProperty('innerHTML');
const+inner_html+=+await+element_property.jsonValue();|74414|单击具有特定innerHTML的元素|74415|可以使用以下方法根据元素中包含的innerHTML单击元素：|74416|$eval()|74417|await+page.$$eval('.example',+elements+=>+{
++const+element+=+elements.find(element+=>+element.innerHTML+===+'<h1>Hello,+world!</h1>');
++element.click();
});|74418|74419|await+page.evaluate(()+=>+{
++const+elements+=+[...document.querySelectorAll('.example')];
++const+element+=+elements.find(element+=>+element.innerHTML+===+'<h1>Hello,+world!</h1>');
++element.click();
});|74420|page.evaluateHandle()+/+elementHandle.click()|74421|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();|74422|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML|1|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevalselector-pagefunction-args-1|2|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args|3|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageselector|4|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#elementhandlegetpropertypropertyname|5|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#jshandlejsonvalue|6|7|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevalselector-pagefunction-args|8|9|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevaluatehandlepagefunction-args|10|https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#elementhandleclickoptions^0|0|D|9|D|9|0|0|0|9|1|0|0|0|F|2|0|0|0|3|3|6|R|4|10|K|5|0|0|0|G|9|G|9|6|0|0|7|7|0|0|0|F|8|0|0|0|L|9|O|L|A|0|0^^$0|@$1|2|3|4|5|6|7|21|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|22|8|@$D|23|E|24|F|G]]|9|@$D|25|E|26|1|27]]|A|$]]|$1|H|3|I|5|6|7|28|8|@]|9|@$D|29|E|2A|1|2B]]|A|$]]|$1|J|3|K|5|L|7|2C|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|2D|8|@]|9|@$D|2E|E|2F|1|2G]]|A|$]]|$1|Q|3|R|5|L|7|2H|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|2I|8|@]|9|@$D|2J|E|2K|1|2L]|$D|2M|E|2N|1|2O]|$D|2P|E|2Q|1|2R]]|A|$]]|$1|U|3|V|5|L|7|2S|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|2T|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2U|8|@$D|2V|E|2W|F|G]]|9|@$D|2X|E|2Y|1|2Z]]|A|$]]|$1|10|3|11|5|6|7|30|8|@]|9|@$D|31|E|32|1|33]]|A|$]]|$1|12|3|13|5|L|7|34|8|@]|9|@]|A|$M|N]]|$1|14|3|P|5|6|7|35|8|@]|9|@$D|36|E|37|1|38]]|A|$]]|$1|15|3|16|5|L|7|39|8|@]|9|@]|A|$M|N]]|$1|17|3|18|5|6|7|3A|8|@]|9|@$D|3B|E|3C|1|3D]|$D|3E|E|3F|1|3G]]|A|$]]|$1|19|3|1A|5|L|7|3H|8|@]|9|@]|A|$M|N]]|$1|1B|3|-4|5|6|7|3I|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|1I]]|1J|$5|1E|1F|1G|A|$1H|1K]]|1L|$5|1E|1F|1G|A|$1H|1M]]|1N|$5|1E|1F|1G|A|$1H|1O]]|1P|$5|1E|1F|1G|A|$1H|1Q]]|1R|$5|1E|1F|1G|A|$1H|1S]]|1T|$5|1E|1F|1G|A|$1H|1I]]|1U|$5|1E|1F|1G|A|$1H|1V]]|1W|$5|1E|1F|1G|A|$1H|1M]]|1X|$5|1E|1F|1G|A|$1H|1Y]]|1Z|$5|1E|1F|1G|A|$1H|20]]]]

<h2>Returning innerHTML of an Element</h2>

<p>You can use the following methods to return the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML" rel="noreferrer"><code>innerHTML</code></a> of an element:</p>

<h3><a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevalselector-pagefunction-args-1" rel="noreferrer">page.$eval()</a></h3>

<pre><code>const inner_html = await page.$eval('#example', element =&gt; element.innerHTML);
</code></pre>

<h3><a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args" rel="noreferrer">page.evaluate()</a></h3>

<pre><code>const inner_html = await page.evaluate(() =&gt; document.querySelector('#example').innerHTML);
</code></pre>

<h3><a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageselector" rel="noreferrer">page.$()</a> / <a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#elementhandlegetpropertypropertyname" rel="noreferrer">elementHandle.getProperty()</a> / <a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#jshandlejsonvalue" rel="noreferrer">jsHandle.jsonValue()</a></h3>

<pre><code>const element = await page.$('#example');
const element_property = await element.getProperty('innerHTML');
const inner_html = await element_property.jsonValue();
</code></pre>

<hr>

<h2>Clicking an Element with Specific innerHTML</h2>

<p>You can use the following methods to click on an element based on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML" rel="noreferrer"><code>innerHTML</code></a> that is contained within the element:</p>

<h3><a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevalselector-pagefunction-args" rel="noreferrer">page.$$eval()</a></h3>

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

<h3><a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args" rel="noreferrer">page.evaluate()</a></h3>

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

<h3><a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pageevaluatehandlepagefunction-args" rel="noreferrer">page.evaluateHandle()</a> / <a href="https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#elementhandleclickoptions" rel="noreferrer">elementHandle.click()</a></h3>

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

await element.click();
</code></pre>


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

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

<p>Thanks in advance for any help!</p>


Puppeteer: Get innerHTML

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有人知道如何获取元素的innerHTML或文本吗？或者更好；如何单击具有特定innerHTML的元素？这就是它与普通JavaScript的工作方式：var found = false$(selector).each(function() {    if (found) return;    else if ($(thi...

问木偶师:获取innerHTML
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问木偶师:获取innerHTMLEN