Retrieve the names contained within TD elements using the console

I always enjoy experimenting with new things. Take a look at the https://lodash.com/docs/4.17.15 lodash documentation site where you'll find a menu on the left side featuring all available functions. Is there a way to extract the names of these functions in the console?

After using

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

I discovered that there are 324 elements, now I just need to extract each name individually.

Answer №1

Start by using Array#from to convert your list of menu items from a NodeList to an array. Then, use Array#map to iterate through the array and retrieve the text content for each item.

Don't forget to include the . before the class name 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#sortBy"><code><span class="subtle-punctuation">_.</span><!-- react-text: 479 -->sortBy<!-- /react-text --></code></a></li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The primeVue menubar's active/focused item highlighting feature is not functioning correctly

Currently, we are in the process of developing an electron-based application with the front end primarily coded using Vue.js and primeVue. As a novice, I am encountering issues with the menubar component from primeVue. The problem is that no matter which i ...

The integration of Paystack payment is operating smoothly, however, there is a 404 error being returned from the PUT API in

I am facing an issue with integrating paystack into my ecommerce website. Despite troubleshooting extensively, I cannot locate the source of the errors that are occurring. The integration of other payment platforms is successful, but paystack is causing pr ...

The lifecycle of a React state in a filtering component

Seeking guidance on handling state updates in a component designed for filtering purposes (such as selecting dates, min/max values, etc). My current setup is as follows: onMinDateChange(minDate) { this.setState({minDate}); }, onMaxDateChange(maxDate) ...

Is there a way to use a POST request and Mongoose in Express to add a new object?

I am struggling to figure out how to use .Router() for creating a POST request route. I have only worked with getById before. Can someone help me create a route for POST requests? ./generalRepository.js function Repository() {} Repository.prototype.getB ...

Gather information from functions that are continually updated with each React refresh

**import { controls } from "../../../constants/controls"; import { useKeyPress } from "../../../hooks/useKeyPress"; import { useArena } from "./useArena"; const getDamage = (attacker, defender) => { let damage = attacker ...

Oops! Looks like there was an error: weight is not defined when trying to calculate BMI with the HTMLButtonElement

I'm currently working on a project to create a BMI calculator following specific instructions. I've managed to follow all the guidelines except one regarding the letsCalculateBMI function. The instruction states: letsCalculateBMI should extrac ...

Passing events from a grandchild component up to its grandparent component in VueJS 2.0

Vue.js 2.0 appears to have a limitation where events cannot be emitted directly from a grand child component to its grand parent. Vue.component('parent', { template: '<div>I am the parent - {{ action }} <child @eventtriggered="pe ...

Iview Table UI Cell

Is there a way to retrieve the cell data from a library iview table in Vue.js upon clicking? I am looking to capture both the value of the cell and the title of the column, and then modify the CSS of that particular cell. For instance, clicking on one ce ...

What are the steps to execute Mike Bostock's D3 demonstrations?

I've been attempting to run Mike Bostock's See-Through Globe demonstration, but I encountered issues with the correct referencing of his json files when attempting to replicate it locally. The problem stems from this particular line of code: d3. ...

Creating a functional hyperlink within a ui-sref element in Ionic

I'm struggling with a simple code snippet in Ionic 1. It basically shows a list of items that are clickable to navigate to a details page. However, I want to add functionality so that when clicking on the phone icon next to each item, it will initiate ...

Displaying <p> content upon selection of a radio button

As a beginner in JS + HTML, I am looking to create 4 radio buttons with different names like this: o PS4 o Xbox o Nintendo DS When one of these is clicked/checked, I want to display the price which will be located in a "p" tag next to them, like so: o P ...

Having trouble setting the backgroundImage in React?

Hi there! I'm in the process of crafting my portfolio website. My goal is to have a captivating background image on the main page, and once users navigate to other sections of the portfolio, I'd like the background to switch to a solid color. Alt ...

Customize your MUI Select to show the selected value in a different way within the Input field

I have a collection of objects and I am looking to link multiple attributes of the object in MenuItem, but I only want one attribute to be displayed in Select https://i.sstatic.net/kDKLr.png The image above displays "10-xyz" in the select display, when i ...

Having trouble with Javascript/jQuery not functioning in IE8?

My current project involves a website that functions smoothly in Chrome, but encounters issues with running JavaScript/jQuery scripts in IE8. Even a simple alert on page load fails to execute. Admittedly, my approach is a bit messy as I have mixed CSS an ...

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

Leverage variables in JavaScript to establish a unique style

function AdjustScale(){ scaleX = window.innerWidth / 1024; scaleY = window.innerHeight / 768; element = document.getElementById("IFM"); element.style.transform = "scale(" + scaleX + ", " + scaleY + ")"; } I'm facing an issue with thi ...

Removing a row from a table seamlessly without the need to reload the page

I am having an issue with my page that displays a list of orders. When a user clicks on a button to delete a row from the table, it only removes the first row successfully. However, when attempting to delete the second or third row, it does not work. Can s ...

How to retrieve an array from a JSON object with JavaScript

After receiving an object from the server, I am specifically looking to extract the array ITEMS. How can I achieve this? I attempted using array['items'] but it did not yield the expected result and returned undefined { "items": [ { ...

AngularJS allows for versatile filtering of objects and arrays using checkboxes

I am looking to implement a filter functionality similar to the fiddle mentioned in the first comment below. However, I do not want to capture the checkboxes category from ng-repeat. Instead, I only want to input the checkboxes' value and receive the ...

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...