Ask AI
Skip to main content

Select element from HTML

Function: Select element from HTML​

This action helps you extract specific pieces of information from a block of HTML code. Imagine you have the entire content of a webpage or an email, and you only need certain details like product names, prices, or specific links. This action allows you to pinpoint and pull out exactly what you need without having to manually sift through the entire code.

Input,

  • HTML: The complete HTML code you want to analyze. This could be the content of a webpage, an email, or any other source of HTML.
    • Type: A piece of text
    • Required: Yes
  • Selector: A special code (similar to a path) that tells the action exactly which part of the HTML to find. For example, you might use a selector to find all headings, all links, or elements with a specific class or ID.
    • Type: A piece of text
    • Required: Yes

Output,

  • Result: A list of all the content found within the HTML elements that match your specified selector. Each item in the list will be the inner HTML of the matched element.
    • Type: A list of values

Execution Flow,

Real-Life Examples,

Example 1: Extracting Product Names from an E-commerce Page​

Imagine you've retrieved the HTML content of an e-commerce product listing page and you want to get a list of all product names displayed.

  • Inputs:
    • HTML: 
      <div class="product-card">
          <h2 class="product-title">Laptop Pro X</h2>
          <p class="product-price">$1200</p>
      </div>
      <div class="product-card">
          <h2 class="product-title">Wireless Mouse Z</h2>
          <p class="product-price">$50</p>
      </div>
    • Selector: .product-title (This selector targets all <h2> elements that have the class product-title.)
  • Result: A list containing: ["Laptop Pro X", "Wireless Mouse Z"]

Example 2: Getting All Links from a Blog Post​

You have the HTML of a blog post and you want to collect all the URLs mentioned within the post.

  • Inputs:
    • HTML: 
      <p>Check out our <a href="https://blog.example.com/new-features">new features</a> and read more about it <a href="https://blog.example.com/details">here</a>.</p>
      <p>Visit our <a href="https://www.example.com">homepage</a>.</p>
    • Selector: a[href] (This selector targets all <a> (anchor) elements that have an href attribute.)
  • Result: A list containing: ["new features", "here", "homepage"] (Note: The action returns the inner HTML of the matched elements, not the href attribute itself. If you needed the href attribute, you would typically use a different action or a more advanced selector/parsing method.)

Example 3: Extracting Specific Data from a Table Column​

You've received an HTML table containing sales data and you need to extract all the values from the second column, which represents the quantity sold.

  • Inputs:
    • HTML: 
      <table>
          <thead>
              <tr><th>Item</th><th>Quantity</th><th>Price</th></tr>
          </thead>
          <tbody>
              <tr><td>Apples</td><td>150</td><td>$1.00</td></tr>
              <tr><td>Bananas</td><td>200</td><td>$0.75</td></tr>
              <tr><td>Oranges</td><td>120</td><td>$1.20</td></tr>
          </tbody>
      </table>
    • Selector: table tbody tr td:nth-child\(2\) (This selector targets the second <td> (table data) element within each <tr> (table row) inside the <tbody> of a <table>.)
  • Result: A list containing: ["150", "200", "120"]