[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]