JavaScript`də ilkin anlayışlar (JavaScript Document Object Model-DOM)
JavaScript nədir ?
JavaScript yazdığımız websayta daha mürəkkəb üstünlüklər əlavə etməyimiz üçün istifadə olunan skript və ya proqramlaşdırma dilidir. Əksər hallarda, yazılan websayt insanların uzaqdan, sadəcə, statik məlumatlara baxması üçün nəzərdə tutulmur. Əgər, saytda interaktiv xəritələr, mürəkkəb animasiyalar, 2D və ya 3D qrafiklər varsa, və ya uyğun vaxtlarda məzmun yeniləmələri olursa, burada JavaScript`in olduğunu başa düşə bilərik. Qeyd edək ki, standart web texnologiyasında JavaScript 3-cü təbəqəni təşkil edir (1-ci və 2-ci təbəqə isə HTML və CSS-dir).
JavaScript DOM (Document Object Model) nədir?
Document Object Model (DOM) HTML və XML sənədləri üçün nəzərdə tutulmuş proqramlaşdırma interfeysidir. Sənədlərin və ya websaytın quruluşunu, tərzini, məzmununu dəyişdirmək, dinamikləşdirmək üçün istifadə olunur. Beləliklə, proqramlaşdırma dilləri səhifələrə əlavə olunur. Bu o demək deyil ki, DOM proqramlaşdırma dilidir, DOM standart bir modeldir və bu modeldən istifadə edərək HTML və ya XML sənədləri, və ya, bu sənədlərdə işlədilən elementləri (h1, a, table, form və s.) dəyişə, idarə edə bilirik.
Elementlərin seçilməsi-
JavaScript`in HTML sənədinə qoşulmasından danışanda, JavaScript`də HTML elementlərinə uyğun obyekt yaratmağı nəzərdə tuturuq. Necə ki, HTML`də hər hansı element class, id və ya elementin adına əsasən seçilir, CSS`də bu elementin xarakteristikaları dəyişdirilirdi. Eyni ilə, JavaScript`də də müxtəlif seçim üsulları vardır.
getElementById() — metodu ilə, id`nin adına uyğun olan elementi obyektə mənimsədəcəyik, məsələn,
const myParagraph = document.getElementById(“first”); — myParagraph obyektinə HTML`də id`si “first” olan elementi mənimsət.;
getElementsByName() — metodundan istifadə edərək, elementin adına uyğun elementi əldə edəcəyik;
getElementsByTagName() — metodu isə yazılan tag`a uyğun element qaytaracaqdır. Məsələn, h1, div, p və s.
getElementsByClassName() — elementin əsas atributlarından biri olan class`a əsasən işlədirik;
querySelector() və querySelectorAll() — elementlərin atributlarını CSS`də olduğu kimi (yəni, elementinAdı, .elementinClassı və #elementin id` si) yazmalıyıq. Məsələn,
const myParagraph = document.querySelector(“#first”); — myParagraph obyektinə HTML`də id`si “first” olan elementi mənimsət.;
Bildiyimiz kimi, İd hər element üçün yalnız 1 dəfə yazılmalıdır. Eyni id`ə malik olan 2 və ya daha artıq element yazmaq mümkün deyil. Amma, eyni class və tag adı ilə istənilən qədər element yaza bilərik. Bu zaman, querySelectorAll() metodunu işlədərək, eyniadlı və ya eyni class adı olan elementləri listlər şəklində bir obyektə mənimsədə bilərik. Qeyd edək ki, querySelector() metodunu class və ya tag`ın adına əsasən işlətdikdə, bu tag və ya class adına malik olan ilk element nəzərdə tutulur.
Elementlərin manipulasiyası-
HTML sənədində yazdığımız elementləri seçməyi, obyektlərə mənimsətməyi öyrəndik, indi isə onları idarə etməkdən danışaq.
createElement() — boş element yaradır;
innerHTML — elementə məlumat əlavə edir;
appendChild() — elementi tələb olunan elementin daxilinə əlavə edir;
removeChild() — elementi HTML sənədindən silmək üçün istifadə olunur.
Yuxarıda qeyd olunan metodlardan istifadə etməklə, biz yeni, boş element (tag) yarada, onun içinə bizə lazım olan məlumatları əlavə edə, və bu elementi HTML sənədində lazım olan hissəyə yerləşdirə (yeni elementin parent`ini təyin edə) bilərik. Daha ətraflı desək,
<html>
<head>
<meta charset=”utf-8">
<title>JS CreateElement Demo</title>
</head> <body>
<script>
let div = document.createElement(‘div’);
div.id = ‘content’;
div.innerHTML = ‘<p>CreateElement example</p>’;
document.body.appendChild(div);
</script>
</body></html>
Yuxarıdakı kod nümunəsində internal (HTML sənədi daxilində) JavaScript və HTML görürük. JavaScript koduna nəzər yetirsək, görərik ki, verdiyimiz əmrlər aşağıdakı kimidir:
- Yeni, boş "div" yarat;
- Yaratdığımız div`in id`si "content" ə bərabər olsun;
- Div`in daxilində paraqrafımız var;
- Və bu div body tag`ı daxilinə əlavə edilsin.
Aşağıdakı linklərdən JavaScript DOM haqqında daha çox məlumata çata bilərsiniz, qeyd etdiklərim ən çox istifadə və tələb olunan metodlar, əsas anlayışlar idi.
Bol JavaScriptli məqalələrdə görüşənədək!
İstifadə etdiyim mənbələr:
