3.1 Elementlərin yaradılması
DOM (Document Object Model) ilə işləmək yalnız mövcud elementlər üzərində naviqasiyanı deyil, həm də yeni elementlərin yaradılmasını, onların sənədə əlavə edilməsini və silinməsini əhatə edir. İndi biz DOM-da elementlərin yaradılması və silinməsi üçün müxtəlif metod və yanaşmaları nəzərdən keçirəcəyik.
document.createElement() metodu
DOM-da yeni element yaratmaq üçün əsas metod document.createElement()-dir. Bu metod yaradılacaq elementin tag adını qəbul edir və yeni boş element qaytarır.
Nümunə:
const newDiv = document.createElement('div');
Elementə məzmunun əlavə edilməsi
Yeni element yaradılandan sonra onu məzmunla doldurmaq olar. Bu məzmun mətn, digər elementlər və ya hər ikisinin kombinasiyası ola bilər.
Nümunə:
const newDiv = document.createElement('div');
newDiv.textContent = 'Bu yeni div elementidir';
innerHTML xüsusiyyətindən istifadə edərək HTML-məzmun əlavə etmək də mümkündür.
Nümunə:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>Bu qalın mətnlə yeni div elementidir</strong>';
3.2 Elementlərin DOM-a əlavə edilməsi
Yaradılmış elementi sənədə əlavə etmək lazımdır. Elementlərin DOM-a əlavə edilməsi üçün bir neçə metod mövcuddur:
1. appendChild() metodu
appendChild() metodu göstərilən ana elementin uşaq elementlərinin siyahısının sonuna bir element əlavə edir.
Nümunə:
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<div>Bu köhnə div elementidir</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Bu yeni div elementidir';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. insertBefore() metodu
insertBefore() metodu ana elementin göstərilən uşaq elementindən əvvəl bir element əlavə edir.
Nümunə:
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<div>Bu köhnə div elementidir</div>
<p>Bu bir paraqrafdır</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Bu yeni div elementidir';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. append() metodu
append() metodu bir və ya bir neçə node və ya string-i göstərilən ana elementin uşaq elementlərinin siyahısının sonuna əlavə edir.
Nümunə:
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<div>Bu köhnə div elementidir</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Bu yeni div elementidir';
const body = document.querySelector('body');
body.append(newDiv);
4. prepend() metodu
prepend() metodu bir və ya bir neçə node və ya string-i göstərilən ana elementin uşaq elementlərinin siyahısının əvvəlinə əlavə edir.
Nümunə:
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<div>Bu köhnə div elementidir</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Bu yeni div elementidir';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Elementlərin klonlanması
cloneNode() metodu elementi klonlamağa imkan verir. Klonlanma dərin (bütün alt elementlərin surətlənməsi ilə) və ya dayaz (yalnız elementin özü) ola bilər.
Dərin klonlama nümunəsi:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Sənəd</title>
</head>
<body>
<div>
Bu div elementidir
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Dayaz klonlama nümunəsi:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Sənəd</title>
</head>
<body>
<div>
Bu div elementidir
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
Element <div> klonlanıb, bunu stillərdən görə bilərik, lakin onun alt elementləri (mətin node "Bu div elementidir" və <ul>) klonlanmayıb.
3.4 Elementlərin silinməsi
1. removeChild() metodu
removeChild() metodu valideyn elementdən övlad elementi silir.
Nümunə:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>Bu bir paragraphdır</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. remove() metodu
remove() metodu elementi birbaşa DOM-dan silir.
Nümunə:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>Bu bir div elementidir</div>
<p>Bu bir paragraphdır</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Elementin məzmununu təmizləmək
innerHTML metodundan istifadə edərək elementin bütün məzmununu silmək mümkündür, sadəcə boş sətir təyin edin.
Nümunə:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>Bu bir paragraphdır</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Bütün övlad elementlərin silinməsi
Bütün övlad elementləri silmək üçün dövrədən və ya innerHTML metodundan istifadə etmək olar.
Dövr ilə nümunə:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>Bu bir paragraphdır</p>
<p>Bu bir paragraphdır</p>
<p>Bu bir paragraphdır</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
innerHTML ilə nümunə:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>Bu bir paragraphdır</p>
<p>Bu bir paragraphdır</p>
<p>Bu bir paragraphdır</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION