js获取html中的图片路径怎么写

在JavaScript中获取HTML中的图片路径可以通过多种方式实现，以下是一些常见的方法：

1、使用document.images属性

document.images属性返回一个包含页面上所有<img>元素的HTMLCollection，你可以通过遍历这个集合来获取每个图片的路径。

document.addEventListener("DOMContentLoaded", function() {
  const images = document.images;
  for (let i = 0; i < images.length; i++) {
    console.log(images[i].src); // 获取图片路径
  }
});

2、使用getElementsByTagName方法

getElementsByTagName方法允许你根据标签名获取HTML元素的集合，对于图片，可以使用<img>作为参数。

document.addEventListener("DOMContentLoaded", function() {
  const images = document.getElementsByTagName("img");
  for (let i = 0; i < images.length; i++) {
    console.log(images[i].src); // 获取图片路径
  }
});

3、使用querySelectorAll方法

querySelectorAll方法允许你根据CSS选择器获取一组元素，你可以使用img作为选择器来获取所有的<img>元素。

document.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll("img");
  images.forEach(image => {
    console.log(image.src); // 获取图片路径
  });
});

4、使用matchAll方法和正表达式

如果你想要获取所有包含图片的<img>标签的路径，可以使用正表达式和matchAll方法。

document.addEventListener("DOMContentLoaded", function() {
  const html = document.documentElement.outerHTML;
  const regex = /<imgs+[^>]*src="([^"]+)"/g;
  const matches = [...html.matchAll(regex)];
  matches.forEach(match => {
    console.log(match[1]); // 获取图片路径
  });
});

5、使用getAttribute方法

getAttribute方法允许你获取指定属性的值，对于图片，可以使用src作为参数。

document.addEventListener("DOMContentLoaded", function() {
  const images = document.getElementsByTagName("img");
  for (let i = 0; i < images.length; i++) {
    console.log(images[i].getAttribute("src")); // 获取图片路径
  }
});

6、使用事件监听器

如果你想要获取用户点击的图片的路径，可以为所有<img>元素添加点击事件监听器。

document.addEventListener("DOMContentLoaded", function() {
  const images = document.getElementsByTagName("img");
  for (let i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function() {
      console.log(this.src); // 获取被点击图片的路径
    });
  }
});

7、使用find方法和jQuery

如果你的项目中使用了jQuery库，可以使用find方法来获取图片路径。

$(document).ready(function() {
  $("img").each(function() {
    console.log($(this).attr("src")); // 获取图片路径
  });
});

在JavaScript中获取HTML中的图片路径有多种方法，可以根据项目需求和个人喜好选择合适的方法，无论使用哪种方法，关键是要确保在DOM完全加载后执行相关代码，以避免获取不到图片路径的问题。