Extract the image URL from the href attribute using Xpath

Question

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet

<div class="jcarousel product-imagethumb-alt" data-jcarousel="true">
<ul>
<li>
<a href="https://domain/imagefull.jpg" onclick="return false;" class="cboxElement">
<img itemprop="image" src="http://domain/imagethumb.jpg"></a>
</li>
</ul>
</div>

I attempted to retrieve them using XPath expressions like div/ul/li//a[img]/@href and

div/ul/li//a[@class="cboxElement"]/@href

as well as div/ul/li//a/@href, but none of them captured any images within the href attribute.

If anyone could provide me with the most effective XPath expression to fetch the images nested inside href, I would greatly appreciate it.

Thank you.

javascript html css xpath

Answer 1

Answer №1

I'm still trying to wrap my head around the issue, but I have managed to extract the image src using the code below. The xpath needed is simply: //a/img

var images = document.evaluate("//a/img", 
    document, null, XPathResult.ANY_TYPE, null); 
var img = images.iterateNext(); 
while (img) {
  console.log(img.src);
  img = images.iterateNext();
}

You can also check it out on jsfiddle

Answer 2

I'm still trying to wrap my head around the issue, but I have managed to extract the image src using the code below. The xpath needed is simply: //a/img

var images = document.evaluate("//a/img", 
    document, null, XPathResult.ANY_TYPE, null); 
var img = images.iterateNext(); 
while (img) {
  console.log(img.src);
  img = images.iterateNext();
}

You can also check it out on jsfiddle

Extract the image URL from the href attribute using Xpath

Answer №1

Similar questions

What is the best way to delete HTML classes that were generated by a function?

An error is thrown when using less.js

Applying Styles to Cells Using the Google Sheets API (v4)

Is it possible to transfer files using web-bluetooth technology?

How can I use jQuery to access the parent node in an XML document?

I am having trouble getting my HTML to properly link with my CSS while using Chrome OS

Guide on selecting a radio button based on data retrieved from a MySQL database

What is the best method to store the name of an image as a session variable?

Provide the aggregated content within d3's text() or html() function

Using JavaScript to set attribute values in Python Selenium, these values are cleared after each update

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

What is the best method for implementing click functionality to elements that share a common class using only pure JavaScript

What methods can be used to center a Google map on a specific location?

Execute the calculation on the user's AWS account

Failure of app script to retrieve data from an external spreadsheet

What are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

JavaScript - returning a false error

LinkedIn Post API: content gets truncated when it includes the characters "()"

The "click" event is only effective for a single use

Excessive screen height causes the CSS box layout to overflow