Использование DOM для определения количества изображений на моей странице - PullRequest
Новая
       2

Использование DOM для определения количества изображений на моей странице

0 голосов
/ 14 октября 2018

Я пытаюсь использовать DOM, чтобы узнать, сколько изображений на моей странице.Мне нужно написать код, который проверит мою страницу, чтобы увидеть, сколько там изображений, и сохранить их в переменной.Я не уверен, как написать этот код, но я знаю, что вам нужно искать код для всех тегов. 

<body>
<div id="main_content">

<div id="image_selection">
<script type="text/javascript">

</script>
</div>

<div id="images">
<h3>Some Images</h3>
    <p><img src="firetruck.jpg" >  |
    <img src="baseball.jpg" >  |
    <img src="soccer_ball.jpg" >
    </p>

</div><!-- end of 'images' div -->
</div><!-- end of 'main content' div -->

Ответы [ 4 ]

0 голосов
/ 14 октября 2018

Чтобы найти все элементы <img> на странице и присвоить полученную NodeList переменной: 

// (returns live HTMLCollection):
let allImages1 = document.images;
// or (returns (static, non-live) NodeList):
let allImages2 = document.querySelectorAll('img');
// or (returns (live) HTMLCollection):
let allImages3 = document.getElementsByTagName('img');

Чтобы узнать, сколько элементов <img> было найдено, просто перейдите к length свойство NodeList, например: 

let totalNumberOfImages = allImages1.length;

Чтобы продемонстрировать разницу между «живыми» и «статическими» коллекциями:

Использование: document.images: 

let images = document.images,
  counter = document.querySelector('.count');
counter.textContent = images.length;

Array.from(images).forEach(
  (el) => {
    el.addEventListener('click', (evt) => {
      evt.target.remove();
      counter.textContent = images.length;
    });
  })
body {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

span.count {
  grid-column: 1 / -1;
  background-color: limegreen;
  text-align: center;
  font-weight: bold;
}
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<span class="count"></span>

JS Fiddle demo .

Использование document.querySelectorAll('img'): 

let images = document.querySelectorAll('img'),
  counter = document.querySelector('.count');
counter.textContent = images.length;

Array.from(images).forEach(
  (el) => {
    el.addEventListener('click', (evt) => {
      evt.target.remove();
      counter.textContent = images.length;
    });
  })
body {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

span.count {
  grid-column: 1 / -1;
  background-color: limegreen;
  text-align: center;
  font-weight: bold;
}
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<span class="count"></span>

JS Fiddle demo .

Использование document.getElementsByTagName('img'): 

let images = document.getElementsByTagName('img'),
  counter = document.querySelector('.count');
counter.textContent = images.length;

Array.from(images).forEach(
  (el) => {
    el.addEventListener('click', (evt) => {
      evt.target.remove();
      counter.textContent = images.length;
    });
  })
body {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

span.count {
  grid-column: 1 / -1;
  background-color: limegreen;
  text-align: center;
  font-weight: bold;
}
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<span class="count"></span>

JS Fiddle demo .

Обратите внимание, что мы (пытаемся) обновить счет в том жепуть в каждой демонстрации, просто доступ к свойству length переменной images;переменная обновляется и поэтому является «активной» при использовании document.images и document.getElementsByTagName(), но она остается неизменной и, следовательно, «статической» при использовании document.querySelectorAll():

Ссылки:

0 голосов
/ 14 октября 2018

var numberOfImgTags = document.getElementsByTagName('img').length попробуйте это.

0 голосов
/ 14 октября 2018

jQuery вернет коллекцию элементов, которые соответствуют селектору.Вот и все, что вам нужно просто посчитать: $('img').length

Вот как работает ваш текущий код: 

$('img').attr('height','50px').attr('width','50px');

Это запустит неявный цикл над элементами коллекции и установит ее атрибуты.

0 голосов
/ 14 октября 2018

$('img').length даст вам общее количество, существующее на момент его запуска

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...