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!
və 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ənid
atributuna sahib elementi seçir.document.getElementsByClassName(className)
: Verilənclass
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.