如何使用 javascript 和 xpath 获取图像 src？答案

【问题标题】：How to get image src using javascript and xpath?如何使用 javascript 和 xpath 获取图像 src？
【发布时间】：2015-04-06 11:04:22
【问题描述】：

如何使用 javascript 和 xpath 获取图像 src？我尝试了 document.evaluate，但仍然无法得到结果。我只是不明白 document.evaluate 是如何工作的，所以请您为解决方案添加解释。

谢谢

<html>
<body>
<div>
    <img src="img1.jpg">
    <img src="img2.jpg">
    <div>
         <img src="img-src-i-need.jpg">
         <img src="img4.jpg">
    </div>
</div>
</body>
</html>

【问题讨论】：

你的代码在哪里？请提交你的代码你尝试什么
感谢您的评论，刚刚添加了它:)

标签： javascript xpath web-scraping

【解决方案1】：

让<img>的id为"imageOne"如下：

<img src="http://foo.bar/blah.jpg" id="imageOne" />

使用 javascript，您可以执行以下操作：

var imageElement = document.getElementById("imageOne");
var imageElementSrc = imageElement.src;

imageElementSrc 现在拥有imageElement 的src。

console.log(imageElementSrc) 会将"http://foo.bar/blah.jpg" 打印到控制台。

如果您的代码中只有一个 <img> 元素，您可以这样做

var imageElement = document.getElementsByTagName("img")[0];
var imageElementSrc = imageElement.src;

为了得到src。

【讨论】：

谢谢，但是如果有多个图像没有 id 属性怎么办？ :)
您可以在 HTML 代码中找到图像的索引。例如，如果它是 HTML 中的第三个 <img> 元素，则可以使用 var imageElement = document.getElementsByTagName("img")[2];。 document.getElementsByTagName("img") 的实际作用是返回 HTML 文档中所有 <img> 元素的数组。然后，您可以使用索引从数组中检索特定元素。然而，只为<img> 元素提供一个 id 并按照我所展示的那样继续操作要容易得多。
我编辑了代码，这个方法也可以用在新代码上吗，如果可以的话。
由于这是您在阅读代码时看到的第三个<img> 标签，因此您应该为此使用var imageElement = document.getElementsByTagName("img")[2];。
没问题！很高兴我能帮上忙！ :)

【解决方案2】：

在 javascript 中使用它

<script>
     var imgs = document.getElementsByTagName("img");
     var imgSrcs = [];
     for (var i = 0; i < imgs.length; i++) {
           imgSrcs.push(imgs[i].src);
         }
    alert(imgSrcs);
</script>

【讨论】：