querySelector

PublishedMay 11, 2019

Element Exists

For example, if a nav element containing a class named someclass exists in the document, do something.

var element = document.querySelector('nav.someclass');

if (element != null) {
    // do something
}

Image Lazy Loader

<img data-src="https://images.unsplash.com/photo-1494633114655-819eb91fde40?auto=format&fit=crop&w=2550&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Above it All. A photo by @anthonyintraversato on Unsplash"/>

const imgList = document.querySelectorAll('img[data-src]');

// lazy load images
Array.from(imgList).forEach(el => {
    el.setAttribute('src', el.getAttribute('data-src'));
    el.onload = function() {
        el.removeAttribute('data-src');
    };
});

Iterate through NodeList object returned by querySelectorAll.

const nodeList = document.querySelectorAll('myclassname');

Array.from(nodeList).forEach(el => {
    if (el !== null) {
        (async() => {
            await import(`app/module/${el.dataset.component}`);
        })();
    }
});

JavaScript