[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvardin yliopisto]
[Tämä on CS50.] [CS50.TV]
Tässä video aiomme katsomaan DOM.
Kun selain lataa verkkosivun, se on edustettuna muistiin jotenkin.
Document Object Model, tai DOM,
kuvataan, miten selaimen edustaa verkkosivun muistiin.
Tässä video, me katsomaan DOM yhteydessä JavaScript,
mutta DOM on kielestä riippumaton käsite.
Esimerkiksi PHP on oma DOM täytäntöönpanoa samoin.
Kuitenkin DOM on usein käytetty JavaScript-
koska JavaScript voimme muuttaa sisältöä verkkosivun lennossa,
ja DOM pystymme käyttämään osia verkkosivun.
Katsotaanpa katsomaan esimerkiksi verkkosivu.
Okei, nyt katsotaanpa miten tämä sivu on edustettuna DOM.
Ja jokainen puu tarvitsee juurisolmu yläreunassa.
Tämän asiakirjan HTML-elementti on juurisolmua
koska se on ensimmäinen osa, joka näkyy.
Katsotaanpa lisätä juurisolmu meidän puu.
Katsotaanpa katsomaan HTML asiakirja uudelleen.
Huomaa, että body on sisäkkäin HTML-tunnisteen.
Tämä tarkoittaa sitä, että kehon osa on lapsi HTML-elementti.
Voimme edustaa tätä meidän DOM puuhun elin lehtiä
laskeutuvan HTML.
Tehdään se.
Meillä on kehon alla HTML.
Nyt voimme nähdä, että runko on 2 lasta omaa,
h1 elementti ja ul elementti.
Tämä tarkoittaa, että voimme yhdistää nämä molemmat elementit
kehon osa, joten tehkäämme se.
Meillä on H1 ja ul.
Lopuksi, ul elementti on 3 enemmän lapsia,
ja tämä täydentää meidän DOM puu, joten katsotaanpa lisätä li, li, li.
Tämä täydentää meidän DOM puu, ja näin selain tallentaa verkkosivun.
Nyt katsomaan miten voimme kulkea tämän puun JavaScriptin avulla.
Voimme käyttää tätä puuta käyttämällä erityistä JavaScript muuttuja nimeltä asiakirja.
Yksi ominaisuus tämän asiakirjan esine
on kehon omaisuutta, ja tämä objekti edustaa
runkoelementti esimerkissä kotisivulta.
Jos halusimme saada kaikki lapset runkoelementtiä,
joka, jos muistaa, että H1 tag ja ul tag,
voimme sanoa document.body.childNodes.
Ja tämä antaa meille takaisin joukko, joka sisältää sekä h1 elementti
ja ul elementti, koska he molemmat suoraan lasten elimistöön.
Jos halusimme luoda muuttuja edustaa ul elementti
voimme sanoa VRR ul = niin tämä koodi tänne,
ja nyt, koska childNodes on yksinkertaisesti joukko
voimme indeksinä se [1] saada toinen elementti, joka array.
Tämän uuden ul esine voimme käyttää erilaisia ​​ominaisuuksia elementin kuten sen tunnus.
Jos sanomme ul.id että tulee olemaan sama merkkijono lista
koska se mitä meillä on HTML-sivu.
Voimme myös saada sen tagname, joka tässä tapauksessa tulee olemaan
minkälainen elementti on, tässä tapauksessa, ul.
Voimme myös saada sen vanhemman tai solmun yläpuolella, joka tässä tapauksessa
tulee olemaan kehon osa.
Jos sanomme. ParentNode, että tulee olemaan sama kuin document.body.
Tietenkin tämä ul on lasten omaa,
joten voimme vielä sanoa. childNodes tästä elementti,
ja tämä joukko pitäisi nyt olla pituus 3 koska on 3 tuotetta listallamme.
Lopuksi, ehkä hyödyllisin ominaisuus tulee olemaan. InnerHTML,
ja tämä on todellinen listan sisällön, joka meidän esimerkki sivu
olivat 3 li tageja.
Tietenkin, jos meillä on suuri asiakirja, saatavuuden elementtejä
Tällä tavalla tulee olemaan todella hankalaa, koska
lopulta meidän täytyy sanoa asioita, kuten document.body.childNodes
kiinnike jotain. childNodes kiinnike jotain muuta,
ja se tulee saada todella hankalaa.
Sen sijaan mitä todella haluamme tehdä, on voitava kyselyn asiakirjan,
joten aivan kuten me etsitään asioita internetissä avainsanojen avulla
me todella tarvitsemme tapa hakea tämän asiakirjan ytimekkäästi
saada takaisin vain osa välitämme kulkematta
koko puu ylhäältä alas.
Onneksi uudet selaimet avulla voimme tehdä tämän
erityinen toiminto nimeltään querySelectorAll,
ja tämä toiminto kestää yhden argumentin
että on CSS valitsin, ja se tulee palauttaa meille
kaikki elementit, jotka vastaavat, että valitsin.
Tämä tarkoittaa sitä, sinun ei tarvitse opetella kokonaan uusi syntaksin istä DOM.
Sen sijaan voit hakea tietoa tiedät jo
noin CSS valitsimet.
Otetaan katsomaan joitakin esimerkkejä istä asiakirjan.
Jos sanomme querySelectorAll ja siirtää se tämän string # foo
joka aikoo antaa meille takaisin elementti tunnus foo.
Voit myös sanoa document.getElementById
ja siirtää se merkkijono foo ilman että hashtag.
Olet menossa saada takaisin täsmälleen sama kohde.
Jos sen sijaan ohitamme merkkijono. Baarista document.querySelectorAll
aiomme saada takaisin kaikki elementit luokan baari.
Voimme myös yhdistää CSS valitsimet.
Jos me kulkea string # foo img
joka aikoo antaa meille takaisin kaikki imagotekijöiden
jotka ovat lapsia elementin ID foo.
Kuten näette, yhdistämällä valitsimet meillä on joitakin todella tehokasta hakua.
Mutta konepellin alle, DOM on oikeastaan ​​vain puu,
ja näitä valitsimia avulla voimme abstrakteja että pois jossain määrin
koska emme aina välitä koko rakenne DOM puun.
Se oli nopeasti yleiskuvan DOM, ja kiitos liityit.
[CS50.TV]