Kako koristiti HTML & s DOM-om sjena
HTML utor je jedan od najznačajnijih standarda koje je izradio W3C. Kombinirajte to s još jednim impresivnim W3C standardom predlošci, i imate nevjerojatnu izmišljotinu za rad. Biti u stanju stvoriti i dodati HTML elemente na stranicu pomoću JavaScripta je nužan i važan zadatak.
Korisno je kada isječak koda mora pojavljuju se samo u određeno vrijeme, ili kada ne želite tipkati stotine slično strukturiranih HTML elemenata, ali to želite automatizirati proces.
Izrada HTML elemenata u JavaScriptu je nije tako poželjno. To je gnjavaža da morate provjeriti i ponovno provjeriti jeste li pokrili sve oznake, stavili ih u pravilan redoslijed, sve u svemu, postoji samo isto mnogo za pisanje i praćenje. Ovaj previranja, međutim, dobio rješenje kada pojavila se oznaka. Ako nešto mora biti dodan na stranicu dinamički, možete ga staviti u
element.
U ovom postu pokazat ću vam kako možete koristiti
i zajedno s JavaScriptom stvorite mini HTML tvornicu tablice koji mogu stvoriti i popuniti stotine sličnih tablica.
i
oznake
oznaka sadrži HTML kod koji preglednici neće prikazati dok se ispravno ne doda u dokument pomoću JavaScripta.
oznaka je rezerviranog mjesta koje dodajete domeni Shadow što se može napraviti od sadržaja element.
Shadow DOM sličan je uobičajenom DOM-u (model dokumenta raščlanjen iz HTML-a). To stvara stablo s opsegom (drvo Shadow DOM), koje ima a vlastiti korijen i mogu također imati a vlastiti stil.
Kada umetnete drvo Shadow DOM u element u glavnom dokumentu - element će se tada zvati shadow host -, svi podređeni elementi hosta sjene koji su označeni oznakom prorez
atribut (nije isti kao gore spomenuti
oznaka) zauzeti svoje mjesto u novo umetnutom podstablu.
The Shadow DOM, od pisanja ovog članka (srpanj 2017.), jesu podržava samo WebKit i Blink preglednike ali u svakom trenutku možete provjeriti stvarno stanje podrške preglednika na CanIUse.
Postavljanje HTML-a
Još uvijek zbunjujuće? Pogledajmo neki kod, počevši od element.
U Unutar predloška, Također sam dodao neke osnovne stilove za stol, koristeći Izvan predloška, postoje dva Svaki Upravo sada, sve što možete vidjeti na stranici su tekstualni nizovi sadržani u rasponima, pa moramo dodati i neki JavaScript. Koristeći Javascript, umetamo tablicu iz predloška u oba dijela kao drvo Shadow DOM-a. Nakon umetanja, rasponi se smještaju u njihove odgovarajuće utore unutar tablice i prikazuju željene naslove stupaca ili vrijednosti ćelija. Rezultat će biti dvije automatski generirane tablice koji koriste isti predložak. Prvo, moramo provjeriti podržava li Shadow DOM u korisnikovom pregledniku. Izrađujemo prilagođenu varijablu pod nazivom Unutar Tamo su dva Onda, mi dodajte kopiju sadržaja predloška u drvo Shadow DOM pomoću A naše dinamične HTML tablice su spremne, evo kako izgleda izlaz u Chromeu:, tamo je
dobro koristiti kao nacrt za stvaranje nekih tablica koji će biti dodan u dokument. Tamo su
elementi unutar ćelija tablice ( i ) djeluju kao rezervirana mjesta za naslove stupaca i vrijednosti ćelija. Svaki utor ima jedinstvenu Ime
to pripisuju identificira.
označiti.
, za dvije odvojene tablice koje želimo dodati na stranicu.
element ima
prorez
atribut čija je vrijednost jednaka Ime
vrijednost njihovog odgovarajućeg
unutar oznake .
Pričvršćivanje stabla Shadow DOM
attachShadow ()
način povezuje drvo Shadow DOM-a s elementom i vraća korijenski čvor tog stabla Shadow DOM. ako
uvjet u donjem kodu provjerava podržava li preglednik ovu metodu testiranjem ako divovi na stranici imaju attachShadow
način. // provjerava je li podržan Shadow DOM ako ('attachShadow' u document.createElement ('div')) else console.warn ('attachShadow nije podržan');
templateContent
da služi kao referenca na sadržaj predloška. if ('attachShadow' u document.createElement ('div')) neka templateContent = document.querySelector ('template'). sadržaj; neka divs = document.querySelectorAll ('div'); divs.forEach (funkcija (div) // unutar petlje); else console.warn ('attachShadow nije podržan');
za svakoga
petlje, drvo Shadow DOM je pričvršćeno na svaki div (div.attachShadow (način: 'otvoren')
).način
opcije za attachShadow
: otvorena
i zatvoreno
. Ako zatvoreno
odabran je korijenski čvor stabla Shadow DOM će postati nedostupan izvan DOM elemenata i objekata.templateContent.cloneNode (istina)
način. if ('attachShadow' u document.createElement ('div')) neka templateContent = document.querySelector ('template'). sadržaj; neka divs = document.querySelectorAll ('div'); divs.forEach (funkcija (div) div.attachShadow (način: 'otvoren'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow nije podržan');