DOM'daki Nitelikler, Sınıflar ve Stiller Nasıl Değiştirilir

Giriş

Bu dizideki önceki öğreticide, "DOM'taki Değişiklikler Nasıl Yapılır?", Yerleşik yöntemlerle Belge Nesnesi Modeli'nden (DOM) öğe oluşturma, ekleme, değiştirme ve kaldırma konularını ele aldık. DOM’ı manipüle etme konusundaki uzmanlığınızı artırarak, JavaScript’in etkileşimli yeteneklerini daha iyi kullanabilir ve web öğelerini değiştirebilirsiniz.

Bu eğiticide, HTML eleman düğümlerinin stillerini, sınıflarını ve diğer özelliklerini değiştirerek DOM'yi nasıl değiştireceğimizi öğreneceğiz. Bu, DOM içindeki temel öğelerin nasıl işleneceği hakkında daha fazla bilgi verecektir.

Seçmeli Elemanların İncelenmesi

Yakın zamana kadar, jQuery adı verilen popüler bir JavaScript kütüphanesi, DOM'deki öğeleri seçmek ve değiştirmek için sıklıkla kullanıldı. jQuery, bir veya daha fazla öğenin seçilmesi ve hepsinde aynı anda değişikliklerin uygulanması sürecini basitleştirdi. "DOM'daki Öğelere Nasıl Erişilir" bölümünde, vanilya JavaScript'teki düğümlerle çalışma ve yakalama için DOM yöntemlerini inceledik.

Yorum yapmak için document.querySelector() ve document.getElementById() , tek bir öğeye erişmek için kullanılan yöntemlerdir. Aşağıdaki örnekte bir id niteliğine sahip bir div kullanarak, bu öğeye iki şekilde erişebiliriz.

<div id="demo-id">Demo ID</div>

querySelector() yöntemi, sayfadaki herhangi bir seçici tarafından bir öğe querySelector() daha sağlamdır.

// Both methods will return a single element
const demoId = document.querySelector('#demo-id');

Tek bir öğeye erişerek, içindeki metin gibi öğenin bir parçasını kolayca güncelleyebiliriz.

// Change the text of one element
demoId.textContent = 'Demo ID text updated.';

Bununla birlikte, belirli bir sınıf gibi ortak bir seçici tarafından çoklu öğelere erişirken, listedeki tüm öğeler arasında geçiş yapmamız gerekir. Aşağıdaki kodda, ortak sınıf değerine sahip iki div var.

<div class="demo-class">Demo Class 1</div>
<div class="demo-class">Demo Class 2</div>

Onlara uygulanan demo-class ile tüm öğeleri kapmak için querySelectorAll() kullanacağız ve forEach() ile bunların arasında geçiş querySelectorAll() bir değişiklik uygulayacağız. Bir dizi ile aynı şekilde querySelectorAll() ile belirli bir öğeye erişmek de mümkündür.

// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');

// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
element.textContent = 'All demo classes updated.';
});

// Access the first element in the NodeList
demoClasses[0];

JQuery'den vanilla JavaScript'e geçerken dikkat edilmesi gereken en önemli farklardan biri budur. Değiştirici elemanların birçok örneği, bu metot ve özelliklerin çoklu elementlere uygulanması sürecini açıklamayacaktır.

Bu makaledeki özellikler ve yöntemler genellikle tıklamalara, gezinenlere veya diğer tetikleyicilere yanıt vermek için olay dinleyicilerine eklenir.

Not: getElementsByClassName() yöntemleri ve getElementsByTagName() forEach() yöntemleri, querySelectorAll() yöntemine sahip forEach() yöntemine erişimi olmayan HTML koleksiyonlarını döndürür. Bu durumlarda, koleksiyonda yinelemek for standart bir döngü kullanmanız gerekir.

Özniteliklerin Değiştirilmesi

Nitelikler, HTML öğeleri hakkında ek bilgi içeren değerlerdir. Genellikle isim / değer çiftleri gelirler ve öğeye bağlı olarak gerekli olabilirler.

En yaygın HTML niteliklerin bazıları src bir öznitelik img etiketi, href bir ait a etiket, class , id ve style . HTML özelliklerinin tam listesi için, Mozilla Geliştirici Ağı'ndaki özellik listesini görüntüleyin. HTML standardının parçası olmayan özel öğeler, data- ile eklenir.

JavaScript'te, öğe niteliklerini değiştirmek için dört yönteme sahibiz:

Method
Description
Example
hasAttribute()Returns a true or false booleanelement.hasAttribute('href');
getAttribute()Returns the value of a specified attribute or nullelement.getAttribute('href');
setAttribute()Adds or updates value of a specified attributeelement.setAttribute('href', 'index.html');
removeAttribute()Removes an attribute from an elementelement.removeAttribute('href');

Tek bir özniteliğe sahip bir img etiketiyle yeni bir HTML dosyası oluşturalım. Bir URL aracılığıyla kullanılabilen genel bir resme bağlantı vereceğiz, ancak çevrimdışı çalışıyorsanız alternatif bir yerel resim için değiştirebilirsiniz.

attributes.html<!DOCTYPE html>
<html lang="en">
<body>

<img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">

</body>

</html>

Yukarıdaki HTML dosyasını modern bir web tarayıcısına yüklediğinizde ve yerleşik Developer Console'u açtığınızda, aşağıdaki gibi bir şey görmelisiniz:

Şimdi, tüm özellik yöntemlerini anında test edebiliriz.

// Assign image element
const img = document.querySelector('img');

img.hasAttribute('src'); // returns true
img.getAttribute('src'); // returns "...shark.png"
img.removeAttribute('src'); // remove the src attribute and value

Bu noktada, src özniteliğini ve img ile ilişkili değeri kaldırmış olacaksınız, ancak bu özniteliği sıfırlayabilir ve değeri img.setAttribute() ile alternatif bir görüntüye atayabilirsiniz:

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');

Son olarak, biz ayarı, elemanın bir özelliği olarak öznitelik için yeni bir değer atayarak direkt niteliğini değiştirebilir src geri shark.png dosyası

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

Herhangi bir özellik yukarıdaki yöntemlerle olduğu gibi bu şekilde de düzenlenebilir.

hasAttribute() ve getAttribute() yöntemleri genellikle koşullu ifadelerle kullanılır ve setAttribute() ve removeAttribute() yöntemleri DOM'yi doğrudan değiştirmek için kullanılır.

Sınıfları Değiştirme

Sınıf özniteliği CSS sınıfı seçicilerine karşılık gelir. Bu, özel bir JavaScript işlevi olan ES6 sınıflarıyla karıştırılmamalıdır.

CSS sınıfları, her sayfada yalnızca bir kez bulunabilen kimliklerden farklı olarak stillere birden çok öğe uygulamak için kullanılır. JavaScript'te, class özniteliğiyle çalışmak için className ve classList özelliklerine classList .

Method/Property
Description
Example
classNameGets or sets class valueelement.className;
classList.add()Adds one or more class valueselement.classList.add('active');
classList.toggle()Toggles a class on or offelement.classList.toggle('active');
classList.contains()Checks if class value existselement.classList.contains('active');
classList.replace()Replace an existing class value with a new class valueelement.classList.replace('old', 'new');
classList.remove()Remove a class valueelement.classList.remove('active');

Sınıf yöntemleriyle, iki öğe ve birkaç sınıfla birlikte çalışmak için başka bir HTML dosyası hazırlayacağız.

classes.html<!DOCTYPE html>
<html lang="en">

<style>
body {
max-width: 600px;
margin: 0 auto;
font-family: sans-serif;
}
.active {
border: 2px solid blue;
}

.warning {
border: 2px solid red;
}

.hidden {
display: none;
}

div {
border: 2px dashed lightgray;
padding: 15px;
margin: 5px;
}
</style>

<body>

<div>Div 1</div>
<div class="active">Div 2</div>

</body>

</html>

classes.html dosyasını bir web tarayıcısına açtığınızda, aşağıdakine benzeyen bir görünüm almalısınız:

className özelliği, JavaScript'te bulunan class anahtar kelimesiyle ve DOM'a erişimi olan diğer dillerle çakışmaları önlemek için tanıtıldı. Doğrudan sınıfa bir değer atamak için className kullanabilirsiniz.

// Select the first div
const div = document.querySelector('div');

// Assign the warning class to the first div
div.className = 'warning';

Biz atamış warning CSS değerlerinde tanımlanan sınıf classes.html birinciye div . Aşağıdaki çıktıyı alacaksınız:

Öğede zaten herhangi bir sınıf varsa, bunların geçersiz kılınacağını unutmayın. className özelliğini kullanarak birden çok boşluk ayrılmış sınıf ekleyebilir veya öge üzerinde sınıfın değerini almak için atama operatörleri olmadan kullanabilirsiniz.

Sınıfları değiştirmenin diğer bir yolu, birkaç yardımcı yöntemle gelen classList özelliği ile gerçekleşir. Bu yöntemler jQuery addClass , removeClass ve toggleClass yöntemlerine benzer.

// Select the second div by class name
const activeDiv = document.querySelector('.active');

activeDiv.classList.add('hidden'); // Add the hidden class
activeDiv.classList.remove('hidden'); // Remove the hidden class
activeDiv.classList.toggle('hidden'); // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class

Yukarıdaki yöntemleri gerçekleştirdikten sonra, web sayfanız şöyle görünecektir:

Farklı olarak className örneğin, kullanılarak classList.add() mevcut sınıfların listeye yeni bir sınıf ekleyecektir. Ayrıca, virgülle ayrılmış dizeler olarak birden çok sınıf ekleyebilirsiniz. Bir öğenin sınıfını değiştirmek için setAttribute kullanmak da mümkündür.

Stilleri Değiştirme

Stil özelliği, HTML öğesinde satır içi stilleri temsil eder. Sıklıkla, bu makalede daha önce yaptığımız gibi, stiller bir stil sayfası aracılığıyla elemanlara uygulanır, ancak bazen doğrudan bir satır içi stil eklemek veya düzenlemek zorundayız.

JavaScript ile düzenleme stillerini göstermek için kısa bir örnek oluşturacağız. Aşağıda, bir kareyi görüntülemek için uygulanan bazı satır içi stilleri olan bir div içeren yeni bir HTML dosyasıdır.

styles.html<!DOCTYPE html>
<html lang="en">

<body>

<div style="height: 100px;
width: 100px;
border: 2px solid black;">Div</div>

</body>

</html>

Bir web tarayıcısında açıldığında, styles.html şöyle bir şeye benzeyecektir:

Stilleri düzenlemek için bir seçenek setAttribute() .

// Select div
const div = document.querySelector('div');

// Apply style to div
div.setAttribute('style', 'text-align: center');

Ancak, bu, tüm satır içi stillerini elemandan kaldırır. Muhtemelen amaçlanan etki olmadığından, style özniteliğini doğrudan kullanmak daha iyidir.

div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';

CSS özellikleri, kebap-case'de yazılmıştır, küçük harflerle ayrılmış çizgilerdir. Kebab-case CSS özelliklerinin JavaScript stili özelliğinde kullanılamayacağını unutmamak önemlidir. Bunun yerine, ilk kelimenin küçük harfli olduğu ve sonraki sözcüklerin tümü büyük harfli olduğunda, bunlar camelCase eşdeğeriyle değiştirilecektir. Başka bir deyişle, text-align yerine JavaScript stili özelliği için textAlign kullanırız.

// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';

Yukarıdaki stil değişikliklerini tamamladıktan sonra, styles.html son görüntüsü bir çevre gösterecektir:

Bir öğeye birçok stilistik değişiklik uygulanacaksa, en iyi eylem tarzı stilleri bir sınıfa uygulamak ve yeni bir sınıf eklemek. Ancak, satır içi stil özniteliğini değiştirmenin gerekli veya daha basit olacağı bazı durumlar vardır.

Sonuç

HTML elemanları genellikle kendilerine öznitelikler şeklinde atanan ek bilgilere sahiptir. Öznitelikler ad / değer çiftlerinden oluşabilir ve en yaygın özelliklerden bazıları class ve style .

Bu eğiticide, düz JavaScript'i kullanarak DOM'daki bir HTML öğesindeki özniteliklere nasıl erişileceğini, değiştirileceğini ve kaldırılacağını öğrendik. Ayrıca, bir öğe üzerinde CSS sınıflarının nasıl ekleneceğini, kaldırılacağını, değiştirileceğini ve değiştirileceğini ve satır içi CSS stillerinin nasıl düzenleneceğini de öğrendik. Ek okuma için, Mozilla Geliştirici Ağı'ndaki özelliklerle ilgili belgelere bakın.

Bir önceki yazımız olan Laravel 5.6.22 ve 5.6.21 Çıktı başlıklı makalemizi de okumanızı öneririz.

About This Author

Comments are closed

%d blogcu bunu beğendi: