Özellikler

Özellikler, HTML'ye Genel Bakış bölümünde kısaca ele alındı. Şimdi ayrıntılı bir incelemenin zamanı geldi.

Özellikler, HTML'yi güçlü kılan unsurlardır. Özellikler, açılış etiketinde görünen boşlukla ayrılmış adlar ve ad/değer çiftleridir. Öğeler hakkında bilgiler ve işlevler sağlar.

Bir HTML öğesinde etiketlenmiş açılış etiketi, özellikler ve kapanış etiketi.

Özellikler öğelerin davranışını, bağlantılarını ve işlevlerini tanımlar. Bazı özellikler globaldir. Diğer bir deyişle, herhangi bir öğenin açılış etiketinde görünebilir. Bazı özellikler ise tüm öğeler için geçerli olmasa da birkaç öğe için geçerlidir. Diğer özellikler ise öğeye özgüdür ve yalnızca tek bir öğeyle alakalıdır. HTML'de, boole hariç tüm özellikler ve bir ölçüde numaralandırılmış özellikler için değer gerekir.

Bir özellik değeri boşluk veya özel karakterler içeriyorsa değerin tırnak içine alınması gerekir. Bu nedenle yazıların daha rahat okunabilmesi için her zaman alıntılar yapmanız önerilir.

HTML büyük/küçük harfe duyarlı olmasa da bazı özellik değerleri duyarlıdır. HTML spesifikasyonunun bir parçası olan değerler büyük/küçük harfe duyarlı değildir. Tanımlanan dize değerleri (sınıf ve kimlik adları gibi) büyük/küçük harfe duyarlıdır. Bir özellik değeri HTML'de büyük/küçük harfe duyarlıysa, CSS ve JavaScript'te özellik seçicinin parçası olarak kullanıldığında büyük/küçük harfe duyarlıdır. Aksi takdirde, büyük/küçük harfe duyarlı değildir.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

Boole özellikleri

Bir boole özelliği mevcutsa bu özellik her zaman doğru olur. Boole özellikleri arasında şunlar bulunur: autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, ve selected. Bu özelliklerden biri (veya daha fazlası) mevcutsa öğe devre dışı, gerekli, salt okunur vb. durumlarla karşı karşıyadır. Mevcut değilse bu öğe yoktur.

Boole değerleri atlanabilir, boş bir dizeye ayarlanabilir veya özelliğin adı olabilir. Ancak değerin gerçekten true dizesine ayarlanması gerekmez. true, false ve 😀 dahil olmak üzere tüm değerler geçersizken doğru olarak çözümlenir.

Bu üç etiket eşdeğerdir:

<input required>
<input required="">
<input required="required">

Özellik değeri yanlışsa özelliği çıkarın. Özellik doğruysa özelliği ekleyin ancak değer sağlamayın. Örneğin, required="required" HTML'de geçerli bir değer değildir; ancak required boole olduğundan, geçersiz değerler doğru olarak çözümlenir. Ancak, geçersiz numaralanmış özellikler eksik değerlerle aynı değere çözümlenmeyebilir. Bu nedenle, değerleri atlamayı alışkanlık haline getirmek, hangi özelliklerin boole ile numaralanmış olduğunu ve geçersiz bir değer sağlayabileceğini hatırlamaktan daha kolaydır.

Doğru ve yanlış arasında geçiş yaparken, değeri değiştirmek yerine özelliği JavaScript kullanarak ekleyip tamamen kaldırın.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

SVG gibi XML dillerinde, boole özellikleri dahil olmak üzere tüm özelliklerin bir değer içermesi gerektiğini unutmayın.

Numaralanmış özellikler

Numaralanmış özellikler bazen boole özellikleriyle karıştırılır. Bunlar, önceden tanımlanmış sınırlı bir geçerli değer grubuna sahip olan HTML özellikleridir. Boole özelliklerinde olduğu gibi, özellik mevcutsa ancak değer eksikse varsayılan bir değere sahip olurlar. Örneğin, <style contenteditable> eklerseniz varsayılan olarak <style contenteditable="true"> olur.

Bununla birlikte, boole özelliklerinden farklı olarak, özelliğin atlanması yanlış olduğu anlamına gelmez; eksik bir değere sahip mevcut bir özellik her zaman doğru olmayabilir ve geçersiz değerler için varsayılan değer, boş dizeyle aynı olmayabilir. Örnekten devam edersek contenteditable, eksik veya geçersizse varsayılan olarak inherit değerine ayarlanır ve false değerine ayarlanabilir.

Varsayılan değer özelliğe bağlıdır. Boole değerlerinin aksine özellikler varsa otomatik olarak "true" olmaz. <style contenteditable="false"> özelliğini eklerseniz bu öğe düzenlenemez. Değer geçersizse (ör. <style contenteditable="😀">) veya şaşırtıcı şekilde <style contenteditable="contenteditable"> ise geçersiz olur ve varsayılan olarak inherit olur.

Numaralanmış özelliklerin olduğu çoğu durumda eksik ve geçersiz değerler aynıdır. Örneğin, bir <input> öğesinde type özelliği eksikse, mevcutsa ancak değer olmadan ya da geçersiz bir değere sahipse varsayılan olarak text olur. Bu davranış yaygın olsa da bir kural değildir. Bu nedenle, hangi özelliklerin boole ve numaralanmış olduğunu bilmek önemlidir; yanlış anlamamak için mümkünse değerleri çıkarın ve gerektiğinde değeri arayın.

Genel özellikler

Genel özellikler, <head> içindeki öğeler de dahil olmak üzere tüm HTML öğelerinde ayarlanabilen özelliklerdir. 30'dan fazla genel özellik bulunmaktadır. Bunların tümü teoride herhangi bir HTML öğesine eklenebilir ancak bazı genel özellikler, bazı öğelerde ayarlandığında herhangi bir etki göstermez. Örneğin, bir <meta> öğesine meta içerik görüntülenmediği için hidden politikasının ayarlanması.

id

id genel özelliği, bir öğe için benzersiz bir tanımlayıcı tanımlamak amacıyla kullanılır. Aşağıdakiler dahil olmak üzere birçok amaca hizmet eder: - Bir bağlantının parça tanımlayıcısının hedefi. - Senaryo yazma için bir öğe tanımlama. - Bir form öğesini etiketiyle ilişkilendirme. - Yardımcı teknolojiler için bir etiket veya açıklama sağlayabilirsiniz. - CSS'de yüksek spesifikliğe sahip veya özellik seçici olarak hedefleme stilleri.

id değeri, boşluk içermeyen bir dizedir. Doküman boşluk içeriyorsa doküman bölünmez ancak HTML, CSS ve JS'nizde id öğesini kaçış karakterleriyle hedeflemeniz gerekir. Diğer tüm karakterler geçerlidir. id değeri, 😀 veya .class olabilir ancak iyi bir fikir değildir. Programlamayı mevcut ve gelecekteki kendiniz için kolaylaştırmak istiyorsanız id'nin ilk karakterini harf yapın ve yalnızca ASCII harfleri, rakamlar, _ ve - kullanın. id değerleri büyük/küçük harfe duyarlı olduğundan, bir id adlandırma kuralı bulmak ve ardından bu kurala uymak iyi bir uygulamadır.

id, dokümana özgü olmalıdır. id öğesi birden fazla kez kullanılırsa sayfanızın düzeni muhtemelen bozulmaz ancak JavaScript, bağlantılar ve öğe etkileşimleriniz beklendiği gibi çalışmayabilir.

Gezinme çubuğunda dört bağlantı bulunur. Bağlantı öğesini daha sonra ele alacağız ancak şimdilik bağlantıların HTTP tabanlı URL'lerle sınırlı olmadığını fark ettik. Bunlar, mevcut dokümanda (veya diğer dokümanlarda) sayfa bölümlerinin parça tanımlayıcıları olabilir.

Makine öğrenimi atölyesinin sitesinde, sayfa başlığındaki gezinme çubuğunda dört bağlantı bulunur:

href özelliği, bağlantıyı etkinleştirdiğinizde kullanıcıyı yönlendiren köprüyü sağlar. Bir URL'nin önünde bir karakter dizesi (#) ve ardından gelen bir karakter dizesi bulunuyorsa bu dize parça tanımlayıcısıdır. Bu dize, web sayfasındaki bir öğenin id öğesiyle eşleşirse parça, söz konusu öğeye bir tutturma veya yer işareti olur. Tarayıcı, sabit öğenin tanımlandığı noktaya kaydırır.

Bu dört bağlantı, sayfamızın id özellikleriyle tanımlanan dört bölümüne yönlendirir. Kullanıcı, gezinme çubuğundaki dört bağlantıdan birini tıkladığında, parça tanımlayıcısıyla bağlanan öğe, eşleşen kimliği içeren öğe (#) görünümün içine kaydırır.

Makine öğrenimi atölyesinin <main> içeriğinde, kimliklerin yer aldığı dört bölüm bulunur. Site ziyaretçisi <nav> içindeki bağlantılardan birini tıkladığında bu parça tanımlayıcısını içeren bölüm görünümün içine kaydırılır. İşaretleme şuna benzer:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

<nav> bağlantılarındaki parça tanımlayıcıları karşılaştırıldığında, her birinin <main> içindeki bir <section> öğesinin id ile eşleştiğini görürsünüz. Tarayıcı bize ücretsiz bir "sayfanın üst kısmı" bağlantısı sağlar. href="#top", büyük/küçük harfe duyarlı değil veya sadece href="#" değeri ayarlanırsa kullanıcıyı sayfanın en üstüne kaydırır.

href içindeki karma işareti ayırıcısı, parça tanımlayıcısının bir parçası değil. Parça tanımlayıcısı her zaman URL'nin son bölümüdür ve sunucuya gönderilmez.

CSS seçiciler

CSS'de, her bölümü #feedback gibi bir kimlik seçici veya daha az belirginlik için büyük/küçük harfe duyarlı bir özellik seçici ([id="feedback"]) kullanarak hedefleyebilirsiniz.

Senaryo Yazma

MLW.com'da yalnızca fare kullanıcıları için bir paskalya yumurtası bulunuyor. Işık anahtarını tıkladığınızda sayfa açılır ve kapanır.

Işık anahtarı resmi için işaretleme: html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> id özelliği, getElementById() yöntemi için parametre olarak ve # önekiyle birlikte querySelector() ile querySelectorAll() yöntemlerine ait bir parametrenin parçası olarak kullanılabilir.

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

Tek JavaScript işlevimiz, öğeleri id özelliklerine göre hedefleme özelliğinden yararlanır:

<script>
  /* switch is a reserved word in js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

HTML <label> öğesi, değeri olarak, ilişkilendirildiği form kontrolünün id değerini alan bir for özelliğine sahip. Her form kontrolüne id ekleyerek ve her birini etiketin for özelliğiyle eşleyerek açık bir etiket oluşturmak, her form kontrolünün ilişkili bir etiketine sahip olmasını sağlar.

Her etiket tam olarak bir form kontrolüyle ilişkilendirilebilse de bir form kontrolünün birden fazla ilişkilendirilmiş etiketi olabilir.

Form kontrolü <label> açılış ve kapanış etiketleri arasına iç içe yerleştirilmişse for ve id özellikleri gerekli değildir: Buna "örtülü" etiket denir. Etiketler, tüm kullanıcılara her form kontrolünün neyle ilgili olduğunu bildirir.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

for ile id arasındaki ilişkilendirme, bilgileri yardımcı teknolojilerin kullanıcılarına sunar. Ayrıca, bir etikette herhangi bir yeri tıklamak, odağı ilişkili öğeye vererek kontrolün tıklama alanını genişletir. Bu sadece ellerini kullanma konusunda sorun yaşayan kişiler için değil, aynı zamanda fareyi bir radyo düğmesinden daha geniş parmakla kullanan her mobil cihaz kullanıcısına da yardımcı olur.

Bu kod örneğinde, sahte bir testteki sahte beşinci soru, çoktan seçmeli tek bir sorudur. Her form kontrolünün her biri için benzersiz bir id içeren açık bir etiketi vardır. Bir kimliği yanlışlıkla çoğaltmamızı önlemek için, id değeri soru numarası ile değerin birleşimidir.

Radyo düğmeleri eklerken etiketler radyo düğmelerinin değerini açıkladığından <fieldset> içindeki tüm aynı adı taşıyan düğmeleri kapsarız. <legend> öğesi, tüm grup için etiket veya sorudur.

Diğer erişilebilirlik kullanımları

Erişilebilirlik ve kullanılabilirlik açısından id kullanımı etiketlerle sınırlı değildir. Metnin tanıtımında bir <section>, erişilebilir adı sağlamak amacıyla <section> öğesinin aria-labelledby değeri olarak <h2> öğesinin id öğesine referans verilerek bölge yer işaretine dönüştürüldü:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Erişilebilirliği sağlamak için 50'den fazla aria-* durumu ve özelliği mevcuttur. aria-labelledby, aria-describedby, aria-details ve aria-owns değerleri boşlukla ayrılmış id referans listesini alır. O anda odaklanılmış alt öğeyi tanımlayan aria-activedescendant, değeri olarak tek bir id referansı alır: Odaklanmış tek bir öğenin referansıdır (aynı anda yalnızca bir öğeye odaklanabilir).

class

class özelliği, CSS (ve JavaScript) ile öğeleri hedeflemek için ek bir yol sağlar, ancak HTML'de başka bir amaca hizmet etmez (ancak çerçeveler ve bileşen kitaplıkları bunları kullanabilir). class özelliği, değeri olarak öğe için büyük/küçük harfe duyarlı sınıfların boşlukla ayrılmış bir listesini alır.

Ses semantik yapısı oluşturmak, öğelerin yerleşimlerine ve işlevlerine göre hedeflenebilmesini sağlar. Ses yapısı; alt öğe seçicilerin, ilişkisel seçicilerin ve özellik seçicilerin kullanılmasını sağlar. Bu bölümde özellikler hakkında bilgi edinirken aynı özelliklere veya özellik değerlerine sahip öğelerin stillerini nasıl belirleyebileceğinizi düşünün. Mesele, class özelliğini kullanmamanız değildir. Çoğu geliştirici, genellikle buna gerek olmadığını fark etmez.

MLW şimdiye kadar herhangi bir sınıf kullanmadı. Site tek bir sınıf adı olmadan kullanıma sunulabilir mi? Göreceğiz.

style

style özelliği, özelliğin ayarlandığı tek öğeye uygulanan stiller olan satır içi stillerin uygulanmasını sağlar. style özelliği, değer CSS özellik değer çiftlerini alır ve değerin söz dizimi, CSS stil bloğunun içeriğiyle aynıdır: CSS'de olduğu gibi özelliklerin ardından iki nokta işareti bulunur ve her bir noktalı virgül, değerden sonra gelir.

Stiller, yalnızca özelliğin ayarlandığı öğeye uygulanır. İç içe yerleştirilmiş öğelerdeki veya <style> bloklarındaki ya da stil sayfalarındaki diğer stil bildirimleri, alt öğelerin devralınan özellik değerlerini devralması durumunda uygulanır. Değer, yalnızca bu öğeye uygulanan tek bir stil bloğunun içeriğinin eşdeğerini oluşturduğundan, oluşturulan içerik için, animasyon karesi animasyonları oluşturmak veya başka herhangi bir kural uygulamak amacıyla kullanılamaz.

style genel bir özellik olsa da bunun kullanılması önerilmez. Bunun yerine, stilleri ayrı bir dosya veya dosyalarda tanımlayın. Bununla birlikte, style özelliği, test amacıyla olduğu gibi hızlı biçimlendirme özelliklerini sağlamak için geliştirme sırasında faydalı olabilir. Ardından, "çözüm" stilini alın ve bağlı CSS dosyanıza yapıştırın.

tabindex

tabindex özelliği, odağı almasını sağlamak için herhangi bir öğeye eklenebilir. tabindex değeri, öğenin sekme sıralamasına ve isteğe bağlı olarak varsayılan olmayan bir sekme sıralaması sırasına eklenip eklenmeyeceğini tanımlar.

tabindex özelliği, değeri olarak bir tam sayı alır. Negatif bir değer (normallik -1 kullanmaktır), bir öğenin JavaScript aracılığıyla olduğu gibi odak alma özelliğine sahip olmasını sağlar, ancak öğeyi sekme oluşturma sırasına eklemez. tabindex değerinin 0 olması, öğeyi sekme oluşturma yoluyla odaklanabilir ve erişilebilir hale getirir ve öğeyi kaynak kodu sırasında sayfanın varsayılan sekme sırasına ekler. 1 veya daha yüksek bir değer, öğeyi öncelikli bir odak dizisine yerleştirir ve önerilmez.

Bu sayfada, <button> işlevi gören bir <share-action> özel öğesi kullanan paylaşım işlevi bulunmaktadır. Özel öğeyi klavyenin varsayılan sekme oluşturma sırasına eklemek için sıfırın tabindex değeri dahil edilir:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

button/role, ekran okuyucu kullanıcılarına bu öğenin bir düğme gibi davranması gerektiğini bildirir. JavaScript, düğme işlevselliğinin vadettiğinden emin olmak için kullanılır. click ve keydown etkinliklerinin yanı sıra Enter ve Boşluk tuşlarına basma işlemleri de bu kapsamdadır.

Form denetimleri, bağlantılar, düğmeler ve düzenlenebilir içerik öğelerine odaklanılabilir. Bir klavye kullanıcısı sekme tuşuna bastığında odak, tabindex="0" ayarlanmış gibi bir sonraki odaklanılabilir öğeye geçer. Diğer öğelere varsayılan olarak odaklanılamaz. Bu öğelere tabindex özelliği eklemek, aksi takdirde olmayacakları zamanlarda odak almalarını sağlar.

Bir doküman, 1 veya daha yüksek bir tabindex değerine sahip öğeler içeriyorsa bunlar ayrı bir sekme sırasına eklenir. Kod kaleminde göreceğiniz gibi, sekme işlemleri en düşük değerden en yüksek değere doğru sırayla ayrı bir sırada başlar ve bu sırayla kaynak sırasına göre normal diziden geçer.

Sekme sırasının değiştirilmesi gerçekten kötü bir kullanıcı deneyimine yol açabilir. İçeriğinizde gezinmek için yardımcı teknolojilere (klavyeler ve ekran okuyucular) güvenmeyi zorlaştırır. Bir geliştirici olarak bunu yönetmek ve sürdürmek de zordur. Odak önemlidir. Odaklanma ve odaklanma sırasının tartışıldığı bütün bir modül vardır.

role

role özelliği, whatWG HMTL spesifikasyonu yerine ARIA spesifikasyonunun bir parçasıdır. role özelliği, içeriğe anlamsal anlam sağlamak için kullanılabilir. Böylece ekran okuyucular, sitenin kullanıcılarını bir nesnenin beklenen kullanıcı etkileşimi hakkında bilgilendirebilir.

Yerel HTML eşdeğeri olmayan birleşik kutular, menü çubukları, sekme listeleri ve treegridler gibi yaygın birkaç kullanıcı arayüzü widget'ı vardır. Örneğin, sekmeli tasarım deseni oluştururken tab, tablist ve tabpanel rolleri kullanılabilir. Kullanıcı arayüzünü fiziksel olarak görebilen bir kişi, widget'ta nasıl gezineceğini ve ilgili sekmeleri tıklayarak farklı panelleri nasıl görünür hale getireceğini deneyimle öğrenmiştir. Farklı panelleri göstermek için bir grup düğme kullanıldığında <button role="tab"> ile tab rolünün eklenmesi, ekran okuyucuya o anda odaklanılan <button> öğesinin, düğme benzeri tipik bir işlev uygulamak yerine ilgili paneli görünüme geçirebileceğini anlamasını sağlar.

role özelliği tarayıcı davranışını değiştirmez veya klavye ya da işaretçi cihazı etkileşimlerini değiştirmez. Bir <span> öğesine role="button" eklenmesi, <button> değerine dönüştürülmez. Bu nedenle, anlamsal HTML öğelerini amaçlarına uygun şekilde kullanmanız önerilir. Bununla birlikte, doğru öğenin kullanılması mümkün olmadığında role özelliği, anlamsal olmayan bir öğenin semantik bir öğenin rolüne yeniden yerleştirildiği durumlarda ekran okuyucu kullanıcılarını bilgilendirmeyi sağlar.

contenteditable

contenteditable özelliği true olarak ayarlanmış bir öğe düzenlenebilir, odaklanılabilir ve tabindex="0" ayarlanmış gibi sekme sıralamasına eklenir. Contenteditable, true ve false değerlerini destekleyen numaralanmış bir özelliktir. Özellik yoksa veya geçersiz bir değere sahipse varsayılan değer inherit olur.

Şu üç açılış etiketi eşdeğerdir:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

<style contenteditable="false"> eklerseniz öğe, varsayılan olarak düzenlenebilir (<textarea> gibi) olmadığı sürece düzenlenemez. <style contenteditable="😀"> veya <style contenteditable="contenteditable"> gibi bir değer geçersizse değer varsayılan olarak inherit olur.

Durumlar arasında geçiş yapmak için HTMLElement.isContentEditable salt okunur özelliğinin değerini sorgulayın.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

Alternatif olarak, bu özellik, editor.contentEditable öğesinin true, false veya inherit değerine ayarlanmasıyla da belirtilebilir.

Genel özellikler, <style> öğeleri dahil olmak üzere tüm öğelere uygulanabilir. Canlı bir CSS düzenleyici oluşturmak için özellikleri ve biraz CSS'yi kullanabilirsiniz.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

style öğesinin color öğesini inherit dışında bir değer olarak değiştirmeyi deneyin. Ardından, style öğesini p seçicisiyle değiştirmeyi deneyin. Görüntüleme özelliğini kaldırmayın. Aksi takdirde stil bloğu kaybolur.

Özel özellikler

HTML global özelliklerinin yalnızca yüzeyine değindik. Yalnızca bir veya sınırlı bir öğe grubu için geçerli olan başka özellikler de vardır. Yüzlerce tanımlanmış özellik olsa bile spesifikasyonda bulunmayan bir özelliğe ihtiyacınız olabilir. HTML'de aradığınızı bulabilirsiniz.

data- önekini ekleyerek istediğiniz özel özelliği oluşturabilirsiniz. Özelliğinizi data- ile başlayan herhangi bir adın ardından xml ile başlamayan ve iki nokta üst üste (:) içermeyen küçük harfli karakter serisiyle adlandırabilirsiniz.

data ile başlamayan, desteklenmeyen özellikler oluşturursanız veya özel özelliğinizi xml ile başlatsanız ya da : dahil etseniz bile HTML hoşgörüdür ve bozulmaz. Bununla birlikte, data- ile başlayan geçerli özel özellikler oluşturmanın bazı avantajları vardır. Özel veri özellikleriyle, mevcut bir özellik adını yanlışlıkla kullanmadığınızı bilirsiniz. Özel veri özellikleri geleceğe hazırdır.

Tarayıcılar, data- ön ekli belirli özellikler için varsayılan davranışları uygulamaz ancak özel özellikleriniz üzerinden iterasyon yapabileceğiniz yerleşik bir veri kümesi API'si bulunur. Özel özellikler, uygulamaya özgü bilgileri JavaScript aracılığıyla iletmenin mükemmel bir yoludur. Öğelere data-name biçiminde özel özellikler ekleyin ve bunlara söz konusu öğede dataset[name] kullanarak DOM aracılığıyla erişin.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

Tam özellik adını kullanarak getAttribute() özelliğini kullanabilir veya daha basit olan dataset özelliğinden yararlanabilirsiniz.

el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop

dataset özelliği, her bir öğenin data- özelliklerinden bir DOMStringMap nesnesi döndürür. <blockquote> üzerinde birkaç özel özellik var. Veri kümesi özelliği, adlarına ve değerlerine erişmek için bu özel özelliklerin ne olduğunu bilmenize gerek olmadığı anlamına gelir:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Bu makaledeki özellikler geneldir. Diğer bir deyişle, herhangi bir HTML öğesine uygulanabilir (ancak hepsinin bu öğeler üzerinde etkisi yoktur). Sırada, giriş resminde yer almadığımız iki özelliğe (target ve href) ve bağlantıları daha ayrıntılı olarak incelerken öğeye özgü diğer birçok özelliğe bakacağız.

Öğrendiklerinizi sınayın

Özelliklerle ilgili bilginizi test edin.

Dokümanda id öğesi benzersiz olmalıdır.

Yanlış
Tekrar deneyin.
Doğru
Doğru.

Doğru biçimlendirilmiş özel özelliği seçin.

data-birthday
Doğru
birthday
Tekrar deneyin.
data:birthday
Tekrar dene