遍历DOM使用JavaScript

我有一段HTML的是这样的：遍历DOM使用JavaScript

<div id="contentblock"> 
    <div id="producttile_137" class="producttile"> 
     <a href="#" class="tile"> 
     <img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml"> 
      Bony A-Booster 
      <span class="price">€10.95</span> 
     </a> 
    </div> 
    <div id="producttile_138" class="producttile"> 
     <a href="#" class="tile"> 
     <img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml"> 
      Bony B-Booster 
      <span class="price">€20.95</span> 
     </a> 
    </div> 
    <div>Aditional info</div> 
</div>

我需要得到所有<img />来源，但与纯JavaScript。我可以通过类名document.getElementsByClassName('producttile')获取元素，但是可以在纯JS中遍历<img /> ang获得src=""的值吗？

来源

2016-03-01 Kicker

什么是您问题'document.getElementsByClassName'或'document.getElementsByTagName'？此方法构建于 – Philipp

document.querySelectorAll（'img'）应该可以工作 – maioman

你可以使用：

document.getElementsByClassName('class_name'); 
//OR 
document.getElementsByTagName('img'); 
//OR 
document.querySelectorAll('img');

以前所有的方法都是纯JavaScript，并返回节点列表，所以你可以遍历他们让每一个节点的src。

希望这会有所帮助。

来源

2016-03-01 16:24:38

注意，提到的方法返回HTML集合（*数组结构*）。不是真正的数组，他们将不会有数组方法，如* forEach，reduce，map，... *。要使用那些非常有用的方法，可以使用上面的方法，但用slice调用它们，例如： 'Array.prototype.slice.call（method）;'然后您将拥有一个真正的HTML数组元素。 –

一个可能的解决方案，使IMG和src值：

var imgs = document.querySelectorAll('img') 
 

 
var res = [].slice.call(imgs).map(x=>x.getAttribute("src")) 
 
//or in es5 
 
//.map(function(x){return x.getAttribute("src")}) 
 
//[].slice.call is necessary to transform nodeList in array 
 
//otherwise you can use an regular for loop 
 

 
console.log(res)

<div id="contentblock"> 
 
    <div id="producttile_137" class="producttile"> 
 
     <a href="#" class="tile"> 
 
     <img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml"> 
 
      Bony A-Booster 
 
      <span class="price">€10.95</span> 
 
     </a> 
 
    </div> 
 
    <div id="producttile_138" class="producttile"> 
 
     <a href="#" class="tile"> 
 
     <img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml"> 
 
      Bony B-Booster 
 
      <span class="price">€20.95</span> 
 
     </a> 
 
    </div> 
 
    <div>Aditional info</div> 
 
</div>

想直接选择基于它的src值的元素，你也可以这样做：

document.querySelector('[src="images/Bony A-Booster.jpg"]')

（假设有一个元素可以使用querySlector（）而不是q uerySelectorAll（））

来源

2016-03-01 16:28:14 maioman

您可以使用函数getElementsByTagName。

function listImages() { 
 
    var img = document.getElementsByTagName('img'); 
 
    for (var i in img) { 
 
    if (img[i].src) { 
 
     console.log(img[i].src); 
 
    } 
 
    } 
 
}

<div id="contentblock"> 
 
    <div id="producttile_137" class="producttile"> 
 
     <a href="#" class="tile"> 
 
     <img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml"> 
 
      Bony A-Booster 
 
      <span class="price">€10.95</span> 
 
     </a> 
 
    </div> 
 
    <div id="producttile_138" class="producttile"> 
 
     <a href="#" class="tile"> 
 
     <img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml"> 
 
      Bony B-Booster 
 
      <span class="price">€20.95</span> 
 
     </a> 
 
    </div> 
 
    <div>Aditional info</div> 
 
</div> 
 

 
<a href="#" onclick="javascript:listImages()">Show Images</a>

来源

2016-03-01 16:30:40

遍历DOM使用JavaScript

回答

相关问题