DOM (Document Object Model), veb səhifələrin məzmununu və strukturunu təmsil edən bir modeldir. Bu model vasitəsilə proqramçılar veb səhifələrin elementlərini dinamik şəkildə idarə edə və dəyişdirə bilirlər. DOM, sənədi bir ağac strukturu kimi təsvir edir, burada hər bir element, atribut və mətn hissəsi ayrı bir düyün (node) kimi təmsil olunur. Gəlin DOM-un əsas elementlərinə və necə işlədiyinə daha detallı baxaq.

DOM-un Strukturu

DOM-un strukturu bir ağac quruluşuna bənzədilir. Bu quruluşda:

  • Kök düyün (Root Node): Ağacın ən üst səviyyəsində yerləşən düyündür. HTML sənədində bu, sənədin document obyekti ilə təmsil olunur.
  • Element düyünləri (Element Nodes): HTML və ya XML elementləri ağacın budaqlarını təşkil edir. Məsələn, <html>, <body>, <div> kimi elementlər bu düyünlərə nümunədir.
  • Mətn düyünləri (Text Nodes): HTML elementlərinin içərisindəki məzmunu təmsil edən düyünlərdir. Bu məzmun Hello, World! kimi mətni əhatə edir.
  • Atribut düyünləri (Attribute Nodes): HTML elementlərinin xüsusiyyətlərini təmsil edən düyünlərdir, məsələn, id, class, href və s.

DOM Ağacının Sxemi:

Bir HTML sənədinin DOM ağacı təxminən belə görünə bilər:

document │

│ ├── html │

│      ├── head 

│      └── body 

│           ├── h1 │

│           │   └── "Hello!"

│           └── p

│           │   └── "Paragraph."

Bu ağacda html, head, body, h1, p element düyünləridir. Hello, World!This is a paragraph. isə mətn düyünləridir.

DOM ilə İşləmək

Elementləri Seçmək

DOM-a daxil olmaq üçün proqramçılar müxtəlif metodlardan istifadə edirlər. Məsələn:

  • document.getElementById(id): Verilən id atributuna sahib elementi seçir.
  • document.getElementsByClassName(className): Verilən class atributuna sahib elementləri seçir.
  • document.querySelector(selector): CSS selektoru istifadə edərək ilk uyğun gələn elementi seçir.
  • document.querySelectorAll(selector): CSS selektoru istifadə edərək bütün uyğun gələn elementləri seçir.

Elementləri Dəyişdirmək

DOM vasitəsilə elementlərin məzmunu, atributları və stili dəyişdirilə bilər:

  • Mətn Dəyişmək:
    let element = document.getElementById("myElement"); 
    element.innerText = "Yeni mətn"; 
  • Atribut Dəyişmək:
    let link = document.querySelector("a"); 
    link.setAttribute("href", "https://yeni-url.com"); 
  • Stil Dəyişmək:
    let box = document.querySelector(".box"); 
    box.style.backgroundColor = "blue"; 

Yeni Elementlər Yaratmaq və Əlavə Etmək

DOM-a yeni elementlər əlavə etmək mümkündür:

  • Yeni Element Yaratmaq:
    let newElement = document.createElement("div"); 
    newElement.innerText = "Bu yeni bir divdir"; 
  • Elementi DOM-a Əlavə Etmək:
    let parentElement = document.querySelector("body"); 
    parentElement.appendChild(newElement); 

Elementləri Silmək

DOM-dan bir elementi silmək üçün removeChild metodu istifadə edilir:

let parent = document.querySelector("body"); 
let child = document.getElementById("myElement"); parent.removeChild(child); 

DOM ilə Tətbiqlərin Dinamikliyi

DOM, veb tətbiqlərin interaktiv və dinamik olmasını təmin edən əsas vasitələrdən biridir. JavaScript ilə DOM üzərində əməliyyatlar edərək, istifadəçilərin səhifədə gördüklərini dəyişmək, yeni məzmun əlavə etmək, və ya mövcud məzmunu silmək mümkündür.

DOM ilə Hadisə İdarəetməsi

DOM-da hadisə idarəetməsi (event handling) də mümkündür. Bu, istifadəçilərin səhifə ilə qarşılıqlı əlaqələrinə (məsələn, düyməyə basmaq, formu doldurmaq və s.) cavab verməyə imkan verir:

let button = document.querySelector("button"); 
button.addEventListener("click", function() {
    alert("Düyməyə basıldı!");
}); 

DOM, veb səhifələrin məzmununun və strukturunun idarə edilməsini asanlaşdıran güclü bir vasitədir. Bu model, proqramçılara veb səhifələri dinamik olaraq dəyişdirmək, yeni məzmun əlavə etmək və ya istifadəçi qarşılıqlı əlaqələrinə cavab vermək imkanı verir. DOM, HTML və JavaScript proqramlaşdırmasında əsas bir rol oynayır və veb səhifələrin funksionallığını genişləndirmək üçün istifadə olunur.