Как получить все источники изображений на определенной странице с помощью Javascript

ProgramBox

Как получить все источники изображений на определенной странице с помощью Javascript

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #image

#javascript #изображение

Вопрос:

Я использую простой скрипт для поиска изображения на странице и получения его источника.

 function img_find() {
    var img_find2 = document.getElementsByTagName("img")[0].src;
    return img_find;
}

Однако, когда я захожу написать эту функцию на своей странице, она находит только первое изображение, а затем останавливается. Каков наилучший способ заставить его напечатать все src-файлы изображений на текущей странице?
Спасибо!

1. «он находит только первое изображение» — document.getElementsByTagName("img")[0] ммм?

2. Да, он получит только одно изображение src с определенной страницы, даже если на странице есть несколько изображений.

3. @Andrey пытался обратить ваше внимание на то, [0] что у вас там есть, чтобы получить 1-й элемент массива.

4. При вызове document.getElementsByTagName("img") вы получаете массив элементов, содержащий SRC всех элементов IMG, а затем вы получаете SRC первого элемента, используя это [0] .

5. ваш вопрос звучит так: я беру первое изображение на странице ( [0] ), однако оно находит только первое изображение.

Ответ №1:

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

 function img_find() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];

    for (var i = 0; i < imgs.length; i  ) {
        imgSrcs.push(imgs[i].src);
    }

    return imgSrcs;
}

1. Спасибо за этот балуск, но он не загрузил ни одного файла src img.

2. Это должно работать нормально, если в документе есть изображения. Возможно, вы неверно интерпретируете возвращаемое значение? Он возвращает массив. Или вы запускаете его слишком рано? Сделайте это на window.onload или поместите скрипт в конце текста, прямо перед </body> .

3. Понял! И последнее: я использую это для записи URL-адресов img на странице img_find = img_find(); document.write(‘test’ img_find); но это приводит к таким результатам domain.com/image.png ,http://www.domain.com/image.png есть ли способ их разбить? так что, возможно, между ними есть разрыв.

Ответ №2:

Это может вам помочь…

 img=document.getElementsByTagName("img");
for(i=0; i<img.length; i  ) {
    imgp = imgp   img[i].src   '<br/>'; 
}
document.write(imgp);

Ответ №3:

Я искал решение по всему Интернету, возможно, это поможет, если кто-то другой будет искать то же самое.

 for(var i = 0; i< document.images.length; i  ){
document.images[i].style.border = "1px solid #E0FDA6";
}

То есть выполните поиск по всем изображениям, у которых есть тег style (граница в этом примере), и установите для всех границ значение E0FDA6 (полезно для сброса отдельных выделенных изображений), но я думаю, что это можно использовать для всего, что имеет тег style.

РГ, Anjanka

Ответ №4:

Для печати на текущей странице (заменить содержимое):

 document.write(`<pre>${JSON.stringify(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src), null, 2)}</pre>`);

Для сохранения в массив:

 const imgs = Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src);

Просто напрямую в консольный каталог / журнал:

 console.dir(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src));
console.log(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src));

Ответ №5:

Сделайте это просто:

 console.log(document.body.getElementsByTagName('img'));