[[oktatas:web:typescript|< TypeScript]]

====== TypeScript DOM ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztés: 2021, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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á.

<code javascript>
const input = document.getElementById("szam2") as HTMLInputElement;
console.log(input.value);
</code>


<code javascript>
const input = <HTMLInputElement>document.getElementById("szam1");
console.log(input.value);
</code>

<code javascript>
const inputElement = document.querySelector('input') as HTMLInputElement;
</code>


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 =====

<code javascript>
const checkboxElement = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
</code>


===== Radiobutton =====

<code javascript>
const radioButtonElement = document.querySelector('input[type="radio"]') as HTMLInputElement;
</code>

===== 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.


<code javascript>
const buttonElement = document.querySelector('button') as HTMLButtonElement;
</code>