admin管理员组

文章数量:1305276

When getting the list elements in ul, we use get element by class name or tag and are returned in an array

var targetImages = document.getElementById("image-list-view").getElementsByTagName("img");

I need to get the element image in this list and i seem to be stack

<ul id="image-list-view">
    <li>
        <a href="#"  data-gallery>
            <img src="images/pic1.jpg"/>
        </a>
    </li>
    <li>
        <a href="#"  data-gallery>
            <img src="images/pic2.jpg"/>
        </a>
    </li> 
</ul>

EDIT

Sorry i didnt explain the problem with the code.

the code works fine when the site starts but targetImages can no longer be accessed later or referenced ie (images cannot be accessed);

When getting the list elements in ul, we use get element by class name or tag and are returned in an array

var targetImages = document.getElementById("image-list-view").getElementsByTagName("img");

I need to get the element image in this list and i seem to be stack

<ul id="image-list-view">
    <li>
        <a href="#"  data-gallery>
            <img src="images/pic1.jpg"/>
        </a>
    </li>
    <li>
        <a href="#"  data-gallery>
            <img src="images/pic2.jpg"/>
        </a>
    </li> 
</ul>

EDIT

Sorry i didnt explain the problem with the code.

the code works fine when the site starts but targetImages can no longer be accessed later or referenced ie (images cannot be accessed);

• javascript
• html

Share Improve this question Follow edited Feb 26, 2018 at 9:52 Lucem asked Feb 23, 2018 at 14:44 LucemLucem 3,08244 gold badges2222 silver badges3737 bronze badges 4

• I need to get the element image in this list Which one is that? – gurvinder372 Commented Feb 23, 2018 at 14:47
• developer.mozilla/en-US/docs/Web/API/Document/… will allow you to write the CSS selector you want. – jmargolisvt Commented Feb 23, 2018 at 14:47
• What's the problem? Looks fine to me, though you could simplify your DOM query with document.querySelectorAll('#image-list-view img') – Patrick Roberts Commented Feb 23, 2018 at 14:50
• @PatrickRoberts please see my edit. I cannot access the variable after the app is already running. – Lucem Commented Feb 26, 2018 at 9:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Use the function querySelectorAll along with this selector ul#image-list-view li img.

This approach allows you to get the image elements straightforward and avoid a second function execution. Further, this approach doesn't return null value if the element with id image-list-view doesn't exist.

var targetImages = document.querySelectorAll("ul#image-list-view li img");
console.log("Count of images: " + targetImages.length);

.as-console-wrapper { max-height: 100% !important; top: 0; }

ul {
  display: none
}

<ul id="image-list-view">
  <li>
    <a href="#" data-gallery>
      <img src="images/pic1.jpg" />
    </a>
  </li>
  <li>
    <a href="#" data-gallery>
      <img src="images/pic2.jpg" />
    </a>
  </li>
</ul>

Resource

• document.querySelectorAll()

  Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

Your code works, you just need to loop thru the results and do something with the images.

getElementsByTagName returns an HTMLCollection, which is almost like an array. You can loop thru it the same way.

var targetImages = document.getElementById("image-list-view").getElementsByTagName("img");

for (var i = 0; i < targetImages.length; i++) {
  console.log(targetImages[i]);
}

I need to get the element image in this list and i seem to be stack

<ul id="image-list-view">
  <li>
    <a href="#" data-gallery>
      <img src="images/pic1.jpg" />
    </a>
  </li>
  <li>
    <a href="#" data-gallery>
      <img src="images/pic2.jpg" />
    </a>
  </li>
</ul>

本文标签： htmlHow To Get Child Elements Of tag 39li39 In The 39ul39 In javascriptStack Overflow