4.1 Atributlarla Manipulyasiya
DOM elementlərinin atributları və stilləri ilə manipulyasiya – veb-sənədlərlə işləməyin vacib hissəsidir. Bu, elementlərin xarici görünüşünü və davranışını istifadəçinin hərəkətlərinə və ya digər şərtlərə əsasən dəyişdirməyə imkan verir.
1. Atributların alınması
Elementin atributlarının dəyərlərini almaq üçün getAttribute() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<a href="https://example.com" id="myLink">Example.com ziyarət edin</a>
<script>
const link = document.getElementById('myLink');
const href = link.getAttribute('href');
console.log(href); // Çıxarış: https://example.com
</script>
</body>
</html>
2. Atributların təyin edilməsi
Elementin atributunun dəyərini təyin etmək və ya dəyişdirmək üçün setAttribute() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<a href="https://example.com" id="myLink">Example.com ziyarət edin</a>
<script>
const link = document.getElementById('myLink');
link.setAttribute('href', 'https://newexample.com');
console.log(link.getAttribute('href')); // Çıxarış: https://newexample.com
</script>
</body>
</html>
3. Atributların silinməsi
Elementin atributunu silmək üçün removeAttribute() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Example.com ziyarət edin</a>
<script>
const link = document.getElementById('myLink');
link.removeAttribute('target');
console.log(link.getAttribute('target')); // Çıxarış: null
</script>
</body>
</html>
4. Atributların olub-olmamasını yoxlamaq
Atributun mövcudluğunu yoxlamaq üçün hasAttribute() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Example.com ziyarət edin</a>
<script>
const link = document.getElementById('myLink');
console.log(link.hasAttribute('target')); // Çıxarış: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Çıxarış: false
</script>
</body>
</html>
4.2 Klasslarla manipulyasiya
1. Klassların əlavə olunması
Elementə klass əlavə etmək üçün classList.add() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph">Bu bir paraqrafdır.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.add('highlight');
</script>
</body>
</html>
2. Klassların silinməsi
Elementdən klassı silmək üçün classList.remove() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">Bu bir paraqrafdır.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.remove('highlight');
</script>
</body>
</html>
3. Klassların dəyişdirilməsi (toggle)
Klassları dəyişmək üçün classList.toggle() metodundan istifadə olunur. Klass yoxdursa, əlavə edir, varsa isə silir.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" id="myButton">Məni kliklə!</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener("click", () => {
btn.classList.toggle('highlight'); // Klassı əlavə edir. Təkrar klikləməklə silir.
});
</script>
</body>
</html>
4. Klassın varlığını yoxlama
Klassın varlığını yoxlamaq üçün classList.contains() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">Bu bir paraqrafdır.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph.classList.contains('highlight')); // Çap edəcək: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Çap edəcək: false
</script>
</body>
</html>
4.3 Stilin manipulasiya olunması
1. Inline stilərin dəyişdirilməsi
Elementin inline stilini dəyişmək üçün style xassəsi istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<p id="myParagraph">Bu abzasdır.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
</body>
</html>
2. Hesablanmış stillərin alınması
Elementin mövcud hesablanmış stillərini əldə etmək üçün window.getComputedStyle() metodu istifadə olunur.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
<style>
#myParagraph {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="myParagraph">Bu abzasdır.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const styles = window.getComputedStyle(paragraph);
console.log(styles.color); // Çıxış: rgb(0, 0, 255) və ya mavi rəng
console.log(styles.fontSize); // Çıxış: 18px
</script>
</body>
</html>
3. Inline stillərin silinməsi
Inline stiləri silmək üçün stilin dəyərini boş sətrə bərabər etmək kifayətdir.
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Sənəd</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">Bu abzasdır.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>
GO TO FULL VERSION