1. 首页
  2. 问题列表
  3. 从HTML元素获取img标记
提问者：小点点

从HTML元素获取img标记


我有一些HTML内容。 我想获得“foo.jpg”并存储在一个变量中。

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum congue justo et facilisis. Fusce sed vulputate magna. Praesent lacinia justo ligula, a mattis enim rhoncus vitae. Quisque nec porttitor lectus. Aenean tempor magna eu egestas tincidunt. Morbi vitae mi at mauris hendrerit blandit. Nunc iaculis vitae velit at dignissim. Vestibulum vitae gravida mi. </p>
<img src="foo.jpg" alt="foo"></img>
</div>

我找到了这个

var myimg= document.getElementById("imgid").src;

但它不会，因为我不知道图像id，而且因为它不是文档而是元素，我试图找到类似于mycontnet.html.img[0].src的内容


共3个答案

匿名用户

您可以使用GetElementsByTagName():

null

var myImg = document.getElementsByTagName("img")[0].src;
console.log(myImg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum congue justo et facilisis. Fusce sed vulputate magna. Praesent lacinia justo ligula, a mattis enim rhoncus vitae. Quisque nec porttitor lectus. Aenean tempor magna eu egestas tincidunt. Morbi vitae mi at mauris hendrerit blandit. Nunc iaculis vitae velit at dignissim. Vestibulum vitae gravida mi. </p>
<img src="foo.jpg" alt="foo" />
</div>

匿名用户

您可以使用任何css选择器来查找您的图像，例如使用querySelector或querySelectorAll.:

document.querySelector('img').src

或者更具体地修改选择器以匹配唯一的结果（您可以在页面上有多个img标记，因此最好至少指定它的父项）

  • div>； img
  • .image-wrapper img
  • img.image

匿名用户

您无法获取img元素，因为img标记上没有id。 您可以使用getElementByTagName()方法，也可以在img标记上添加id属性。 如果您将使用src，它将为您提供图像的完整URL（如果您只需要图像名称），那么您可以使用getAttribute()方法。

const src = document.getElementsByTagName('img')[0].getAttribute('src');

null

const src = document.getElementsByTagName('img')[0].getAttribute('src');
console.log(src);
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  <img src="foo.jpg" alt="foo"></img>
</div>

相关问题