javascriptでURL画像を取得しますか？

Question

<article id="content"> 
    <img src="../anh-1.jpg"> 
    <img src="../anh-2.jpg"> 
    <img src="../anh-3.jpg"> 
</article> 

JavaScriptを使用して3つの写真のURLを取得するにはどうすればよいですか？

Answer 1

var images = document.getElementsByTagName('img'); 
 

 
var urls = Array.prototype.slice.call(images).map(function(i) { 
 
    return i.src; 
 
}) 
 

 
console.log(urls);

<article id="content"> 
 
    <img src="../anh-1.jpg" /> 
 
    <img src="../anh-2.jpg" /> 
 
    <img src="../anh-3.jpg" /> 
 
</article>

Answer 2

const images = document.getElementById('content')[0].children; // will give you an array of the <img/> elements 

そして、あなたはそれがURLを取得するには、SRCプロパティのアクセスすることができます。以下のような ：

const url = images.map((img) => { 
    console.log(img.src); 
    return img.src; 
}); 

Answer 3

は、あなたは異なるIDの中でmultipeネストされたイメージがある場合にgetElementByIdを使用することができます。 getElementsByTagNameを使用して画像要素を取得し、forループを使用してそれらをループし、を配列urlsに格納することができます。あなたがこれまでに試してみました何

var elms = document.getElementById('content').getElementsByTagName('img'); 
 
var urls = []; 
 
for (var i = 0; i < elms.length; i++) { 
 
    urls.push(elms[i].src); 
 
} 
 
console.log(urls);

<article id="content"> 
 
    <img src="../anh-1.jpg"> 
 
    <img src="../anh-2.jpg"> 
 
    <img src="../anh-3.jpg"> 
 
</article> 
 
<article id="content2"> 
 
    <img src="../anh-4.jpg"> 
 
    <img src="../anh-5.jpg"> 
 
    <img src="../anh-6.jpg"> 
 
</article>