JS获取页面图片路径
在Web开发中，经常需要获取页面中的图片路径，以便进行一些操作，比如预览、下载或者其他处理。在JavaScript中，我们可以通过一些方法来获取页面中的图片路径。
一、通过DOM元素获取图片路径
我们可以通过JavaScript中的DOM操作来获取页面中的图片元素，然后通过获取元素的src属性来获取图片路径。具体的步骤如下：
. 使用document对象的querySelectorAll方法获取页面中所有的img元素，该方法返回一个包含所有匹配元素的NodeList对象。
. 遍历NodeList对象，获取每个img元素的src属性值，即可得到图片路径。
示例代码如下：
```javascript
// 获取页面中所有的img元素
var imgElements = document.querySelectorAll(&;img&;);
// 遍历imgElements，获取每个img元素的src属性值
for (var i = 0; i < imgElements.length; i++) {
var imgSrc = imgElements[i].src;
console.log(imgSrc);
}
```
二、通过正则表达式获取图片路径
如果我们只想获取页面中特定格式的图片路径，可以使用正则表达式来匹配符合要求的图片路径。具体步骤如下：
. 使用document对象的querySelectorAll方法获取页面中所有的img元素，该方法返回一个包含所有匹配元素的NodeList对象。
. 遍历NodeList对象，获取每个img元素的src属性值。
. 使用正则表达式匹配图片路径，如果匹配成功，则得到符合要求的图片路径。
示例代码如下：
```javascript
// 获取页面中所有的img元素
var imgElements = document.querySelectorAll(&;img&;);
// 正则表达式匹配图片路径
var reg = /\.(jpg|png|gif)$/i;
// 遍历imgElements，获取每个img元素的src属性值，并使用正则表达式匹配图片路径
for (var i = 0; i < imgElements.length; i++) {
var imgSrc = imgElements[i].src;
if (reg.test(imgSrc)) {
console.log(imgSrc);
}
}
```
三、通过Ajax请求获取页面中的图片路径
如果页面中的图片是通过Ajax请求加载的，我们可以使用XMLHttpRequest对象来发送请求，并通过回调函数来获取图片路径。具体步骤如下：
. 创建一个XMLHttpRequest对象。
. 使用open方法设置请求方法和URL。
. 使用onload事件监听请求完成后的回调函数。
. 在回调函数中，通过responseText属性获取响应内容，然后使用正则表达式匹配图片路径。
示例代码如下：
```javascript
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法和URL
xhr.open(&;GET&;, &;http://example.com/ajax&;, true);
// 监听请求完成后的回调函数
xhr.onload = function() {
// 获取响应内容
var responseText = xhr.responseText;
// 正则表达式匹配图片路径
var reg = /<img.?src=[&;"](.?)[&;"].?>/ig;
var match;
while ((match = reg.exec(responseText)) !== null) {
console.log(match[]);
}
};
// 发送请求
xhr.send();
```
通过以上三种方法，我们可以方便地获取页面中的图片路径。根据实际需求选择合适的方法来使用，以便实现对图片的相关操作。