遍歷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

回答

相關問題