Как поменять атрибут у элемента?

Question

[Анатолий]

Имеется html-код

<picture>
  <source data-srcset="small.webp 1x,  big.webp 2x" type="image/webp">
  <img src="lazy.gif" data-src="small.jpg" data-srcset="big.jpg 2x" class="lazy">
</picture>

и скрипт

lazyload();
		window.onscroll = function(ev) {
			lazyload();
		}

		function lazyload() {
			var lazyImage = document.getElementsByClassName('lazy');
			for ( var i=0; i < lazyImage.length; i++ ) {
				if ( elementInViewport( lazyImage[i] ) ) {
					lazyImage[i].setAttribute('src', lazyImage[i].getAttribute('data-src'));
					lazyImage[i].setAttribute('srcset', lazyImage[i].getAttribute('data-srcset'));
				}
			}
		}

		function elementInViewport(el) {
			var rect = el.getBoundingClientRect();
			return ( rect.top - 50 < (window.innerHeight || document.documentElement.clientHeight));
		}

Вопрос: Как поменять значение:

<source data-srcset="small.webp 1x,  big.webp 2x" type="image/webp">

на

<source srcset="small.webp 1x,  big.webp 2x" type="image/webp">

элементов source может быть много, удалять старый атрибут не обязательно, достаточно создать новый.
Должно получится что-то типа:

lazyImage[i].parentNode.getElementsByTagName('source').setAttribute('srcset', lazyImage[i].parentNode.getElementsByTagName('source').getAttribute(data-srcset);

Answer 1

[Анатолий]

function lazyload() {
			var lazyImage = document.getElementsByClassName('lazy');
			var lazyImageSource;
			for ( var i=0; i < lazyImage.length; i++ ) {
				if ( elementInViewport( lazyImage[i] ) ) {
					lazyImage[i].setAttribute('src', lazyImage[i].getAttribute('data-src'));
					lazyImage[i].setAttribute('srcset', lazyImage[i].getAttribute('data-srcset'));
					lazyImageSource = [];
					lazyImageSource = lazyImage[i].parentNode.getElementsByTagName('source');
					for ( var y=0; y < lazyImageSource.length; y++ ) {
						lazyImageSource[y].setAttribute('srcset', lazyImageSource[y].getAttribute('data-srcset'));

					}
				}
			}
		}