# Retrieving Attributes from Elements

When scraping elements on a page, in some cases you may want to scrape something other than text from an element, such as the value of a specific attribute like an ahref, aria-label, or id. 

Start with the Extract from Page brick, and if that doesn't work for your element, explore the Traverse Elements route.

{% hint style="info" %}
Before adding either of these bricks, you'll need a starter brick for triggering your mod. Learn more about starter bricks in [types-of-mods](https://docs.pixiebrix.com/developing-mods/developer-concepts/types-of-mods "mention").
{% endhint %}

*Prefer to watch? The below video covers the content on this page:* 

{% embed url="<https://youtu.be/c0nFcPqMHWc>" %}

### Using Extract from Page brick

#### 1. Add the Extract from Page brick.

Click the **+** button in the [Brick Actions panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel) below your starter brick. Search for the Extract from Page brick, and hover over the brick to click the blue **Add** button.

#### 2. Specify the selector of the element you want to scrape.

In the Selector field, use jQuery or CSS selectors to specify the element you'd like to target. If you don't know the selector, you can use the green mouse to click the element on the screen and PixieBrix will apply selectors.

#### 3. Use the Extract field to specify what you'd like to scrape.

Below the Selector field, you'll find a dropdown for **Extract**. If PixieBrix has successfully identified an element based on the Selector provided, you'll be able to choose from Text, Element, or specific attributes from the elements.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FARnz7UCsOYvJFyBd3sDv%2Fimage.png?alt=media&#x26;token=a1433625-05e9-4200-99e1-4f69b0c73b6b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Select `Element` if you want to extract nested properties.
{% endhint %}

#### 4. Run the mod to access the value in the output.

Run your mod and go to the Output tab of the [Data Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/data-panel) while the Extract from Page brick is selected.&#x20;

You should see a data object with your targeted attribute. Click the copy icon to copy the path and reference the value in another brick.

### Using Traverse Elements + HTML Element Reader bricks

{% hint style="info" %}
You'd likely only use this approach if you are unable to find the attribute via Extract from Page, or if you're unable to find the specific element via CSS or jQuery selectors.
{% endhint %}

#### 1. Use the Traverse Elements brick to specify the element you'd like to access.&#x20;

Click the + button in the [Brick Actions panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel) to search for the Traverse Elements brick. Hover over the brick and click the blue **Add** button.

In the selector field, you can manually type the CSS or jQuery selectors for the element, or click the green mouse button to select an area on the screen.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FsReIzVLloYC6SOPOHSzY%2Fimage.png?alt=media&#x26;token=71d41373-20d5-45c1-b51c-1e267ad1e06f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you are having trouble finding the element, you may need to use the traversal property to find related elements to an element that you can successfully find.
{% endhint %}

#### 2. Access the output

Run the mod to generate an output for the Traverse Elements brick. Check the output in the [Data Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/data-panel) on the far right panel, and open the `@transformed` object, then the `elements` array and copy the path of the element reference. *By default, the pathname will be @transformed.elements\[0].*&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F7CUsC1k7vA5vmsewjCtn%2Fimage.png?alt=media&#x26;token=7a22fd8c-3d16-484c-99bf-85e1d0f01d77" alt=""><figcaption></figcaption></figure>

#### 3. Use the HTML Element Reader brick to target the specified element.

Click the + button in the [Brick Actions panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel) below the **Traverse Elements** brick and search for the **HTML element reader** bric&#x6B;**.** Hover over the brick, and click the blue **Add** button.

Go to the **> Advanced Options** and update the **Target Root Mode** field to `Element`.&#x20;

Once you select Element, the **Target Element** field appears just below. Paste the path to the selected element from the Traverse Brick that you copied from Step 2.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FavoQRInadE48QHuhYKfU%2Fimage.png?alt=media&#x26;token=6f0751b4-d578-4aa4-a08a-ecc420161af1" alt=""><figcaption></figcaption></figure>

#### 4. View object with element's attributes in the HTML element reader brick output.

Run the mod once more and view the output from the HTML element reader brick. You should have access to all attributes of that element.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FCSECkd2Fv5xUqN7GaTgb%2Fimage.png?alt=media&#x26;token=e1f4f76d-3c6d-4fd1-abfb-9accd558b6a9" alt=""><figcaption></figcaption></figure>

Copy the path of the desired attribute, and you can reference the attribute value in another brick.&#x20;

### Referencing the attribute value

{% hint style="info" %}
If you wanted to reference the `href` attribute and open that link in another tab, you could add an **Open a tab** brick and pass the `@element.attrs.href` value. In this case, you'd need to set the domain name before the path, so you would use [Text Templating](https://docs.pixiebrix.com/developing-mods/developer-concepts/text-template-guide) to preset the domain and then append the path, like this:&#x20;

[`https://www.linkedin.com/{{@element.attrs.href}}`](https://www.linkedin.com/%7B%7B@element.attrs.href%7D%7D)
{% endhint %}