如何在 TypeScript 中 getElementsByclassName？

Question

我正在尝试从打字稿中的 DOM 中按类名获取元素。我在这里做的事情似乎很简单，但控制台显示错误。

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

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

预期的结果应该是一个包含 3 个项目的数组，它应该将显示样式更改为无，但实际结果是一个 JS 错误： Uncaught TypeError: Cannot read property 'style' of undefined.

Answer 1

document.getElementsByClassName返回HTMLCollection的Element对象。

这些Elements可能是几种不同类型中的一种，HTMLElement并且SVGElement是两种常见的类型。

如果您确定要循环的所有元素都是HTMLElements，那么您可以强制转换为该元素。

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";
    }
};

如果有可能你会得到非HTMLElement元素，那么你需要弄清楚如何测试它们。

这样做的一种方法可能是：

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;
        }
    }
};