Özellikler

HTML'ye genel bakış bölümünde kısaca bahsedilen özellikleri daha ayrıntılı bir şekilde inceleyeceğiz.

HTML'yi bu kadar güçlü yapan özelliklerdir. Özellikler, açılış etiketinde görünen ve öğe hakkında bilgi ve işlevsellik sağlayan, boşlukla ayrılmış adlar ve ad/değer çiftleridir.

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

Özellikler, öğelerin davranışını, bağlantılarını ve işlevini tanımlar. Bazı özellikler geneldir. Yani herhangi bir öğenin açılış etiketinde görünebilirler. Diğer özellikler, 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 ilgilidir. HTML'de, boole hariç tüm özellikler ve bir dereceye kadar listelenen özellikler için bir değer gerekir.

Bir özellik değeri boşluk veya özel karakter içeriyorsa değer tırnak içine alınmalıdır. Bu nedenle ve okunabilirliği artırmak için her zaman tırnak içine alma işlemi önerilir.

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

<!-- 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

Boole özelliği varsa bu özellik her zaman doğrudur. Boole özellikleri autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, ve selected'yi içerir. Bu özelliklerden biri (veya daha fazlası) varsa öğe devre dışıdır, zorunludur, salt okunurdur vb. Bu özellikler yoksa öğe bu özelliklere sahip değildir.

Boole değerleri atlanabilir, boş bir dize olarak ayarlanabilir veya özelliğin adı olabilir. Ancak değerin true dizesine ayarlanması gerekmez. Geçersiz olsalar bile true, false ve 😀 dahil tüm değerler doğru olarak çözülür.

Bu üç etiket eşdeğerdir:

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

Özellik değeri yanlışsa özelliği atlayın. Özellik doğruysa özelliği ekleyin ancak değer sağlamaz. Örneğin, required="required" HTML'de geçerli bir değer değildir ancak required Boole olduğundan geçersiz değerler true olarak çözülür. Ancak geçersiz olarak listelenen özellikler her zaman eksik değerlerle aynı değere çözüm üretmediğinden, hangi özelliklerin boole olup olmadığını ve hangilerinin listelenmiş olduğunu hatırlamak ve geçersiz bir değer sağlamak yerine değerleri atlama alışkanlığı edinmek daha kolaydır.

Doğru ve yanlış arasında geçiş yaparken değeri değiştirmek yerine özelliği JavaScript ile birlikte ekleyin ve kaldırın.

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

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

Listelenen özellikler

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

Ancak boole özelliklerinin aksine, özelliğin atlanması özelliğin yanlış olduğu anlamına gelmez; eksik değeri olan mevcut bir özellik her zaman doğru değildir ve geçersiz değerler için varsayılan değer her zaman boş dizeyle aynı değildir. Örneğe devam edersek, contenteditable eksik veya geçersizse varsayılan olarak inherit olur ve açıkça false olarak ayarlanabilir.

Varsayılan değer, özelliğe bağlıdır. Boole değerlerinden farklı olarak, mevcut olan özellikler otomatik olarak "doğru" olmaz. <style contenteditable="false"> eklerseniz öğe düzenlenemez. Değer geçersizse (ör. <style contenteditable="😀"> veya şaşırtıcı bir şekilde <style contenteditable="contenteditable">) geçersiz olur ve varsayılan olarak inherit değerine ayarlanır.

Listelenen özelliklerde çoğu durumda eksik ve geçersiz değerler aynıdır. Örneğin, bir <input> öğesindeki type özelliği eksikse, mevcutsa ancak değeri yoksa veya 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 olup olmadığını, hangilerinin listelenmiş olduğunu bilmek önemlidir. Yanlış anlamamak için mümkünse değerleri atlayın ve gerektiğinde değeri arayın.

Genel özellikler

Genel özellikler, <head> içindeki öğeler de dahil olmak üzere herhangi bir HTML öğesinde ayarlanabilen özelliklerdir. 30'dan fazla genel özellik vardır. Bunların tümü teorik olarak herhangi bir HTML öğesine eklenebilir. Ancak bazı genel özellikler bazı öğelerde ayarlandığında hiçbir etkisi olmaz. Örneğin, meta içerik olarak <meta> üzerinde hidden ayarlandığında meta içerik gösterilmez.

id

id genel özelliği, bir öğe için benzersiz bir tanımlayıcı tanımlamak amacıyla kullanılır. Aşağıdakiler de dahil olmak üzere birçok amaca hizmet eder: - Bir bağlantının parça tanımlayıcısının hedefi. - Komut dosyası yazmak için bir öğeyi tanımlama. - Bir form öğesini etiketiyle ilişkilendirme. - Yardımcı teknolojiler için etiket veya açıklama sağlama. - CSS'de stil hedefleme (yüksek özgünlük veya özellik seçici olarak).

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

id, belgeye özgü olmalıdır. Bir id birden fazla kez kullanılsa bile sayfanızın düzeni muhtemelen bozulmaz ancak JavaScript'iniz, bağlantılarınız ve öğe etkileşimleriniz beklendiği gibi çalışmayabilir.

Gezinme çubuğu dört bağlantı içerir. Bağlantı öğesini daha sonra ele alacağız. Şimdilik bağlantıların HTTP tabanlı URL'lerle sınırlı olmadığını, mevcut belgedeki (veya diğer belgelerdeki) sayfanın bölümlerine ait parça tanımlayıcıları olabileceğini unutmayın.

Makine öğrenimi atölyesi sitesinde, sayfa başlığındaki gezinme çubuğu dört bağlantı içerir:

href özelliği, bağlantının etkinleştirilmesiyle kullanıcının yönlendirildiği köprü bağlantısını sağlar. Bir URL'de karma işareti (#) ve ardından bir karakter dizisi varsa bu dize bir kesit tanımlayıcısıdır. Bu dize, web sayfasındaki bir öğenin id ile eşleşirse parça, söz konusu öğeye bir ankraj veya yer işareti olur. Tarayıcı, ankrajın tanımlandığı noktaya gider.

Bu dört bağlantı, sayfamızın id özelliğine göre tanımlanan dört bölümünü gösterir. Kullanıcı gezinme çubuğundaki dört bağlantıdan herhangi birini tıkladığında, karma parçası tanımlayıcısıyla bağlantılı öğe (# hariç eşleşen kimliği içeren öğe) kaydırılarak görüntülenir.

Makine öğrenimi atölyesinin <main> içeriği, kimlikler içeren dört bölümden oluşur. Site ziyaretçisi <nav> içindeki bağlantılardan birini tıkladığında, söz konusu parça tanımlayıcısını içeren bölüm kaydırılarak görüntülenir. İşaretleme aşağıdakine 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ını karşılaştırdığınızda, her birinin <main>'daki bir <section> öğesinin id ile eşleştiğini göreceksiniz. Tarayıcı bize ücretsiz bir "sayfanın üst kısmı" bağlantısı verir. href="#top" değerini (büyük/küçük harf duyarlı değil) veya href="#" değerini ayarladığınızda kullanıcı sayfanın en üstüne kaydırılır.

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

CSS seçiciler

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

Senaryo Yazma

MLW.com'da yalnızca fare kullanıcıları için bir sürpriz vardır. Işık anahtarını tıkladığınızda sayfa açılır veya kapanır.

Işık anahtarı resminin işaretlemesi şu şekildedir: html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> id özelliği, getElementById() yönteminin parametresi olarak ve # ön ekiyle querySelector() ve querySelectorAll() yöntemlerinin parametresinin parçası olarak kullanılabilir.

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

Tek JavaScript işlevimiz, öğeleri id özelliklerine göre hedeflemek için bu özelliği kullanı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> öğesinin for özelliği, değeri olarak ilişkilendirildiği form denetiminin id değerini alır. Her form denetimine bir id ekleyerek ve her birini etiketin for özelliğiyle eşleyerek açık bir etiket oluşturmak, her form denetiminin ilişkili bir etikete sahip olmasını sağlar.

Her etiket tam olarak bir form kontrolüyle ilişkilendirilebilirken bir form kontrolünün birden fazla ilişkili etiketi olabilir.

Form kontrolü, <label> açılış ve kapanış etiketleri arasına yerleştirilmişse for ve id özellikleri gerekli değildir: Buna "dolaylı" etiket denir. Etiketler, tüm kullanıcıların her form kontrolünün ne işe yaradığını bilmesini sağlar.

<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 etiketin herhangi bir yerini tıklamak, ilişkili öğeye odaklanarak kontrolün tıklama alanını genişletir. Bu özellik, fare kullanmayı daha az doğru hale getiren el becerisi sorunları olan kullanıcılara yardımcı olmakla kalmaz, aynı zamanda radyo düğmesinden daha geniş parmakları olan her mobil cihaz kullanıcısına da yardımcı olur.

Bu kod örneğinde, sahte bir testin sahte beşinci sorusu tek seçimli çoktan seçmeli bir sorudur. Her form denetiminin, her biri için benzersiz bir id içeren açık bir etiketi vardır. Yanlışlıkla bir kimliği kopyalamamak için kimlik değeri, soru numarasının ve değerin bir kombinasyonudur.

Radyo düğmeleri dahil edilirken, etiketler radyo düğmelerinin değerini tanımladığından aynı ada sahip tüm düğmeleri bir <fieldset> içine alırız. <legend>, grubun tamamı için etiket veya soru olur.

Erişilebilirlik için diğer kullanım alanları

Erişilebilirlik ve kullanılabilirlik için id kullanımı etiketlerle sınırlı değildir. Metne giriş bölümünde, erişilebilir adı sağlamak için <section>'nin aria-labelledby değerine bir <h2> öğesinin id değeri olarak referans verilerek <section> bölge işaretine dönüştürülmüştür:

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

Erişilebilirliği sağlamak için kullanılabilecek 50'den fazla aria-* durumu ve özelliği vardır. aria-labelledby, aria-describedby, aria-details ve aria-owns, aralarında boşluk bulunan bir id referans listesi değerini alır. Şu anda odaklanan alt öğeyi tanımlayan aria-activedescendant, değeri olarak tek bir id referansı alır: Odaklanan tek öğenin referansı (bir seferde yalnızca bir öğeye odaklanılabilir).

class

class özelliği, öğeleri CSS (ve JavaScript) ile hedeflemenin ek bir yolunu 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 öğenin büyük/küçük harfe duyarlı sınıflarının boşlukla ayrılmış bir listesini alır.

Sağlam bir semantik yapı oluşturmak, öğelerin yerleşimlerine ve işlevlerine göre hedeflenmesini sağlar. Sağlam yapı, alt öğe seçicileri, ilişkisel seçiciler 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 nasıl stillendirilebileceğini göz önünde bulundurun. Sınıf özelliğini kullanmamanız gerektiğinden değil, çoğu geliştiricinin genellikle buna ihtiyacı olmadığının farkında olmadığından bahsediyoruz.

MLW şu ana kadar herhangi bir sınıf kullanmadı. Bir site tek bir sınıf adı olmadan başlatılabilir mi? Bakalım.

style

style özelliği, özelliğin ayarlandığı tek öğeye uygulanan satır içi stilleri uygulamayı sağlar. style özelliğinin değeri CSS mülk değeri çiftleridir. Değerin söz dizimi, CSS stil bloğunun içeriğiyle aynıdır: CSS'de olduğu gibi, mülklerin ardından iki nokta üst üste gelir ve her beyan, değerin ardından gelen noktalı virgüllerle sonlandırılır.

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 beyanları tarafından geçersiz kılınmadığı sürece alt öğeler, devralınan mülk değerlerini devralır. Değer, yalnızca söz konusu öğeye uygulanan tek bir stil bloğunun içeriğinin eşdeğerini içerdiğinden, oluşturulan içerik için, anahtar kare animasyon oluşturmak için veya başka herhangi bir at-kuralı uygulamak için kullanılamaz.

style gerçekten de global bir özellik olsa da kullanılması önerilmez. Bunun yerine, stilleri ayrı bir dosyada veya dosyalarda tanımlayın. Bununla birlikte, style özelliği, test amacıyla hızlı bir şekilde stil oluşturmak için geliştirme sırasında yararlı olabilir. Ardından "çözüm" stilini alıp bağlı CSS dosyanıza yapıştırın.

tabindex

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

tabindex özelliğinin değeri bir tam sayı olmalıdır. Negatif bir değer (-1 kullanılmasına karar verilmiştir), bir öğenin JavaScript gibi bir yöntemle odak alabilmesini sağlar ancak öğeyi Sekme tuşu sırasına eklemez. tabindex değeri 0 olan öğeler, kaynak kod sırasına göre sayfanın varsayılan sekme sırasına eklenerek sekme tuşuyla odaklanılabilir ve erişilebilir hale gelir. 1 veya daha yüksek bir değer, öğeyi öncelikli bir odak sırasına yerleştirir ve önerilmez.

Bu sayfada, <button> olarak işlev gören bir <share-action> özel öğesi kullanan bir paylaşım işlevi vardır. Özel öğeyi klavyenin varsayılan sekme sırasına eklemek için sıfır değerine sahip tabindex eklenir:

<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 öğesinin role özelliği, ekran okuyucu kullanıcılarına bu öğenin düğme gibi davranması gerektiğini bildirir. JavaScript, düğme işlevselliği vaadinin yerine getirilmesini sağlamak için kullanılır. Bu işlemler arasında hem tıklama hem de tuş basma etkinliklerinin yanı sıra Enter ve Boşluk tuşlarına basma işlemleri de yer alır.

Form denetimleri, bağlantılar, düğmeler ve düzenlenebilir içerik öğeleri odaklanmaya uygundur. Klavye kullanıcısı Sekme tuşuna bastığında, odaklanma tabindex="0" ayarlanmış gibi bir sonraki odaklanılabilir öğeye taşınır. Diğer öğeler varsayılan olarak odaklanılabilir değildir. Bu öğelere tabindex özelliğini eklemek, aksi takdirde odaklanmayacakları durumlarda odaklanmalarını sağlar.

Bir belgede tabindex değeri 1 veya daha fazla olan öğeler varsa bunlar ayrı bir sekme sırasına dahil edilir. Codepen'de fark edeceğiniz gibi, sekme tuşuna basıldığında değerler en düşükten en yükseğe doğru ayrı bir sırayla başlar ve ardından kaynak sıradaki normal sırayla devam eder.

Sekme sırasını değiştirmek gerçekten kötü bir kullanıcı deneyimine neden olabilir. Bu durum, içeriklerinizde gezinmek için yardımcı teknolojileri (klavyeler ve ekran okuyucular gibi) kullanmanızı zorlaştırır. Geliştirici olarak bu uygulamaları yönetmek ve sürdürmek de zordur. Odaklanma önemlidir. Odaklanma ve odaklanma sırası hakkında bir modül vardır.

role

role özelliği, WHATWG HTML spesifikasyonunun değil, ARIA spesifikasyonunun bir parçasıdır. role özelliği, içeriğe anlamsal anlam sağlamak için kullanılabilir. Bu sayede ekran okuyucular, site kullanıcılarını bir nesnenin beklenen kullanıcı etkileşimi hakkında bilgilendirebilir.

Kombinasyon kutuları, menü çubukları, sekme listeleri ve ağaç ızgaraları gibi yerel HTML eşdeğeri olmayan birkaç yaygın kullanıcı arayüzü widget'ı vardır. Örneğin, sekmeli bir tasarım kalıbı oluştururken tab, tablist ve tabpanel rolleri kullanılabilir. Kullanıcı arayüzünü fiziksel olarak görebilen bir kullanıcı, widget'ta nasıl gezinileceğini ve ilişkili sekmeleri tıklayarak farklı panelleri nasıl görünür hale getireceğini deneyimleyerek öğrenmiştir. Farklı panelleri göstermek için bir düğme grubu kullanıldığında tab rolünü <button role="tab"> ile birlikte dahil etmek, ekran okuyucu kullanıcısının şu anda odaktaki <button> öğesinin, tipik düğme benzeri işlevleri yerine ilgili bir paneli görüntüye alabileceğini bilmesini 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. <span> öğesine role="button" eklendiğinde öğe <button> haline gelmez. Bu nedenle, semantik HTML öğelerinin amaçlanan amaçlarına uygun şekilde kullanılması önerilir. Ancak doğru öğeyi kullanmak mümkün olmadığında role özelliği, anlamsal olmayan bir öğe anlamsal bir öğenin rolüne uyarlandığında ekran okuyucu kullanıcılarını bilgilendirmeyi sağlar.

contenteditable

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

Aşağıdaki üç açılış etiketi eşdeğerdir:

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

<style contenteditable="false"> eklerseniz öğe düzenlenemez (<textarea> gibi varsayılan olarak düzenlenebilir olmadığı sürece). Değer geçersizse (ör. <style contenteditable="😀"> veya <style contenteditable="contenteditable">) 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 true, false veya inherit olarak ayarlanarak da belirtilebilir.

Genel özellikler, <style> öğeleri dahil tüm öğelere uygulanabilir. Canlı CSS düzenleyici oluşturmak için özellikleri ve biraz CSS 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 değerini inherit dışında bir değere ayarlamayı deneyin. Ardından style seçicisini p seçicisiyle değiştirmeyi deneyin. Görüntülü mülkü kaldırmayın. Aksi takdirde stil bloğu kaybolur.

Özel özellikler

HTML genel özelliklerinin yalnızca yüzeyini ele aldık. Yalnızca bir veya sınırlı sayıda öğe için geçerli olan daha da fazla özellik vardır. Yüzlerce tanımlanmış özelliğe sahip olsanız bile spesifikasyonda bulunmayan bir özelliğe ihtiyacınız olabilir. HTML'de bu sorunu çözebilirsiniz.

data- ön ekini ekleyerek istediğiniz özel özelliği oluşturabilirsiniz. Özelliğinizi data- ile başlayan ve ardından xml ile başlamayan ve iki nokta işareti (:) içermeyen küçük harf karakterlerinden oluşan bir adla adlandırabilirsiniz.

HTML, data ile başlamayan ve desteklenmeyen özellikler oluşturursanız veya özel özelliğinizi xml ile başlatır ya da : eklerseniz bile hata oluşturmaz. Bununla birlikte, data- ile başlayan geçerli özel özellikler oluşturmanın avantajları vardır. Özel veri özellikleri sayesinde, yanlışlıkla mevcut bir özellik adını kullanmadığınızdan emin olabilirsiniz. Özel veri özellikleri geleceğe hazırdır.

Tarayıcılar, belirli bir data- ön ekiyle başlayan özellik için varsayılan davranışları uygulamaz ancak özel özellikleriniz arasında iterasyon yapmak için yerleşik bir veri kümesi API'si vardır. Özel mülkler, JavaScript aracılığıyla uygulamaya özgü bilgileri iletmenin mükemmel bir yoludur. Öğelere data-name biçiminde özel özellikler ekleyin ve söz konusu öğede dataset[name] kullanarak bu özelliklere DOM üzerinden 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>

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

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

dataset mülkü, her öğenin data- özelliklerini içeren bir DOMStringMap nesnesi döndürür. <blockquote> üzerinde çeşitli özel özellikler vardır. Veri kümesi mülkü, bu özel özelliklerin 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. Yani herhangi bir HTML öğesine uygulanabilirler (ancak bunların tümü bu öğeler üzerinde bir etkiye sahip değildir). Ardından, bağlantıları daha ayrıntılı bir şekilde incelerken giriş resmindeki ele almadığımız iki özelliğe (target ve href) ve öğeye özgü diğer bazı özelliklere göz atacağız.

Öğrendiklerinizi test etme

Özelliklerle ilgili bilginizi test edin.

id, dokümanda benzersiz olmalıdır.

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

Doğru şekilde oluşturulmuş özel özelliği seçin.

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