Живая коллекция imgs
Найти все HTML-изображения, как сказал @vsync, так же просто, как var images = document.images.Это будет живой список, поэтому любые изображения, которые динамически добавляются или удаляются со страницы, будут автоматически отражаться в списке.
Извлечение фоновых изображений (встроенных и CSS)
Существует несколькоспособы проверки фоновых изображений, но, возможно, самый надежный способ - это перебрать все элементы страницы и использовать window.getComputedStyle, чтобы проверить, не равен ли backgroundImage каждого элемента none.Это позволит получить фоновые изображения как встроенными, так и в CSS.
var images = [];
var elements = document.body.getElementsByTagName("*");
Array.prototype.forEach.call( elements, function ( el ) {
var style = window.getComputedStyle( el, false );
if ( style.backgroundImage != "none" ) {
images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "")
}
}
Получение фонового изображения из window.getComputedStyle вернет полное свойство CSS background-image в форме url(...), поэтому вам потребуетсяудалите url( и ).Вам также нужно удалить все " или ', окружающие URL.Вы можете сделать это, используя backgroundImage.slice( 4, -1 ).replace(/['"]/g, "")
Начните проверку только после того, как DOM будет готов, в противном случае при первом сканировании могут отсутствовать элементы.
Динамически добавленные фоновые изображения
Это не будетпредоставьте оперативный список, так что вам потребуется MutationObserver, чтобы просмотреть документ, и проверить все измененные элементы на наличие backgroundImage.
. При настройке обозревателя убедитесь, что в конфигурации MutationObserver естьchildList и subtree установлены в true.Это означает, что он может просматривать все дочерние элементы указанного элемента (в вашем случае body).
var body = document.body;
var callback = function( mutationsList, observer ){
for( var mutation of mutationsList ) {
if ( mutation.type == 'childList' ) {
// all changed children are in mutation.target.children
// so iterate over them as in the code sample above
}
}
}
var observer = new MutationObserver( callback );
var config = { characterData: true,
attributes: false,
childList: true,
subtree: true };
observer.observe( body, config );
Поскольку для поиска фоновых изображений требуется проверить каждый элемент в DOM, вы также можете проверитьдля <img> с одновременно, вместо использования document.images.
код
Вы хотели бы изменить приведенный выше код, чтобы в дополнение к проверке наличия фонаизображение, вы бы проверили, если его имя тега IMG.Вы также должны поместить его в функцию, которая запускается, когда DOM готов.
ОБНОВЛЕНИЕ: чтобы различать изображения и фоновые изображения, вы можете поместить их в разные массивы, например, в images и bg_images,Чтобы также определить родителей изображений, вы должны поместить image.parentNode в третий массив, например, image_parents.
var images = [],
bg_images = [],
image_parents = [];
document.addEventListener('DOMContentLoaded', function () {
var body = document.body;
var elements = document.body.getElementsByTagName("*");
/* When the DOM is ready find all the images and background images
initially loaded */
Array.prototype.forEach.call( elements, function ( el ) {
var style = window.getComputedStyle( el, false );
if ( el.tagName === "IMG" ) {
images.push( el.src ); // save image src
image_parents.push( el.parentNode ); // save image parent
} else if ( style.backgroundImage != "none" ) {
bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
}
}
/* MutationObserver callback to add images when the body changes */
var callback = function( mutationsList, observer ){
for( var mutation of mutationsList ) {
if ( mutation.type == 'childList' ) {
Array.prototype.forEach.call( mutation.target.children, function ( child ) {
var style = child.currentStyle || window.getComputedStyle(child, false);
if ( child.tagName === "IMG" ) {
images.push( child.src ); // save image src
image_parents.push( child.parentNode ); // save image parent
} else if ( style.backgroundImage != "none" ) {
bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
}
} );
}
}
}
var observer = new MutationObserver( callback );
var config = { characterData: true,
attributes: false,
childList: true,
subtree: true };
observer.observe( body, config );
});