HTML & Shadow DOM ile Nasıl Kullanılır
HTML Yuvası W3C tarafından üretilen en dikkat çekici standartlardan biridir. Bunu, adı verilen etkileyici başka bir W3C standardıyla birleştirin. şablonları, ve çalışmak için harika bir fikriniz var. Yapabilmek HTML elemanları oluştur ve ekle bir sayfaya JavaScript kullanarak gerekli ve önemli bir görevdir.
Bir kod snippet'inin kullanılması gerektiğinde faydalıdır sadece belirli zamanlarda görünür, veya benzer şekilde yapılandırılmış yüzlerce HTML öğesi yazmak istemediğinizde işlemi otomatikleştir.
JavaScript’te HTML öğeleri oluşturmak çok arzu edilmeyen. Tüm etiketleri içerip içermediğinizi kontrol etmek ve yeniden kontrol etmek zorunda kalmak, onları doğru sıraya koymak zor bir iştir. çok yazması ve takip etmesi gereken çok şey var. Bu kargaşa, ancak, bir çözüm buldum ne zaman etiketi belirdi. Bir şey olması gerekiyorsa sayfaya dinamik olarak eklendi, içine koyabilirsiniz
eleman.
Bu yazıda, nasıl kullanabileceğinizi size göstereceğim
ve JavaScript’le birlikte küçük bir HTML tablosu fabrikası yarat yüzlerce benzer tablo oluşturabilir ve doldurabilir.
ve
etiketler
etiketi, tarayıcılar tarafından oluşturulmayacak JavaScript'i kullanarak belgeye doğru şekilde ekleninceye kadar.
etiket bir Shadow DOM'a eklediğiniz yer tutucu hangi içeriğinden yapılabilir eleman.
bir Gölge DOM normal bir DOM'a benzer (HTML'den ayrıştırılan belge modeli). O kapsamlı bir ağaç oluşturur (bir Gölge DOM ağacı) olan kendi kökü ve ayrıca bir kendi tarzı.
Shadow DOM ağacını ana belgedeki bir öğeye eklediğinizde - öğeye daha sonra gölge ev sahibi -, gölge ana bilgisayarın tüm alt öğeleri ile işaretlenmiştir. yarık
özellik (yukarıda belirtilenlerle aynı değil)
tag) olacak yeni eklenen alt ağaçta yer almak.
Gölge DOM, bu makalenin yazıldığı tarih itibariyle (Temmuz 2017) yalnızca WebKit ve Blink tabanlı tarayıcılarda desteklenir ancak CanIUse’daki tarayıcı desteğinin gerçek durumunu istediğiniz zaman kontrol edebilirsiniz..
HTML’yi ayarlama
Hala kafa karıştırıcı? Hadi başlayalım bazı kodları görelim. eleman.
içeride Şablonun içinde, Ben de ekledim bazı temel stiller Tablo için Şablonun dışında, iki tane Her Şu anda, sayfada görebildiğiniz tek şey, açıklıklarda bulunan metin dizeleridir, bu yüzden biraz JavaScript eklememiz gerekir.. Javascript kullanarak, tabloyu şablonun içinden her iki div'e de yerleştiririz Shadow DOM ağacı olarak. Yerleştirildikten sonra, açıklıklar tablonun içindeki kendi yuvalarına yerleştirilir ve istenen sütun başlıklarını veya hücre değerlerini görüntüler. Sonuç olacak iki otomatik oluşturulan tablo aynı şablonu kullananlar. Öncelikle, Shadow DOM'nin kullanıcının tarayıcısında desteklenip desteklenmediğini kontrol etmemiz gerekir. Adlı özel bir değişken yaratıyoruz İçinde Var iki Sonra biz şablon içeriğinin bir kopyasını ekle kullanarak Gölge DOM ağacına Ve dinamik HTML tablolarımız hazır, çıktı Chrome'da nasıl görünüyor:, orada bir
iyi plan olarak kullanmak için bazı tablolar oluşturmak bu bir belgeye eklenecektir. Var
Tablo hücrelerinin içindeki elementler ( ve ) yer tutucu olarak hareket etmek sütun başlıkları ve hücre değerleri için. Her yuvanın kendine özgü isim
atfet tanımlar.
etiket.
, iki ayrı tablo için sayfaya eklemek istiyoruz.
elemanın bir
yarık
hangi değerin niteliği eşit isim
değer karşılık gelen
içinde etiketi .
Shadow DOM ağacını ekleme
attachShadow ()
yöntem Shadow DOM ağacını bir öğeye ekler ve o Gölge DOM ağacının kök düğümünü döndürür. Eğer
Aşağıdaki koddaki koşul, tarayıcının bu yöntemi sayfadaki divlerin olup olmadığını test ederek destekleyip desteklemediğini kontrol eder. attachShadow
yöntem. // Shadow DOM'un desteklenip desteklenmediğini kontrol edin eğer ((document.createElement ('div') 'attachShadow')) else konsol.warn ('attachShadow desteklenmiyor');
templateContent
o referans olarak görev yapar şablonun içeriğine. if (document.createElement ('div') 'attachShadow')) let templateContent = document.querySelector ('template'). content; divs = document.querySelectorAll ('div'); divs.forEach (function (div) // inside loop); else console.warn ('attachShadow desteklenmiyor');
her biri için
döngü, bir Gölge DOM ağacı her div'e bağlı (div.attachShadow (mode: 'açık')
).kip
seçenekleri için attachShadow
: açık
ve kapalı
. Eğer kapalı
Shadow DOM ağacının kök düğümü seçildi erişilmez olur dış DOM öğelerine ve nesnelerine.templateContent.cloneNode (doğru)
yöntem. if (document.createElement ('div') 'attachShadow')) let templateContent = document.querySelector ('template'). content; divs = document.querySelectorAll ('div'); divs.forEach (function (div) div.attachShadow (mode: 'open'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow desteklenmiyor');