HTML & -sovelluksen käyttäminen Shadow DOM -toiminnolla
HTML-paikka on yksi W3C: n merkittävimmistä standardeista. Yhdistä se toiseen vaikuttavaan W3C-standardiin malleja, ja sinulla on upea keittäminen työskennellä. Kykenevä luoda ja lisätä HTML-elementtejä sivulle JavaScriptin avulla on tärkeä ja tärkeä tehtävä.
Se on hyödyllinen, kun koodinpätkä on näkyvät vain tiettyinä aikoina, tai kun et halua kirjoittaa satoja samankaltaisia strukturoituja HTML-elementtejä, mutta haluat automatisoi prosessi.
HTML-elementtien luominen JavaScriptissä on ei ole niin toivottavaa. On vaikea tarkistaa ja tarkistaa, onko olet katsonut kaikki tunnisteet, asettanut ne oikeaan järjestykseen, kaiken kaikkiaan on vain liian paljon kirjoittaa ja seurata. Tämä epävarmuus kuitenkin, sai ratkaisun kun tunniste ilmestyi. Jos jotain on lisätty sivulle dynaamisesti, voit laittaa sen sisälle
elementti.
Tässä viestissä näytän sinulle, miten voit käyttää
ja tunnisteet yhdessä JavaScriptin kanssa luo mini-HTML-taulukon tehdas joka voi luoda ja täyttää satoja vastaavia taulukoita.
ja
tunnisteet
tunnisteella on HTML-koodi selaimet eivät näy kunnes se on lisätty oikein dokumenttiin JavaScriptin avulla.
tunniste on a paikanvaraajan, jonka lisäät Shadow DOMiin jotka voidaan tehdä sisällön sisällöstä elementti.
Shadow DOM on samanlainen kuin tavallinen DOM (HTML-tiedostosta jäsennetty asiakirjamalli). Se luo katkaistu puu (Shadow DOM -puu), jolla on a juuri oman juurensa ja voi myös olla tyyli.
Kun asetat Shadow DOM -puun pääasiakirjan elementtiin - elementti kutsutaan sitten varjo-isäntä -, kaikki varjo-isännän lapsielementit, jotka on merkitty aukko
määrite (ei sama kuin edellä mainittu
tag) ottamaan paikkansa äskettäin lisättyyn alaryhmään.
Shadow DOM on kirjoittanut tämän artikkelin (heinäkuu 2017) tuettu vain WebKit- ja Blink-pohjaisissa selaimissa mutta voit tarkistaa CanIUseen selaimen tuen todellisen tilan milloin tahansa.
HTML-koodin määrittäminen
Vielä sekava? Katsotaanpa koodia, alkaen elementti.
Sisällä Mallin sisällä, Olen myös lisännyt joitakin perusasioita käyttämällä taulukkoa Mallin ulkopuolella, on kaksi kukin Juuri tällä hetkellä kaikki sivulla näkyvät tekstirivit sisältyvät, joten meidän on lisättävä myös JavaScript.. Javascriptin avulla asetamme taulukon mallipohjasta molempiin diveihin varjo-DOM-puuna. Lisäyksen jälkeen ulokkeet sijoitetaan niiden vastaaviin aikaväleihin taulukon sisällä ja näyttävät halutut sarakkeen otsikot tai solujen arvot. Tulos on kaksi automaattista taulukkoa jotka käyttävät samaa mallia. Ensinnäkin meidän on tarkistettava, tukeeko Shadow DOM käyttäjän selaimessa. Luomme mukautetun muuttujan, jota kutsutaan Sisällä On kaksi Sitten me lisää kopio mallin sisällöstä Shadow DOM -puuhun käyttämällä Ja dynaamiset HTML-taulukot ovat valmiita, kuten tulostus näyttää Chromeen:, siellä
hyvin käyttää suunnitelmana varten luoda joitakin taulukoita se lisätään asiakirjaan. On
taulukon solujen sisällä olevat elementit ( ja ) toimimaan paikanvaraajina sarakkeiden otsikot ja solujen arvot. Jokaisella aikavälillä on ainutlaatuinen nimi
määritä se tunnistaa sen.
tag.
, kaksi erillistä taulukkoa, jotka haluamme lisätä sivulle.
elementissä on a
aukko
ominaisuus, jonka arvo on yhtä suuri kuin nimi
arvo niiden vastaavista
tunniste sisällä .
Varjojen DOM-puun kiinnittäminen
attachShadow ()
menetelmä kiinnittää Shadow DOM -puun elementtiin ja palauttaa kyseisen varjo-DOM-puun juurisolmun. jos
Alla olevassa koodissa oleva ehto tarkistaa, tukeeko selain tätä menetelmää testaamalla, onko sivulla olevat divit attachShadow
menetelmä. // tarkista, onko Shadow DOM -toimintoa tuettu, jos ('attachShadow' in document.createElement ('div')) else console.warn ('attachShadow ei tueta');
templateContent
että toimii viitteenä mallin sisältöön. if ('attachShadow' in document.createElement ('div')) let templateContent = document.querySelector ("malli"). anna divs = document.querySelectorAll ('div'); divs.forEach (toiminto (div) // sisäsilmukka); else console.warn ('attachShadow ei tuettu');
jokaiselle
silmukka, Shadow DOM-puu on kullekin div (div.attachShadow (mode: 'open')
).tila
vaihtoehtoja varten attachShadow
: avata
ja suljettu
. Jos suljettu
valittiin Shadow DOM -puun juurisolmu ei olisi saavutettavissa DOM-elementtien ja -objektien ulkopuolelle.templateContent.cloneNode (tosi)
menetelmä. if ('attachShadow' in document.createElement ('div')) let templateContent = document.querySelector ("malli"). anna divs = document.querySelectorAll ('div'); divs.forEach (toiminto (div) div.attachShadow (mode: 'open'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow ei tuettu');