javascript從列表中獲取圖像

Question

<ul class="">
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
</ul> 

我對jquery有很好的了解，我知道我可以使用子級或直接找到它。.但是我想學習javascript並通過js來實現。我想從所有列表中選擇圖像標簽，但我無法做到它可以請您簡要地解釋一下。我想盡快學習JS以換工作，您能幫上忙..

我試過的代碼

var i;     
var parent = document.getElementById('right');
var lis = par.getElementsByTagName('p');
for(i=0;i<lis.length;i++){
//wat to do here

}

Answer 1

您需要進行一些更改，例如

 var i; var parent = document.getElementById('right'); var lis = parent.children; for (i = 0,l=lis.length; i < l; i++) { //wat to do here // getting alt for example console.log(lis[i].children[0].getAttribute('alt')); } 

 <ul id="right"> <li> <img src="" alt="1" /> </li> <li> <img src="" alt="2" /> </li> <li> <img src="" alt="3" /> </li> <li> <img src="" alt="4" /> </li> <li> <img src="" alt="5" /> </li> <li> <img src="" alt="6" /> </li> <li> <img src="" alt="7" /> </li> </ul> 

標記名稱中的另一個選項，例如ul ，

var parent = document.getElementById('right');
var lis = parent.getElementsByTagName('img'); // get img tags in ul
for (i = 0,l=lis.length; i < l; i++) {
  //wat to do here
  // getting alt for example
  console.log(lis[i].getAttribute('alt'));
}

Answer 2

您可以使用querySelectorAll獲取父級內部的所有圖像並對其進行迭代。

querySelectorAll()

返回與指定選擇器組匹配的文檔中的元素列表（使用文檔節點的深度優先順序遍歷）。 返回的對象是NodeList。

 var images = document.querySelectorAll('#right img'); // Get all the images // Iterate over all the images for (i = 0; i < images.length; i++) { // Update individual image if (images[i].width < 400) { // Do something } } 

 img { width: 50%; } 

 <ul id="right"> <li> <img src="" alt="" /> </li> <li> <img src="" alt="" /> </li> <li> <img src="" alt="" /> </li> <li> <img src="" alt="" /> </li> <li> <img src="" alt="" /> </li> <li> <img src="" alt="" /> </li> <li> <img src="" alt="" /> </li> </ul> 

Answer 3

HTML：

<ul class="parent">
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
    <li><img src="" alt=""/></li>
</ul>

JS：

$ element = document.querySelector（'。parent'）;

var childs = $element.children;
for (var i = 1; i < childs.length - 1; i++)
{
        console.log(childs[i].querySelector('img'))
}