How to getElementsByclassName in TypeScript?

Question

I'm trying to get the elements by class name from the DOM in typescript. It seems pretty straight forward what I'm doing here but the console shows an error.

function showSlides() {
   var i;
   var slides = <HTMLElement[]<any>document.getElementsByClassName('slide');

   for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";
   }
}

The expected result should be an array with 3 items and it should change the display style to none, but the actual result is a JS error: Uncaught TypeError: Cannot read property 'style' of undefined.

Answer 1

document.getElementsByClassName returns a HTMLCollection of Element objects.

These Elements could be one of a few different types, HTMLElement and SVGElement being two common ones.

If you know for sure that all the elements you're looping over are HTMLElements then you can cast to that.

const showSlides = () => {
    const slides = document.getElementsByClassName('slide');

    for (let i = 0; i < slides.length; i++) {
        const slide = slides[i] as HTMLElement;
        slide.style.display = "none";
    }
};

If it's possible you'll get back non-HTMLElement elements, then you'll need to figure out how to test for them.

One way of doing that might be:

const showSlides = () => {
    const slides = document.getElementsByClassName('slide');

    for (let i = 0; i < slides.length; i++) {
        const slide = slides[i];

        if (slide instanceof HTMLElement) {
            // slide is a HTMLElement
            slide.style.display = "none";
        } else if (slide instanceof SVGElement) {
            // slide is a SVGElement
            const svgOwner = slide.ownerSVGElement;
        } else {
            // slide is a Element
            const baseUri = slide.baseURI;
        }
    }
};

Answer 2

Took me a bit. But I've wrestled with this as well.

const slides = Array.from(document.getElementsByClassName('slide'));

for (const x of slides) {
    const y = <HTMLElement> x;
    y.style.display = 'none';
}

This should work.

More info on the for of loop > https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html

If you're using TS you should skip the JS way of looping through a Array and use the TypeScript way.

getElementsByClassName returns a array of elements. And you can't use style on a Element. Only on a HTMLElement. So you have to cast the Element into a HTMLElement. If you enclose your getElementsByClassName in a Array.from it returns a Element array. From that point you can loop through the Element array in the for loop. And then you cast each object in that Element array to a HTML element array and then you can use .style on that object.

If you have questions you can hit me up.