Jak používat HTML & Se Stínem DOM
HTML slot je jedním z nejpozoruhodnějších standardů W3C. Zkombinujte to s dalším působivým standardem W3C šablon, a máte skvělou směs na práci. Být schopen vytvářet a přidávat elementy HTML na stránku pomocí JavaScriptu je nezbytným a důležitým úkolem.
Je to užitečné, když musí mít zlomek kódu pouze v určitých časech, nebo když nechcete psát stovky podobně strukturovaných HTML prvků, ale chcete automatizovat proces.
Vytváření HTML prvků v JavaScriptu je není tak žádoucí. Je to hádka muset zkontrolovat a znovu zkontrolovat, pokud jste se vztahuje na všechny značky, umístil je ve správném pořadí, vše ve všech, je jen také hodně psát a sledovat. Tento zmatek však, dostal řešení když se objevila značka. Jestli něco musí být dynamicky přidán na stránku, můžete ji umístit dovnitř
živel.
V tomto příspěvku vám ukážu, jak můžete používat
a značky spolu s JavaScriptem vytvořit mini HTML tabulku továrny které mohou vytvářet a naplňovat stovky podobných tabulek.
a
tagy
tag obsahuje kód HTML prohlížeče nebudou vykresleny dokud není správně přidán do dokumentu pomocí JavaScriptu.
značka je zástupný symbol, který přidáte do stínového DOM které mohou být obsaženy v obsahu. \ t živel.
A Stín DOM je podobný pravidelnému DOM (model dokumentu analyzovaný z HTML). To vytvoří rozčleněný strom (Stín DOM stromu), který má a vlastní a může mít také vlastní styl.
Když vložíte strom Stín DOM do elementu v hlavním dokumentu - prvek se pak nazývá stín hostitele -, všechny podřízené prvky hostitele stínů, které jsou označeny slot
atributu (není to stejné jako výše uvedené
tag) bude místo v nově vloženém podstromu.
Stín DOM, jak psát tento článek (červenec 2017), jsou podporovány pouze v prohlížečích založených na WebKit a Blink Můžete si však kdykoliv zkontrolovat aktuální stav podpory prohlížeče v programu CanIUse.
Nastavení HTML
Stále matoucí? Podívejme se na nějaký kód, počínaje živel.
Uvnitř Uvnitř šablony, Také jsem přidal některé základní styly pro tabulku pomocí Mimo šablonu, existují dva Každý Vše, co můžete na stránce vidět, jsou textové řetězce obsažené v rozpětí, takže musíme také přidat JavaScript.. Pomocí Javascriptu vložíme tabulku zevnitř šablony do obou divs jako strom Stín DOM. Po vložení se rozpěry dostanou do příslušných drážek uvnitř tabulky a zobrazí požadované názvy sloupců nebo hodnoty buněk. Výsledkem bude dvě automaticky generované tabulky které používají stejnou šablonu. Nejprve musíme zkontrolovat, zda je v prohlížeči prohlížeče podporován stínový DOM. Vytvoříme vlastní proměnnou nazvanou Uvnitř Existují dva Potom jsme přidat kopii obsahu šablony do stromu Stín DOM pomocí Naše dynamické tabulky HTML jsou připraveny, jak vypadá výstup v prohlížeči Chrome:, je tu
dobře použít jako plán pro vytváření některých tabulek který bude přidán do dokumentu. Existují
prvky uvnitř buněk tabulky ( a ) zastupující osoby pro názvy sloupců a hodnoty buněk. Každý slot má jedinečný název
atribut identifikuje.
štítek.
, pro dvě samostatné tabulky, které chceme přidat na stránku.
prvek má a
slot
atribut, jehož hodnota je rovna název
hodnota odpovídajících
tag uvnitř .
Připojení stromu Stín DOM
attachShadow ()
metoda připojí prvek Stín DOM k prvku a vrátí kořen tohoto stromu Stín DOM. -li
podmínka v kódu níže kontroluje, zda prohlížeč podporuje tuto metodu testováním, zda divs na stránce má attachShadow
metoda. // zkontrolujte, zda je podporován stínový DOM ('attachShadow' v document.createElement ('div')) else console.warn ('attachShadow není podporován');
obsahObsah
že slouží jako reference obsahu šablony. if ('attachShadow' v document.createElement ('div')) let templateContent = document.querySelector ('template'). let divs = document.querySelectorAll ('div'); divs.forEach (funkce (div) // uvnitř smyčky); else console.warn ('attachShadow není podporován');
pro každého
smyčka, Stín DOM strom je připojené ke každému div (div.attachShadow (mode: 'open')
).režimu
možností pro attachShadow
: otevřeno
a Zavřeno
. Li Zavřeno
byl vybrán kořen stromu Stín DOM by se stal nedostupným k vnějším prvkům DOM a objektům.templateContent.cloneNode (true)
metoda. if ('attachShadow' v document.createElement ('div')) let templateContent = document.querySelector ('template'). let divs = document.querySelectorAll ('div'); divs.forEach (function (div) div.attachShadow (mode: 'open'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow není podporován');