Kako uporabljati HTML & Z DOM-om Shadow
Slot HTML je eden najbolj opaznih standardov, ki jih je izdelal W3C. Združite to z drugim impresivnim standardom W3C predloge, in imaš čudovito pripravo za delo. Sposobnost ustvarite in dodajte elemente HTML na stran z uporabo JavaScripta je nujna in pomembna naloga.
To je uporabno, kadar mora odrezek kode pojavijo le ob določenem času, ali če ne želite natipkati na stotine strukturiranih elementov HTML, ampak želite avtomatizirajte proces.
Ustvarjanje elementov HTML v JavaScriptu je ni tako zaželeno. Če ste pokrili vse oznake, jih postavili v pravi vrstni red, vse skupaj je težava, da preverite in ponovno preverite. tudi veliko za tipkanje in sledenje. Toda ta pretres, dobil rešitev ko se je pojavila oznaka. Če mora nekaj biti dinamično dodana na stran, lahko ga postavite v notranjost
element.
V tem sporočilu vam bom pokazal, kako lahko uporabite
in s JavaScriptom ustvarite tovarno mini HTML tabel ki lahko ustvarijo in naselijo na stotine podobnih tabel.
The
in
oznake
The oznaka drži kodo HTML brskalnikov ne bo prikazalo dokler ni pravilno dodana v dokument z uporabo JavaScripta. The
je oznaka a ogrado, ki jo dodate domeni Shadow DOM ki jih je mogoče sestaviti iz vsebine. \ t element.
A Shadow DOM je podoben običajnemu DOM (model dokumenta razčlenjen iz HTML-ja). To ustvari obrobno drevo (drevo Shadow DOM), ki ima a lastnega korena in imajo lahko tudi lasten slog.
Ko vstavite drevo Shadow DOM v element v glavnem dokumentu - bo element pozvan gostiteljica senc -, vsi podrejeni elementi gostiteljske sence, ki so označeni z reža
atribut (ni isti kot prej omenjeni
tag) bo na novo vstavljeno poddrevo.
Shadow DOM, od pisanja tega članka (julij 2017), je podpira samo v brskalnikih, ki temeljijo na WebKit in Blink vendar lahko kadar koli preverite dejansko stanje podpore brskalnika na CanIUse.
Nastavitev HTML-ja
Še vedno zmedeno? Poglejmo nekaj kode, ki se začne z element.
Inside V predlogi, Dodal sem tudi nekaj osnovnih slogov za tabelo z uporabo Zunaj predloge, obstajata dve Vsak Trenutno lahko vse, kar vidite na strani, so besedilni nizi, ki jih vsebujejo razponi, zato moramo dodati tudi nekaj JavaScripta.. Z uporabo Javascripta vstavimo tabelo iz predloge v obe div kot drevo Shadow DOM. Po vstavitvi se razponi postavijo v svoje reže znotraj tabele in prikažejo želene naslove stolpcev ali vrednosti celic. Rezultat bo dve samodejno ustvarjeni tabeli ki uporabljajo isto predlogo. Najprej moramo preveriti, ali je Shadow DOM podprt v brskalniku uporabnika. The Ustvarjamo spremenljivko po meri V notranjosti Obstajajo dva Potem, mi dodajte kopijo vsebine predloge v drevo Shadow DOM z uporabo Naše dinamične tabele HTML so pripravljene, zato je prikazan rezultat v Chromu:, tam je
bomo uporabo kot načrt za ustvarjanje nekaterih tabel ki bodo dodani dokumentu. Obstajajo
elementi znotraj celic tabele ( in ) delujejo kot ograde za naslove stolpcev in vrednosti celic. Vsako mesto ima edinstveno ime
to pripisujejo identificira.
oznaka.
, za dve ločeni tabeli, ki ju želimo dodati na stran.
element ima a
reža
atribut, katerega vrednost je enaka. \ t ime
vrednost ustreznega
oznako znotraj .
Pritrditev drevesa Shadow DOM
attachShadow ()
metodo povezuje drevo Shadow DOM z elementom in vrne korensko vozlišče tega drevesa Shadow DOM. The če
pogoj v spodnji kodi preveri, ali brskalnik podpira to metodo s testiranjem, če imajo deli na strani attachShadow
metodo. // preverite, ali je Shadow DOM podprt, če ('attachShadow' v document.createElement ('div')) else console.warn ('attachShadow ni podprt');
templateContent
to služi kot referenca vsebino predloge. if ('attachShadow' v document.createElement ('div')) naj templateContent = document.querySelector ('template'). vsebina; naj divs = document.querySelectorAll ('div'); divs.forEach (funkcija (div) // znotraj zanke); else console.warn ('attachShadow ni podprt');
za vsakogar
zanke, drevo Shadow DOM je na vsak del (div.attachShadow (način: 'odprto')
).način
opcije za attachShadow
: odprto
in zaprto
. Če zaprto
je bilo izbrano korensko vozlišče drevesa Shadow DOM postala nedostopna do zunanjih elementov in objektov DOM.templateContent.cloneNode (true)
metodo. if ('attachShadow' v document.createElement ('div')) naj templateContent = document.querySelector ('template'). vsebina; naj divs = document.querySelectorAll ('div'); divs.forEach (funkcija (div)) div.attachShadow (način: 'odprto'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow ni podprt');