DOM ve JavaScript
Document Object Model (DOM), HTML ve XML dokümanları için bir programlama interface'idir. Bir dokümanın yapısını node'lardan oluşan bir tree olarak temsil eder; her node dokümandaki bir element'i, attribute'u veya metin içeriğini temsil eder. JavaScript, bir web sayfasının içeriğini ve yapısını değiştirmek için DOM'u kullanarak sayfayı dinamik ve interaktif hâle getirebilir. DOM, World Wide Web Consortium (W3C) standardıdır ve tüm modern web tarayıcıları tarafından desteklenir.
JavaScript'in bir HTML dokümanını değiştirmek için DOM'u nasıl kullanabileceğine dair bir örnek:
Bu örnekte button'a tıklandığında JavaScript'teki changeText() function'ı çağrılır. Function, ID'si "myHeading" olan element'i (<h1> elementi) bulmak için DOM'un getElementById() method'unu kullanır ve ardından bu element'in innerHTML property'sini "Hello DOM" olarak değiştirir. Sonuç olarak button'a tıklandığında başlık metni "Hello World" yerine "Hello DOM" olur.
Bu yalnızca basit bir örnektir. DOM, element'lerle etkileşime geçmek için çok daha fazla method ve property sağlar:
- document.createElement()
- document.appendChild()
- document.removeChild()
- element.getAttribute()
- element.setAttribute()
- vb.