Question

我正在尝试从Typescript中的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。

这两个Element，could be one of a few different types，HTMLElement和SVGElement是两个常见的变量。

如果您确定要循环的所有元素都是HTMLElement，则可以强制使用。

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

Answer 2

style属性仅存在于HTMLElement上，而slides是更广泛类型的集合：Element。

为了安全地操作style，请首先查看元素实际上是否为HTMLElement。

function showSlides() {
  var i;
  var slides = document.getElementsByClassName('slide');

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

    if (slide instanceof HTMLElement) {
      slide.style.display = "none";
    }
  }
}

Answer 3

请问我一点。但是我也为此付出了努力。

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

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

这应该有效。

有关for of循环的更多信息> https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html

如果您使用的是TS，则应跳过JS遍历数组的方式，而应使用TypeScript方式。

getElementsByClassName返回元素数组。而且您不能在元素上使用样式。仅在HTMLElement上。因此，您必须将Element转换为HTMLElement。如果将getElementsByClassName括在Array中，它将返回一个Element数组。从那时起，您可以在for循环中遍历Element数组。然后，您可以将该Element数组中的每个对象转换为HTML元素数组，然后可以在该对象上使用.style。

如果您有任何疑问，可以打我。

如何在TypeScript中获取ElementsByclassName？

3 个答案: