< TypeScript

TypeScript DOM

Szerző: Sallai András

Copyright © 2021, Sallai András

Szerkesztés: 2021, 2024

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Bevezetés

A getElementById() és hasonló függvények szimpla HTMElement típust adnak vissza. Az „as” kulcsszóval típuskényszerítéssel pontosíthatjuk a típust.

Input elemek tartalma

A getElementById() függvény HTMLElement típus ad vissza, aminek nincs .value tulajdonsága. Ezért átalakítjuk HTMLInputElement típussá.

const input = document.getElementById("szam2") as HTMLInputElement; console.log(input.value);
const input = <HTMLInputElement>document.getElementById("szam1"); console.log(input.value);
const inputElement = document.querySelector('input') as HTMLInputElement;

DOM elemek:

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples

Checkbox

const checkboxElement = document.querySelector('input[type="checkbox"]') as HTMLInputElement;

Radiobutton

const radioButtonElement = document.querySelector('input[type="radio"]') as HTMLInputElement;

További típusok

HTMLButtonElement: Gombot reprezentál.

HTMLSelectElement: Legördülő lista.

HTMLTextAreaElement: Szövegterület.

HTMLAnchorElement: Hivaktozás (link)

HTMLDivElement: Egy div elem.

HTMLSpanElement: Egy span elem.

const buttonElement = document.querySelector('button') as HTMLButtonElement;