2.1 Elementlərə giriş metodları
DOM (Document Object Model) üzrə naviqasiya veb sənədlərlə işləyərkən vacib bir vəzifədir. JavaScript sənədin elementlərini tapmaq və onlara daxil olmaq üçün bir çox metodlar təqdim edir. Bu metodlar, tərtibatçılara lazım olan elementləri asanlıqla tapmağa və onlarla işləməyə imkan yaradır.
1. getElementById() metodu
getElementById() metodu, göstərilən id atributuna malik element qaytarır. Bu, ən sadə və tez-tez istifadə olunan metodlardan biridir.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<div id="content">Bu mətn tərkibidir</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Çap edəcək: Bu mətn tərkibidir
</script>
</body>
</html>
2. getElementsByClassName() metodu
getElementsByClassName() metodu, göstərilən sinifə malik bütün elementlərin kolleksiyasını qaytarır. Kolleksiya "canlıdır", yəni DOM dəyişdirildikdə avtomatik olaraq yenilənir.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<p class="text">Abzas 1</p>
<p class="text">Abzas 2</p>
<p class="text">Abzas 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Çap edəcək: 3
</script>
</body>
</html>
3. getElementsByTagName() metodu
getElementsByTagName() metodu göstərilən teqə malik bütün elementlərin kolleksiyasını qaytarır. Bu kolleksiya da "canlıdır".
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<p>Abzas 1</p>
<p>Abzas 2</p>
<p>Abzas 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Çap edəcək: 3
</script>
</body>
</html>
4. querySelector() metodu
querySelector() metodu, göstərilən CSS selektoruna uyğun ilk elementi qaytarır. Bu, elementlərin axtarışı üçün çox güclü və çevik bir metoddur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<div class="container">
<p>Abzas 1</p>
<p class="highlight">Abzas 2</p>
<p>Abzas 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Çap edəcək: Abzas 2
</script>
</body>
</html>
5. querySelectorAll() metodu
querySelectorAll() metodu, göstərilən CSS selektoruna uyğun bütün elementlərin statik (dəyişməyən) kolleksiyasını qaytarır.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<div class="container">
<p>Abzas 1</p>
<p class="highlight">Abzas 2</p>
<p>Abzas 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Çap edəcək: 3
</script>
</body>
</html>
2.2 Uzaqlaşdırıcı üzrə Naviqasiya
DOM eyni zamanda cari elementə nisbətdə uzaqlaşdırıcılar üzrə naviqasiya etmək üçün metodlar təqdim edir.
1. parentNode Xassəsi
parentNode xassəsi cari uzaqlaşdırıcının ana uzaqlaşdırıcısını qaytarır.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paraqraf</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Çıxış: container
</script>
</body>
</html>
2. childNodes Xassəsi
childNodes xassəsi cari uzaqlaşdırıcının bütün alt uzaqlaşdırıcılarının kolleksiyasını qaytarır, mətn uzaqlaştırıcıları da daxil olmaqla.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Bütün alt uzaqlaşdırıcıların sayını göstərəcək, mətnləri də daxil olmaqla.
</script>
</body>
</html>
Yəqin ki, nəticənin niyə 7 olduğunu hələ düşünürsünüz?
Yuxarıda qeyd edildiyi kimi, childNodes xassəsi cari uzaqlaşdırıcının bütün alt uzaqlaşdırıcılarının, mətn uzaqlaşdırıcıları da daxil olmaqla, kolleksiyasını qaytarır (boşluqlar, simvollar, yeni sətirlər və s.). HTML işarələməsində <li> elementləri arasında boşluqlar və yeni sətirlər var ki, bunlar da ayrıca uzaqlaşdırıcılar kimi sayılır.
Yuxarıdakı nümunədə <ul> tagı ilə ilk <li> arasında yeni xətt (və bəlkə də boşluq) var — bu da bir mətn uzaqlaşdırıcısı hesab olunur. Eyni vəziyyət bütün <li> arasındadır və sonuncudan sonra da mövcuddur. Buna görə də, üç səhifə elementi yerinə childNodes həmin mətn uzaqlaşdırıcılarını da daxil edir və nəticə olaraq ümumi sayı 7 edir.
Yalnız elementləri almaq üçün (mətn uzaqlaşdırıcılarını nəzərə almadan), yalnız alt elementləri qaytaran children xassəsindən istifadə etmək olar:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. firstChild və lastChild Xassələri
firstChild və lastChild xassələri müvafiq olaraq ilk və son alt uzaqlaşdırıcını qaytarır.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Ola bilər ki, konsolda heç bir şey yoxmuş kimi hiss etmisiniz. Lakin belə deyil. Əslində son alt uzaqlaşdırıcı "Item 1" və yeni xəttdə olan "Item 3" çıxdı. Əgər bu səhvə düşmüsünüzsə, yenidən 2-ci bənd: childNodes Xassəsi hissəsini nəzərdən keçirin.
4. nextSibling və previousSibling Xassələri
nextSibling və previousSibling xassələri eyni səviyyədə olan növbəti və əvvəlki uzaqlaşdırıcıları qaytarır.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Çıxış: Item 3
console.log(prev.textContent); // Çıxış: Item 1 (mətn uzaqlaşdırıcılarını keçərsə)
</script>
</body>
</html>
2.3 Element düyünləri ilə naviqasiya
5. nextElementSibling və previousElementSibling xüsusiyyətləri
Bu xüsusiyyətlər növbəti və əvvəlki element düyünləri (mətn və şərhləri keçərək) qaytarır.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Çap edəcək: Element 3
console.log(prev.textContent); // Çap edəcək: Element 1
</script>
</body>
</html>
6. firstElementChild və lastElementChild xüsusiyyətləri
Bu xüsusiyyətlər ilk və son uşaq element düyünlərini (mətn və şərhləri keçərək) qaytarır.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Çap edəcək: Element 1
console.log(last.textContent); // Çap edəcək: Element 3
</script>
</body>
</html>
GO TO FULL VERSION