JS Document object model — DOM

JS öyrənməyə davam edirik və bu gün biz brauzer mühiti haqqında danışacağıq. Bu məqalədə JS-imizi layout ilə, yəni HTML və CSS ilə necə birləşdirəcəyimizi anlayacağıq. Teqlər yaratmağı, parametrləri əldə olunmasını və CSS style-nı dəyişdirilməsi kimi xüsusiyətlərə nəzər salaq.

JS əvvəlcə sırf brauzerlər üçün yaradılmışdır, lakin bu gün o, geniş spektrli problmlərin həlli üçün multifunksional proqramlaşdırma dilidir. O veb brauzerdə, veb serverdə və ya hər hansı digər mühitdə istifadə edilə bilər. Hər belə muhit JS spetifikasiyasi üçün özünə uygun funksionallığı təqdim edir. Sözu gedən mühit JS-in əsas imkanlarına əlavə olaraq öz obyektlərini və əlavə funksiyalarını təmin edir. Иrauzerlər, məsələn, veb-səhifəni idarə etmək imkanı verir və node-JS bəzi server tərəfi funksiyaları və s.
Bizi maraqlandıran brauzer mühitidir və aşağıdakı diaqram bu mühitdə JS-nin nəyin mövcud olduğunu göstərir

WINDOW — qlobal obyekt olmaqla yanaşı, WINDOW obyekti, həmçinin brauzer pəncərəsini təmsil edir və onu idarə etmək üçün üsullara malikdir.
Məsələn: “innerWidth” metodundan istifadə edərək brauzer pəncərəsinin enini əldə edə bilərik:

BOM (Browser Object Model).

Bunlar document başqa hər şeylə işləmək üçün brauzer tərəfindən təmin edilən əlavə obyektlərdir.

Naviqator obyektinin köməyi ilə biz brauzerin özü və əməliyyat sistemi haqqında məlumat əldə edə bilərik.

Location obyekti ilə biz cari URL-i əldə edə və ya brauzeri yeni ünvana yönləndirə bilərik.

History obyekti brauzerin tarixçəsini idarə etməyə, əvvəllər ziyarət edilmiş səhifələr arasında hərəkət etməyə imkan verir.

İstifadəçi ilə ünsiyyət qurmağın yolları da var:

DOM (Document Object Model).

HTML səhifəsinin bütün məzmununu dəyişdirilə bilən obyektlər kimi təmsil edir. Deyək ki bir HTML səhifəmiz var:

DOM-da bütün əməliyyatlar DOM-a əsas giriş nöqtəsi olan “document.” obyekti ilə başlayır. Ondan biz istənilən node daxil ola bilərik.

HTML səhifəsinin əsasını teqlər təşkil edir və DOM görə hər bir teq bir obyektdir. İç-içə yerləşən teqlər valideynin uşaqları və nəslindən olanlardır. Mətn və komentlər də obyektdir. Tamamilə bütün bu obyektlər JS-dən bizim üçün mövcuddur və biz onları idarə edə bilərik.

Dokument üzrə navigasiya.

Ağacın ən yuxarı elementləri obyektinin xüsusiyətləti kimi mövcuddur. Beləliklə bütün html faylını əldə edək.

const htmlElement = document.documentElement;

Head obyektini əldə edək.

const headElement = document.head;

Body obyektini əldə edək.

const bodyElement = document.body;

Body obyektini birinci və sonuncu obyektini əldə edək.

const firstChildNode = bodyElement.firstChild;
const lastChildNode = bodyElement.lastChild;

childNodes kolleksiyası mətn qovşaqları da daxil olmaqla bütün uşaqların siyahısını əldə edir.
const childNodes = bodyElement.childNodes;
console.log(childNodes);

Uşaq qovşaqlarının olub olmadığını yoxlamaq üçün da bir üsul var

const childNodes = bodyElement.hasChildNodes();

Gördüyümüz kimi, childNodes bir massiv kimidir. Bu, əslində massiv deyil, kolleksiyadır.
- xüsusi təkrarlana bilən obyekt — psevdo-massiv.

Massivdən fərqlər:
1. Kolleksiya üzərində dövr üçün biz for…of istifadə edə bilərik
2. Kolleksiya massiv olmadığı üçün massiv metodları işləməyəcək

“Living” collections

Bir neçə istisna olmaqla, demək olar ki, bütün DOM kolleksiyaları “canlı”dır.
Başqa sözlə, onlar DOM-un mövcud vəziyyətini əks etdirirlər.
Əgər biz body.childNodes-a istinad saxlasaq və DOM-da qovşaqları əlavə etsək/çıxarsaq, onlar avtomatik olaraq saxlanmış kolleksiyada görünəcəklər.

“READ ONLY”
DOM kolleksiyası və bütün naviqasiya xassələri yalnız oxumaq üçündür. Biz sadəcə childNodes[i] = … yazmaqla bir child nodu digəri ilə əvəz edə bilmərik.
Dəyişdirmək üçün başqa üsullar tələb olunur.

Qonşu və valideyn nodelar

const previousSiblingNode = bodyElement.previousSibling;

const nextSiblingNode = bodyElement.nextSibling;

const parentNode = bodyElement.parentNode;

Əksər tapşırıqlar üçün mətn və şərh qovşaqlarına ehtiyacımız yoxdur.
Bizə teqlər olan və səhifənin strukturunu təşkil edən element qovşaqlarını manipulyasiya etmək lazımdir.

Və childNodes-dan fərqli olaraq biz HTMLCollection əldə edəciyik

Həmçinin, analoqların köməyi ilə elementlərin digər child teqlərini də əldə edə bilərik.

Elementləri axtarışı

querySelectorAll

elem.querySelectorAll(CSS);- Ən universal axtarış metodu, verilmiş CSS seçicisinə uyğun gələn element daxilindəki bütün elementləri qaytarır. Bu üsul çox funksionaldır, çünki istənilən CSS seçicisi istifadə edilə bilər.

!! DİQQƏT: class axtararkən class adından əvvəl mütləq nöqtə qoymalıyıq.

querySelectionAll statik kolleksiya qaytarır və biz onu for…of və forEach() ilə sıralaya bilərik və ya kvadrat möhtərəzənin arasinda konkret elementi əldə edə bilərik

querySelector

elem.querySelector(CSS); —əvvəlki metoda çox oxşardı, amma fərq ondadırki elem.querySelectorAll konkret bir obyekt əldə etmək lazımdırsa, kolleksiya əldə edib oradan tələb olunanı götürməliyik. Beləliklə, querySelector ozü bunu bizim üçün edir, yəni qarşısına çıxan ilk obyekti axtarır və dərhal onu qaytarır.

Daha az istifadə olunan bir sıra başqa üsullar da var, çünki elem.querySelectorAll hamısını əvəz edə bilər, lakin yenə də fərqlər var. Gəlin onnarada baxaq

getElementById

document.getElementById(ID) — Əgər elementin id atributu varsa, o zaman biz onu harada olursa olsun, document.getElementById(id) çağırmaqla əldə edə bilərik.

const elem = document.getElementById(‘listItem’);

getElementsBy***

!! DİQQƏT— getElementsBy.. NOT getElementBy..

elem.getElementsByTagName(tag) — verilmiş teq olan elementləri axtarır və onların kolleksiyasını qaytarır.

const elem = document.getElementsByTagName(‘li’);

getElementsByClassName

elem.getElementsByClassName(className) — verilmiş CSS class malik elementləri qaytarır.

!! DİQQƏT: Burada sinfin qarşısına nöqtə QOYMAYIN

const elem = document.getElementsByClassName(‘lesson__item-list’);

getElementsByName

elem.getElementsByName(name) — verilmiş ad atributuna malik elementləri qaytarır. Çox nadir istifadə olunur.

!! DİQQƏT: Burada sinfin qarşısına nöqtə QOYMAYIN

<ul name="list" class="lesson_list">
const elem = document.getElementsByName(‘list’);

closest

elem.closest(css) metodu CSS seçicisinə uyğun gələn ən yaxın əcdadı axtarır.
Elementin özü də axtarışa daxil edilir.

Elementin əcdadları onun valideyni, valideyninin valideyni, valideyni və s.
Onlar birlikdə elementdən yuxarıya doğru iyerarxiya zəncirini təşkil edirlər.

Başqa sözlə, ən yaxın metod elementdən yuxarı qalxır və hər bir valideyni yoxlayır. Seçiciyə uyğun gələrsə, axtarış dayandırılır. Metod ya əcdad, ya da belə element tapılmadıqda null qaytarır.

Xatırladaq ki, parentElement metodu yalnız elementin birbaşa əsasını qaytarır.

const parentList = elem.closest(‘.lesson__list’);

matches

elem.matches(…) — heç nə axtarmır, lakin elementin CSS vektorunu qane edib-etmədiyini yoxlayır və doğru və ya yanlışı qaytarır.

Yuxarıdaki üsullar yalnız dokumenti oxumaq üçündür. Biz isə kodumuzu tək JS-dən almaq deyil, həm də dəyişdirmək və yaratmaq arzusundayiq və aşağıda təqdim olunan xüsusiyyətlər buna kömək edəcək.

innerHTML

HTML ilə birlikdə obyektin məzmununu “olduğu kimi” alırıq

Obyektin məzmununu dəyişdirmək üçün biz aşağıdakıları edirik; obyektimizə daxil oluruq, innerHTML metodunu çağırırıq və dəyər təyin edirik.

textElement.innerHTML = ‘Сoding is fun!’;

Eyni zamanda, əvvəllər orijinal məzmunu alan köhnə sabitlər dəyişmədi. Bu bizə məzmunu tamamilə dəyişməyə yox, əlavə etməyə imkan verir.

outerHTML

const textElemContent = textElement.outerHTML; — OuterHTML ilə bütün sənədin alınması və dəyişdirilməsi.

innerHTML-dən fərqlər ondan ibarətdir ki, biz obyektin özünün məzmununu əldə etməklə yanaşı, obyektin özünü də alırıq.

Obyekti outerHTML-dən istifadə edərək dəyişikliklər dərc etsək, o zaman obyekt dəyişəcək, lakin çağırılanda yenə orijinalı verəcək.

textContent

textContent elementindən istifadə edərək mətn məzmununu idarə olunması.

Bu üsul əvvəlkilərdən fərqlənir. Çağırıldıqda HTML teqlərini görmürük. textContent ilə biz yalnız mətni əldə edə bilərik.

Məzmunu dəyişmək istəyəndə nə baş verir, qeyd etdiyimiz teqlərin sətirə çevriləcəyini və səhifədə görünəcəyini görəcəyik.
Bu, mətni təhlükəsiz şəkildə yazmaq üçün textContent xassəsinin faydalı xüsusiyyətidir.

Elementlərin yaradılması

createElement

Yeni elementin yaradılması (teq):

const newElement = document.createElement(‘div’);

Obyekti məzmunla doldurmaq üçün bunun üçün yaradılmış elementə müraciət edirik, sonra innerHTML-dən istifadə edərək teqlərlə və s. optionlar ilə dəyər təyin edirik.

newElement.innerHTML = `<p>Try it your <span class=”yellow”>spare</span> time!</p> `;

Yeni mətn qovşağının yaradılması:

const newText = document.createTextNode(‘Hi!’);

Yeni yaradılmış obyektləri isə JS-də dokumentə daxil etmək üçün müxtəlif daxiletmə üsulları mövcuddur.

…before() / …after() / …prepend() / …apend()

Vizual illüstrasiya

insertAdjacentHTML

Ancaq innerHTML kimi HTML teqləri ilə sətir daxil etmək lazımdırsa nə etməliyik? Bunun üçün daha universal bir metod var — insertAdjacentHTML

və burada iki parametrimiz var, birinci parametr ikinci parametrin tam olaraq harada daxil ediləcəyindən cavab verir. Yenə də elementi yerləşdirmək üçün dörd seçimimiz var.

Elavə olaraq bizim daha iki metodumuz var
insertAdjacentText — ancaq mətn çap edir daxilindəki teqlarnan bərabər,
insertAdjacentElement- HTML teqləri nəzərə alaraq kod icra edir

Təcrübədə ən çox insertAdjacentHTML istifadə olunur. Çünki elementlər və mətn üçün append/prepend/before/after metodlarımız var — onlar daha sürətli yazılır və həm qovşaqları, həm də mətni daxil edə bilirlər.

Biz həm yeni qovşaqlar yarada, həm də mövcud olanları köçürə bilərik.
Bütün daxiletmə üsulları avtomatik olaraq qovşaqları köhnə yerlərindən çıxarır.

cloneNode

Əgər elementi köçürmək yox, onun copyni yaratmaq lazımdırsa, o zaman cloneNode metoddan istifadə edirik.

Burada cloneNode() metodun daxilinə true əlavə etsək o zaman bunun daxilindəki məzmunu ilə bərabər copy yaradacaq.

remove

Obyekti silmək lazımdırsa, bu halda remove() metoddan istifadə edirik

textElement.remove()

Class-in İdarəolunması

className & classList

Class dəyişikliyi JS-də çox istifadə edilən əmliyyatlardan biridir. Bunun üçün əvvəlcə class olan obyekt əldə edirik, sonra className istifadə edərək bu obyektin bütün siniflərinin adlarını alırıq.

Ancaq problem ondadır ki, bu şəkildə biz bütün classdarı üzərinə yazırıq.

Bunun qarşısını almaq üçün classList() xassəsindən istifadə edə bilərik.

classList() xüsusiyyəti bir sinfi əlavə etmək və ya silmək üçün müxtəlif metodlara malik xüsusi obyektdir.

Misal üçün element üçün aktiv class əlavə etmək isdiyirik, bunun üçün biz classList və add metoddan istifadə edirik.

classList xassəsi təkrarlana bilir, ona görə də for…of döngəsindən istifadə edərək obyektin bütün mövcud classdarını sadalaya bilərik.

Style

style metodu HTML stil atributuna giriş imkanı verən və onnarı idarə etməkdə üçün bir xüsusiyyətdir.

Nəticədə biz bu stillərin hamsini consolda görəciyik

getComputedStyle

getComputedStyle(element, [pseudo]) — hesablanmış stillərin qaytarır.

const elementStyle = getComputedStyle(elementOne);
console.log(elementStyle.fontSize); // => 18px

getComputedStyle ilə də psevdo element stillərini də əldə edə bilərik.

const elementBeforeStyle = getComputedStyle(elementOne, “::before”);
console.log(elementBeforeStyle.backgroundColor); // rgb(231, 231, 0)

getComputedStyle əldə edilmiş dəyərlərlər yalnız oxunur, onları yenidən təyin edə bilmərik.

Artıq başa düşdüyümüz kimi, JS-dən biz obyektin həm classdarını, həm də stillərini idarə edə bilərik.

Stil xüsusüyyətlərini yalnız classdar bizə kömək edə bilmədikdə manipulyasiya edilməlidir. Məsələn, tez bir obyektin koordinatlarını dəyişdirərkən.

Bir sözlə, classdarın still manipulyasiya CSS ilə həll edə biliriksə demək, o zaman bunu etməliyik!

attributes and properties

hasAttribute() / getAttribute() / setAttribute() / removeAttribute()

Fərqli DOM elementləri fərqli xüsusiyyətlərə malik ola bilər. Məsələn, <a> teqinin referanslara əlaqəli xüsusiyyətləri var, <input> teqinin isə giriş sahəsi ilə əlaqəli xüsusiyyətləri var və s.

HTML-də teqlərin müxtəlif atributları ola bilər. Brauzer teqlər üçün DOM obyektləri yaratmaq üçün HTML-ni təhlil etdikdə standart atributları tanıyır və onlar üçün DOM xassələri yaradır.

Hər bir DOM nodu müvafiq daxili classa aiddir.

link — href xüsusiyyətinə malikdir, çağırılanda biz bu atributun məzmununu, yəni linkin yönləndirdiyi ünvanı əldə edə bilərik. Eyni zamanda, inputun belə bir xüsusiyyəti yoxdur və onu əldə etməyə çalışsaq, undefined alacağıq.

input özünəməxsus dəyər xüsusiyyəti var, çağırılanda biz standart olaraq giriş sahəsinin dəyərini alacağıq, halbuki linkdə belə bir xüsusiyyət yoxdur.

Müəyyən bir element üçün bütün mövcud siyahını əldə etmək üçün biz console.dir() istifadə edə bilərik:

Elementin standart atributları xüsusiyyətlərə çevrilir, lakin qeyri-standart atributlardan istifadə etmək istəyiriksə, müəyyən metodlardan istifadə ed bilərik.

Reserved attributes, dataset

Biz artıq atributlardan istifadə etmişik, lakin bu risklidir.

“Data-” prefiksi ilə başlayan bütün atributlar proqramçılar tərəfindən istifadə edilmək üçün qeydiyyata alınmışdır. Onlar dataset xüsusiyyətində mövcuddur.