Search code examples
javascriptgoogle-chromefirefoxconsole

Get all names in TD elements through console

I just try to new things. Here is https://lodash.com/docs/4.17.15 lodash docs site and on the left side is menu with all functions. I would like to know if is there any way to extract all names of those TD elements in console ?

I found that there is 324 elements with

document.querySelectorAll('react-menu-container ul > li')

and now I need to extract every single name.

Solution

  • Use Array#from to transform your document.querySelectorAll('react-menu-container ul > li') to an array, then Array#map through the results and get the text content for each item.

    You also forgot the . in front of react-menu-container.

    const res = Array.from(document.querySelectorAll('.react-menu-container ul > li'), item => item.textContent);

console.log(res);
    <div class="react-menu-container">
  <ul class="">
    <li class=""><a href="https://lodash.com/docs/4.17.15#countBy"><code><span class="subtle-punctuation">_.</span><!-- react-text: 344 -->countBy<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#forEach"><code><span class="subtle-punctuation">_.</span><!-- react-text: 349 -->each -&gt; forEach<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#forEachRight"><code><span class="subtle-punctuation">_.</span><!-- react-text: 354 -->eachRight -&gt; forEachRight<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#every"><code><span class="subtle-punctuation">_.</span><!-- react-text: 359 -->every<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#filter"><code><span class="subtle-punctuation">_.</span><!-- react-text: 364 -->filter<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#find"><code><span class="subtle-punctuation">_.</span><!-- react-text: 369 -->find<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#findLast"><code><span class="subtle-punctuation">_.</span><!-- react-text: 374 -->findLast<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#flatMap"><code><span class="subtle-punctuation">_.</span><!-- react-text: 379 -->flatMap<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#flatMapDeep"><code><span class="subtle-punctuation">_.</span><!-- react-text: 384 -->flatMapDeep<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#flatMapDepth"><code><span class="subtle-punctuation">_.</span><!-- react-text: 389 -->flatMapDepth<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#forEach"><code><span class="subtle-punctuation">_.</span><!-- react-text: 394 -->forEach<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#forEachRight"><code><span class="subtle-punctuation">_.</span><!-- react-text: 399 -->forEachRight<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#groupBy"><code><span class="subtle-punctuation">_.</span><!-- react-text: 404 -->groupBy<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#includes"><code><span class="subtle-punctuation">_.</span><!-- react-text: 409 -->includes<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#invokeMap"><code><span class="subtle-punctuation">_.</span><!-- react-text: 414 -->invokeMap<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#keyBy"><code><span class="subtle-punctuation">_.</span><!-- react-text: 419 -->keyBy<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#map"><code><span class="subtle-punctuation">_.</span><!-- react-text: 424 -->map<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#orderBy"><code><span class="subtle-punctuation">_.</span><!-- react-text: 429 -->orderBy<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#partition"><code><span class="subtle-punctuation">_.</span><!-- react-text: 434 -->partition<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#reduce"><code><span class="subtle-punctuation">_.</span><!-- react-text: 439 -->reduce<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#reduceRight"><code><span class="subtle-punctuation">_.</span><!-- react-text: 444 -->reduceRight<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#reject"><code><span class="subtle-punctuation">_.</span><!-- react-text: 449 -->reject<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#sample"><code><span class="subtle-punctuation">_.</span><!-- react-text: 454 -->sample<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#sampleSize"><code><span class="subtle-punctuation">_.</span><!-- react-text: 459 -->sampleSize<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#shuffle"><code><span class="subtle-punctuation">_.</span><!-- react-text: 464 -->shuffle<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#size"><code><span class="subtle-punctuation">_.</span><!-- react-text: 469 -->size<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#some"><code><span class="subtle-punctuation">_.</span><!-- react-text: 474 -->some<!-- /react-text --></code></a></li>
    <li class=""><a href="https://lodash.com/docs/4.17.15#sortBy"><code><span class="subtle-punctuation">_.</span><!-- react-text: 479 -->sortBy<!-- /react-text --></code></a></li>
  </ul>
</div>