ისწავლე

შესავალი DOM-ში

წინა სტატიებში JavaScript-ს ვიყენებდით კონსოლის აპლიკაციების ასაწყობად, თუმცა JavaScript ამით არ შემოიფარგლება. ბრაუზერში გვაქვს DOM, რომლის საშუალებითაც უკვე შევძლებთ JavaScript-ით HTML ელემენტებს ჩავწვდეთ და მათ თვისებები შევუცვალოთ.

რა არის DOM ?

DOM იშიფრება, როგორც Document Object Model (დოკუმენტის ობიექტური მოდელი). იგი არის ვებ დოკუმენტის პროგრამული ინტერფეისი. სახელდობრ, DOM წარმოადგენს დოკუმენტს, როგორც ობიექტს, რომელიც შედგება კვანძებისაგან (nodes). ეს ობიექტი და მისი კვანძები გვაწვდიან მთელ რიგ თვისებებსა და მეთოთებს, რათა დოკუმენტში შევიტანოთ ცვლილებები, მაგალითად: შევცვალოთ სტილები, განვაახლოთ კონტენტი, ვირეაგიროთ სხვადასხვა მოვლენებზე და ა.შ.

DOM-ის ხე

DOM-ის ხე გულისხმობს დომის კვანძებს შორის დამოკიდებულებას, რომელიც HTML-ის ლემენტებს შორის დამოკიდებულებას ასახავს. როგორც მშობელი ელემენტების შიგნით შეიძლება გვქონდეს სხვა შვილობილი ელემენტები, იმავე პრინციპით დომის კვანძების შიგნით შეიძლება გვქონდეს შვილობილი კვანძები.

თუ ჩვენი HTML დოკუმენტის ფაილი შედგება შემდეგი ტექსტისგან:

HTML
<html lang="en">
  <head>
    <title>ჩემი დოკუმენტი</title>
  </head>
  <body>
    <h1>სათაური</h1>
    <p>პარაგრაფი</p>
  </body>
</html>

DOM-ის ხეში ეს დოკუმენტი შემდეგნაირად გამოიყურება:

Document
HTML
HEAD
BODY
TITLE
„ჩემი დოკუმენტი“
H1
P
„სათაური“
„პარაგრაფი“

ეს სქემა ასახავს დომის კვანძებს შორის დამოკიდებულებას. ვინაიდან კვანძი იგივე ობიექტია, ჩვენ შეგვიძლია მთლიანი დოკუმენტი წარმოვიდგინოთ დანესტილ ობიექტებად. ჯავასკრიპტში სწორედ რომ გლობალურ ობიექტს, document-ს ვიყენებთ, რომელსაც გააჩნია შვილობილი კვანძები. მაგალითად:

JS
// დოკუმენტში პირველ h1 ელემენტს ვუცვლით ტექსტურ შიგთავსს
document.querySelector("h1").textContent = "ვაუ";

როცა DOM-ზე ვიმუშავებთ, თვალთახედვაში იქონიეთ, რომ ელემენტები ასეთი იერარქიით იქნება წარმოდგენილი და ჩვენ გვექნება მთელი რიგი მეთოდები, რომლითაც ამ ელემენტებზე ვიმოქმედებთ.

DOM და JavaScript

ვებში მეტწილადად JavaScript-ით განიხილება დოკუმენტთან მუშაობა DOM-ის გამოყენებით, თუმცა ეს ნაწილი არ გულისხმობს იმას, რომ მხოლოდ JavaScript გააჩნია DOM-ზე წვდომა. DOM არ არის JavaScript-ს უშუალო ნაწილი, ის არის WEB API. JavaScript-ის თანხლებით გვეძლევა შესაძლებლობა, რომ გამოვიყენოთ WEB API და მის მიხედვით ვცვალოთ დოკუმენტის კონტექსტი. ამრიგად უნდა გავიაზროთ ის ნაწილი, რომ JavaScript არ არის ერთადერთი ენა, რომლის მიხედვითაც შეიძლება დოკუმენტზე მანიპულაცია. DOM პროგრამული ენებისაგან დამოუკიდებლად შეიქმნა. ჩვენ შეგვიძლია DOM გამოვიყენოთ, როგორც JavaScript-ში ასევე: Python, Java, C# ან Ruby-შიც.

შეჯამება

DOM იშიფრება, როგორც Document Object Model. DOM გამოყენებით JavaScript-იდან შეგვიძლია ამოვიღოთ HTML-ის ელემენტები, როგორც ობიექტები და შევცვალოთ მათი თვისებები. შემდგომ სტატიებში განვიხილავთ, თუ როგორ უნდა ამოვიღოთ HTML ელემენტები, როგორ შევასრულოთ მათზე მანიპულაცია და სხვა ძირეული დეტალები, რაც საჭიროა იმისათვის, რომ სტატიკური კონტენტი დინამიურად ვმართოთ.

გავაგრძელოთ DOM-ის განხილვა: