CodeGym /Kurslar /Frontend SELF AZ /DOM ilə tanışlıq

DOM ilə tanışlıq

Frontend SELF AZ

Səviyyə , Dərs

Mövcuddur

1.1 DOM-un əsas konsepsiyaları

Document Object Model (DOM) — veb-sənədlər üçün proqram interfeysidir. O, sənədin strukturunu qovşaq ağacı kimi təqdim edir, burada hər qovşaq sənədin bir hissəsidir, məsələn, element, mətn, şərh və s. DOM-u və onun qovşaqlarını başa düşmək veb-texnologiyalarla işləmək üçün fundamental bir aspektdir.

DOM-un əsas konsepsiyaları

DOM nədir?

DOM (Document Object Model) HTML sənədinin məzmununu təsvir edən iyerarxik bir strukturdur. O, proqramlara və skriptlərə sənədin məzmununa dinamik giriş əldə etməyə və onun strukturunu, üslubunu və məzmununu dəyişdirməyə imkan verir.

Qovşaqlar və elementlər

DOM kontekstində sənədin bütün hissələri qovşaq (node) kimi nəzərdən keçirilir. Qovşaqlar bir neçə növdə ola bilər:

Element qovşaqları: HTML teqlərini təmsil edir.
Mətn qovşaqları: element qovşaqlarının içində yerləşən mətni təmsil edir.
Şərh qovşaqları: HTML-dəki şərhləri təmsil edir.
Sənəd qovşaqları: sənədin özünü təmsil edir.

Qovşaq ağacı

DOM, hər qovşağın övladları (uşaq qovşaqlar) ola biləcəyi ağac strukturu şəklində təsvir edilir. Kök qovşaq bütün HTML sənədini təmsil edən document obyektidir.

DOM strukturunun nümunəsi:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Sənədin Başlığı</title>
        </head>
        <body>
          <h1>Salam, Dünya!</h1>
          <p>Bu bir paraqrafdır.</p>
        </body>
      </html>

Bu sənəd üçün DOM ağacı aşağıdakı kimi olacaq:

Text

    
      document
      └── html
          ├── head
          │   └── title
          │       └── #text: "Sənədin Başlığı"
          └── body
              ├── h1
              │   └── #text: "Salam, Dünya!"
              └── p
                  └── #text: "Bu bir paraqrafdır."

1.2 Uzel növləri

1. Element uzelləri

Element uzelləri HTML-teqlərə uyğun gəlir. Məsələn, <body> teqi üçün uzel element uzeli adlanır.

Nümunə:

Bu nümunədə <body> və <h1> element uzelləridir.

HTML

    
      <body>
        <h1>Salam, Dünya!</h1>
      </body>

2. Mətn uzelləri

Mətn uzelləri element uzellərinin içində olan mətni özündə saxlayır. Mətn uzelləri element uzellərinin övladıdır və sətir tipli məlumatları özündə saxlayır.

Nümunə:

Bu nümunədə "Salam, Dünya!" mətni <h1> uzelinin övladı olan mətn uzelidir.

HTML

    
      <h1>Salam, Dünya!</h1>

3. Şərh uzelləri

Şərh uzelləri HTML-dəki şərhləri təmsil edir,  ilə bitir.

Nümunə:

Bu nümunədə  şərh uzelidir.

HTML

    
      <!-- Bu bir şərhdir -->

      <p>Bu bir abzasdır.</p>

4. Sənəd uzelləri

Sənəd uzeli DOM ağacının kök uzelidir və sənəddəki bütün digər uzellər üçün valideyn uzel rolunu oynayır.

Nümunə:

JavaScript-də document obyekti sənəd uzelini təmsil edir:

JavaScript

    
      console.log(document);

1.3 DOM düyünləri ilə qarşılıqlı əlaqə

1. Düyünlər haqqında məlumat əldə etmək

Düyün obyektinin xassələri müəyyən düyün haqqında məlumat əldə etməyə imkan verir. Məsələn, düyünün növünü, adını və məzmununu öyrənmək olar.

Nümunə:

HTML

    
      <html>
        <head>
          <title>Mənim veb-saytım</title>
        </head>
        <body>
          <h1>Salam, dünya!</h1>
        </body>
      </html>

JavaScript

    
      const heading = document.querySelector('h1');

      console.log(heading.nodeName); // Çıxaracaq: H1
      console.log(heading.nodeType); // Çıxaracaq: 1 (Element düyünü)
      console.log(heading.textContent); // Çıxaracaq: "Salam, dünya!"

2. Düyünlərin məzmununu dəyişmək

DOM-un xassələri və metodları vasitəsilə düyünlərin məzmununu dəyişmək mümkündür.

Nümunə:

JavaScript

    
      const paragraph = document.querySelector('p');
      paragraph.textContent = 'Dəyişdirilmiş mətn məzmunu';

3. Uşaq düyünlərlə iş

Hər bir DOM düyünü uşaq düyünlərə malik ola bilər, onlara daxil olmaq və dəyişikliklər etmək mümkündür.

Nümunə:

HTML

    
      <html>
        <head>
          <title>Mənim veb-saytım</title>
        </head>
        <body>
          <ul>
            <li>Haqqımızda</li>
            <li>Karyera</li>
            <li>Əlaqələr</li>
          </ul>
        </body>
      </html>

JavaScript

    
      const list = document.querySelector('ul');
      const firstItem = list.firstElementChild;
      const lastItem = list.lastElementChild;

      console.log(firstItem.textContent); // Siyahının ilk elementinin mətnini çıxaracaq
      console.log(lastItem.textContent); // Siyahının son elementinin mətnini çıxaracaq

1.4 Faydali xassələr

1. Xassələr: nodeName və nodeType

nodeName nodun adını qaytarır
nodeType nodun tipini qaytarır (məsələn, 1 element nodlar üçün, 3 isə mətn nodları üçün)

Nümunə:

HTML

    
      <html>
        <head>
          <title>Mənim veb-saytım</title>
        </head>
        <body>
          <h1>Salam, dünya!</h1>
        </body>
      </html>

JavaScript

    
      const element = document.querySelector('h1');

      console.log(element.nodeName); // Çıxış: H1
      console.log(element.nodeType); // Çıxış: 1

2. Xassələr: textContent və innerHTML

textContent nodun mətn məzmununu qaytarır və ya təyin edir
innerHTML nodun HTML məzmununu qaytarır və ya təyin edir

Nümunə:

HTML

    
      <html>
        <head>
          <title>Mənim veb-saytım</title>
        </head>
        <body>
          <p>Həqiqətən <b>maraqlı</b> və <b>faydalı</b> bir paraqraf!</p>
        </body>
      </html>

JavaScript

    
      const element = document.querySelector('p');

      console.log(element.textContent); // Paraqrafın mətn məzmununu qaytarır
      console.log(element.innerHTML); // Paraqrafın HTML məzmununu qaytarır

3. Xassələr: parentNode, childNodes, firstChild və lastChild

parentNode valideyn nodu qaytarır
childNodes bütün övlad nodlarının kolleksiyasını qaytarır
firstChild ilk övlad nodunu qaytarır
lastChild son övlad nodunu qaytarır

Nümunə:

HTML

    
      <html>
        <head>
          <title>Mənim veb-saytım</title>
        </head>
        <body>
          <ul>
            <li>Haqqımızda</li>
            <li>Karyera</li>
            <li>Əlaqə</li>
          </ul>
        </body>
      </html>

JavaScript

    
      const element = document.querySelector('ul');

      console.log(element.parentNode); // Valideyn nodunu qaytarır
      console.log(element.childNodes); // Övlad nodlarının kolleksiyasını qaytarır
      console.log(element.firstChild); // İlk övlad nodunu qaytarır
      console.log(element.lastChild); // Son övlad nodunu qaytarır

Əvvəlki Əvvəlki dərs

Sonrakı Növbəti dərs

Şərhlər

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION