使用替代文本查找图片标签

我想知道是否有可能使用Javascript通过替代文本来查找图片标签。例如，我有这个标签：<img src="Myimage.jpg" alt="Myimage">有没有办法通过查找“Myimage”alt属性来获取标签？使用替代文本查找图片标签

来源

2010-05-26 MrJackV

你可以使用jQuery？ – 2010-05-26 15:38:14

我看到您使用替代文本找到图片标签。你应该完全放弃并使用jQuery！ – Josh 2010-05-26 15:45:42

更好的问题是，你使用任何JS库？（jquery，prototype，mootols，yui ..） – adamJLev 2010-05-26 16:05:18

毫无疑问，很快就会有一个jQuery解决方案。要做到这一点没有，下面的工作：

function getImagesByAlt(alt) { 
    var allImages = document.getElementsByTagName("img"); 
    var images = []; 
    for (var i = 0, len = allImages.length; i < len; ++i) { 
     if (allImages[i].alt == alt) { 
      images.push(allImages[i]); 
     } 
    } 
    return images; 
} 

var myImage = getImagesByAlt("Myimage")[0];

来源

2010-05-26 15:40:10

你可以用JQuery做到这一点。下面的jQuery代码将返回任何图片设置为“MYIMAGE”的ALT标签：

$('img[alt="Myimage"]').

但是这将是一个极大的方便，有很多更好的性能使用图像标签的id属性。

来源

2010-05-26 15:41:28 DanielC

如果NodeList实现了Iterable，这并不会那么困难。该实现将过滤器放入NodeList的原型中，该原型可能不符合每个人的喜好，但我更喜欢简洁地访问我的数据结构。

<html> 
    <head> 
     <script type="text/javascript"> 
      // unfortunately NodeLists do not have many of the nice Iterate functions 
      // on them, here is an incomplete filter implementation 
      NodeList.prototype.filter = function(testFn) { 
       var array = [] ; 
       for (var cnt = 0 ; cnt < this.length ; cnt++) { 
        if (testFn(this[cnt])) array.push(this[cnt]) ; 
       } 
       return array ; 
      } 

      // loops through the img tags and finds returns true for elements that 
      // match the alt text 
      function findByAlt(altText) { 
       var imgs = document.getElementsByTagName('img').filter(function(x) { 
        return x.alt === altText ; 
       }) ; 

       return imgs ; 

      } 

      // start the whole thing 
      function load() { 
       var images = findByAlt('sometext') ; 

       images.forEach(function(x) { 
        alert(x.alt) ; 
       }) ; 
      } 

     </script> 
    </head> 

    <body onload="load()"> 
     <img src="./img1.png" alt="sometext"/> 
     <img src="./img2.png" alt="sometext"/> 
     <img src="./img3.png" alt="someothertext"/> 
    </body> 
</html>

来源

2010-05-26 15:52:10 Mike

请注意，您将获得一个数组，因为DOM规范中没有关于具有唯一alt标签的内容。 – Mike 2010-05-26 15:52:56

不幸的是，'NodeList'的扩展排除了IE（至少包括版本7，我没有8个手来测试）。 – 2010-05-26 16:01:33

啊，幸运的是/不幸的是我在没有IE的世界中运作。 IE作为getElementsByTagName的返回值是什么？ – Mike 2010-05-26 17:33:15

var imgElement = document.querySelector(img[alt="MyImage"])

来源

2016-10-18 19:00:37

使用替代文本查找图片标签

回答

相关问题