What is the best way to select elements by class name in TypeScript?

Question

What is the best way to select elements by class name in TypeScript?

I've been experimenting with trying to retrieve elements by class name from the DOM using TypeScript. Despite what seems like a straightforward approach, I'm encountering an error in the console.

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

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

Expected behavior is to have an array with 3 items and to change the display style to none, however the actual outcome is a JS error:

Uncaught TypeError: Cannot read property 'style' of undefined.

typescript

Answer 1

Answer №1

document.getElementsByClassName function retrieves a collection of HTMLCollection containing Element objects.

These Elements can vary in types, with HTMLElement and SVGElement being among them.

If you are certain that all the elements returned are of type HTMLElement, you can explicitly cast them as such.

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 there is a chance of non-HTMLElement elements being returned, you will need to implement a method to identify and handle them.

One approach to achieve this could 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

document.getElementsByClassName function retrieves a collection of HTMLCollection containing Element objects.

These Elements can vary in types, with HTMLElement and SVGElement being among them.

If you are certain that all the elements returned are of type HTMLElement, you can explicitly cast them as such.

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 there is a chance of non-HTMLElement elements being returned, you will need to implement a method to identify and handle them.

One approach to achieve this could 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 3

Answer №2

It took me a little while, but I've grappled with this issue too.

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

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

I believe this solution should do the trick.

For more information on the for of loop, check out https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html

If you're using TypeScript, it's recommended to avoid the traditional JavaScript way of looping through an array and instead opt for the TypeScript method.

The getElementsByClassName method returns an array of elements. However, you can't apply styles directly to an Element - it must be a HTMLElement. By wrapping the getElementsByClassName in Array.from, it will return an array of Elements. You can then iterate through this Element array in the for loop, casting each object as a HTML element array to utilize .style on them.

If you have any questions, feel free to reach out to me.

Answer 4

It took me a little while, but I've grappled with this issue too.

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

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

I believe this solution should do the trick.

For more information on the for of loop, check out https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html

If you're using TypeScript, it's recommended to avoid the traditional JavaScript way of looping through an array and instead opt for the TypeScript method.

The getElementsByClassName method returns an array of elements. However, you can't apply styles directly to an Element - it must be a HTMLElement. By wrapping the getElementsByClassName in Array.from, it will return an array of Elements. You can then iterate through this Element array in the for loop, casting each object as a HTML element array to utilize .style on them.

If you have any questions, feel free to reach out to me.

Answer 5

Answer №3

The style property is specifically designed for use with instances of HTMLElement, but the slides collection consists of a wider type: Element.

To safely adjust the style of each element, it is important to verify if the element is indeed an HTMLElement before making any changes.

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 6

The style property is specifically designed for use with instances of HTMLElement, but the slides collection consists of a wider type: Element.

To safely adjust the style of each element, it is important to verify if the element is indeed an HTMLElement before making any changes.

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

What is the best way to select elements by class name in TypeScript?

Answer №1

Answer №2

Answer №3

Similar questions

Generic type array does not display property

Exporting a constant as a default in TypeScript

Share edited collection with Observer

Unable to locate template while working with Angular 2 in ASP MVC framework

What is the best way to rid ourselves of unwanted values?

Managing Authorization Errors in FirebaseListObservable

Retrieve data from a web api at regular intervals using Angular observables and subscription

What causes the discrepancy in results between these two NodeJS/Typescript imports?

Creating asynchronous JavaScript constructors using a static method called "create" presents challenges when dealing with TypeScript types

Inspect the TypeScript typings within Svelte documents directly from the terminal

What is the best way to hand off this object to the concatMap mapping function?

SignalR 2.2 application encountering communication issues with client message reception

Using ThreeJS to Apply Dual Materials to a Mesh Entity

Encountering error TS2307: Module 'redux' not found when trying to implement redux in Angular 7

Search for records in MySQL using Typeorm with the condition "column like %var%" to retrieve results containing the specified

Determine if the "type" field is optional or mandatory for the specified input fields in Typescript

Custom type declaration file in Typescript fails to function properly

Error message TS2339: The method 'findAll' is not defined in the current context

What could be causing TypeScript to struggle with verifying the return type of a function?

Mismatched data types caused by immutability