Kā izmantot HTML & ar ēnu DOM
HTML slots ir viens no ievērojamākajiem W3C standartiem. Apvienojiet to ar citu iespaidīgu W3C standartu veidnes, un jums ir pasakains izdomājums, lai strādātu. Spēja izveidot un pievienot HTML elementus uz lapu izmantojot JavaScript ir svarīgs un svarīgs uzdevums.
Tas ir noderīgi, ja ir nepieciešams koda fragments parādās tikai noteiktos laikos, vai, ja nevēlaties ierakstīt simtiem līdzīgi strukturētu HTML elementu, bet vēlaties automatizēt procesu.
HTML elementu izveide JavaScript ir nav tik vēlama. Jums ir jāpārbauda un jāpārbauda, vai esat aptvēris visus tagus, ievietojuši tos pareizā secībā, un kopumā ir vienkārši arī daudz rakstīt un sekot līdzi. Tomēr šis satricinājums, ieguva risinājumu kad parādījās atzīme. Ja kaut kas ir nepieciešams dinamiski pievienota lapai, jūs varat to ievietot
elementu.
Šajā ziņojumā es jums parādīšu, kā jūs varat izmantot
un tagi kopā ar JavaScript izveidojiet mini HTML tabulas rūpnīcu kas var radīt un aizpildīt simtiem līdzīgu tabulu.
The
un
tagus
The tagam ir HTML kods pārlūkprogrammas netiks sniegtas līdz tas ir pareizi pievienots dokumentam, izmantojot JavaScript. The
tag ir a vietas rezervētājs, ko pievienojat ēnu DOM ko var izdarīt no satura elementu.
A Ēnu DOM ir līdzīgs regulārajam DOM (dokumenta modelis, kas tiek analizēts no HTML). Tā izveido ierobežotu koku (ēnu DOM koks), kuram ir a saknes un var būt arī stilu.
Kad jūs ievietojat ēnu DOM koku galvenajā dokumentā, tad elements tiks saukts par ēnu saimnieks -, visi ēnu saimnieka bērna elementi, kas ir atzīmēti ar slots
atribūts (nav tas pats, kas minēts iepriekš
tag) būs ieņem vietu jaunieviestajā apakšgrupā.
Ēnu DOM, rakstot šo rakstu (2017. gada jūlijs), ir atbalsta tikai WebKit un Blink pārlūkprogrammās bet jebkurā laikā varat pārbaudīt pārlūkprogrammas atbalsta faktisko stāvokli CanIUse.
HTML iestatīšana
Joprojām ir mulsinoši? Apskatīsim kādu kodu, sākot ar elementu.
Iekšpusē Šablona iekšpusē, Esmu arī pievienojis daži pamata stili tabulai, izmantojot Ārpus veidnes, ir divi Katrs Tieši tagad, viss, ko varat redzēt lapā, ir teksta virknes, kas ietvertas laidumos, tāpēc mums ir jāpievieno arī JavaScript. Izmantojot Javascript, mēs ievietojam tabulu no veidnes iekšpuses abos divos kā ēnu DOM koks. Pēc ievietošanas spans tiek ievietots to attiecīgajās slotā tabulas iekšpusē un parādīti vēlamie kolonnu nosaukumi vai šūnu vērtības. Rezultāts būs divas automātiskas tabulas kas izmanto to pašu veidni. Pirmkārt, mums jāpārbauda, vai lietotāja pārlūkprogrammā tiek atbalstīts ēnu DOM. The Mēs izveidojam pielāgotu mainīgo sauc Iekšpusē Tur ir divi Tad mēs pievienojiet veidnes satura kopiju uz Shadow DOM koku, izmantojot Un mūsu dinamiskās HTML tabulas ir gatavas, šeit ir redzams, kā izeja izskatās Chrome:, tur ir
mēs izmantot kā projektu par izveidojot dažas tabulas tas tiks pievienots dokumentam. Tur ir
elementi galda elementu iekšpusē ( un ) darbojas kā vietturi kolonnu nosaukumiem un šūnu vērtībām. Katrai slotā ir unikāls nosaukums
atribūtu to identificē to.
tag.
, par divām atsevišķām tabulām, kuras mēs vēlamies pievienot lapai.
elementam ir a
slots
atribūts, kura vērtība ir vienāds ar nosaukums
vērtību to atbilstošo
iekšpusē .
Ēnu DOM koka pievienošana
AttShadow ()
metodi pievieno elementam Shadow DOM koku un atgriež šī Shadow DOM koka saknes mezglu. The ja
zemāk redzamajā kodā esošais nosacījums pārbauda, vai pārlūkprogramma atbalsta šo metodi, pārbaudot, vai lapas divs ir attachShadow
metodi. // pārbaudiet, vai Shadow DOM tiek atbalstīts, ja ('attachShadow' in document.createElement ('div')) else console.warn ('attachShadow nav atbalstīts');
templateContent
to kalpo kā atsauce veidnes saturu. ja ('attachShadow' in document.createElement ('div')) let templateContent = document.querySelector ("veidne"). let divs = document.querySelectorAll ('div'); divs.forEach (funkcija (div) // iekšpuses cilpa); else console.warn ('attachShadow nav atbalstīts');
katram
cilpa, Shadow DOM koks pievienots katram div (div.attachShadow (mode: 'open')
).režīmā
iespējas par attachShadow
: atvērts
un slēgts
. Ja slēgts
tika izvēlēts Shadow DOM koka saknes mezgls kļūtu nepieejama ārpus DOM elementiem un objektiem.templateContent.cloneNode (true)
metodi. ja ('attachShadow' in document.createElement ('div')) let templateContent = document.querySelector ("veidne"). let divs = document.querySelectorAll ('div'); divs.forEach (funkcija (div) div.attachShadow (mode: 'open'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow nav atbalstīts');