Обход DOM с Javascript

Question

У меня есть кусок HTML, как это:

<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 get src="" значение?

Answer 1

Вы могли бы использовать:

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

Все предыдущие методы являются чисто яваскрипт и возвращать список узлов, чтобы вы могли цикл через них, чтобы получить src каждого узла.

Надеюсь, это поможет.

Answer 2

один из возможных решений, чтобы получить IMG и значение ЦСИ:

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())

Answer 3

Вы можете использовать функцию 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>