[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Universitatea Harvard]
[Aceasta este CS50.] [CS50.TV]
În acest film vom arunca o privire la DOM.
Când un browser-ul descarcă o pagină web, acesta trebuie să fie reprezentat în memorie într-un fel.
Model Document Object, sau DOM,
descrie modul în care browser-ul reprezintă o pagină web în memorie.
În acest film, vom arunca o privire la DOM, în contextul JavaScript,
dar DOM este un concept de independenta de limbaj.
De exemplu, PHP are propria implementare DOM, de asemenea.
Cu toate acestea, DOM este frecvent utilizat de activarea JavaScript-
deoarece JavaScript ne permite să modificați conținutul unei pagini web de pe zbor,
și DOM ne permite să acceseze părți ale unei pagini Web.
Să aruncăm o privire la un exemplu pagina de web.
Bine, acum să vedem cum această pagină vor fi reprezentate în DOM.
Și orice pom, trebuie să aibă un nod rădăcină în partea de sus.
Pentru acest document, elementul HTML este nodul rădăcină
pentru că este primul element care apare.
Să adăugăm un nod rădăcină de copac nostru.
Să aruncăm o privire la documentul HTML din nou.
Observați că tag-ul corpului este imbricat în interiorul tag-ul HTML.
Acest lucru înseamnă că elementul corpul este un copil al elementului HTML.
Ne putem reprezenta asta în copacul nostru DOM de a face corpul o frunză
descendent din HTML.
Să facem asta.
Avem corp sub HTML.
Acum putem vedea că trupul are 2 copii proprii,
elementul h1 și elementul ul.
Acest lucru înseamnă că ne putem conecta atât de aceste elemente
la elementul body, deci haideți să facem asta.
Avem un H1 și o ul.
În cele din urmă, elementul ul are 3 copii mai multe,
și acest lucru se va finaliza copacul nostru DOM, asa ca hai sa adaugi Li, Li, Li.
Aceasta completează copacul nostru DOM, iar acest lucru este modul în care browser-ul este stocarea pagina de web.
Acum, haideți să aruncăm o privire la modul în care putem traversa acest copac cu ajutorul JavaScript.
Putem accesa acest copac folosind o variabilă special de activarea JavaScript-numit document.
O proprietate a acestui obiect documentului
este proprietatea corp, iar acest obiect reprezintă
elementul corp în exemplul site-ul nostru.
Dacă am vrut pentru a obține toate de copiii de la elementul body,
care, dacă vă amintiți este că tag-ul H1 și tag-ul,
putem spune document.body.childNodes.
Și acest lucru ne va da înapoi o matrice care conține atât elementul h1
și elementul ul, deoarece acestea sunt ambii copii directe ale corpului.
Dacă am vrut să creeze o variabila care reprezintă elementul ul
putem spune VRR ul =, atunci acest cod aici,
și acum că childNodes este pur și simplu o matrice
putem index în ea cu [1] pentru a obține al doilea element de care matrice.
Cu acest nou obiect ul, putem accesa diferite proprietăți ale elementului, cum ar fi ID-ul său.
Dacă spunem ul.id care va fi egală cu lista de string
pentru că ceea ce avem în pagina noastră de HTML.
Putem obține, de asemenea tagName sale, care în acest caz va fi
ce tip de element de aceasta este, în acest caz, un ul.
Putem obține, de asemenea, părinte sau nodul de mai sus, care, în acest caz,
va fi elementul corp.
Dacă spunem. ParentNode, care va fi la fel ca document.body.
Desigur, acest lucru ul are copii proprii,
astfel încât putem spune încă childNodes pe acest element.,
și această matrice trebuie să aibă acum lungime 3, deoarece exista 3 elemente în lista noastră.
În cele din urmă, probabil proprietatea cea mai utilă va fi. InnerHTML,
și acest lucru va fi conținutul real al listei, care în pagina noastră exemplu
au fost cele 3 tag-uri li.
Desigur, dacă avem un document de mare, accesul la elementele
în acest mod va fi foarte greoaie, deoarece
în cele din urmă va trebui să spun lucruri de genul document.body.childNodes
ceva suport. childNodes ceva suport altceva,
și că va obține într-adevăr greoaie.
În schimb ceea ce vrem cu adevărat să faceți este să fie în măsură pentru a interoga document,
Deci, doar ca am cautat pentru lucruri pe internet folosind cuvinte cheie
avem într-adevăr nevoie de o modalitate de a căuta acest document succint
mă întorc numai elementele pe care le pasă, fără parcurgerea
întreaga sus copac în jos.
Din fericire, browserele moderne ne permit să facem acest lucru
cu o funcție specială numit querySelectorAll,
și această funcție are un singur argument
că este un selector CSS, și se va reveni la noi
toate elementele care se potrivesc cu acel selector.
Asta înseamnă că nu aveți nevoie pentru a învăța o sintaxă cu totul nou pentru interogarea DOM.
În schimb puteți aplica cunoștințele știți deja
despre selectoare CSS.
Să aruncăm o privire la câteva exemple de interogare documentului.
Dacă spunem querySelectorAll și să-l dați acest șir # foo
care ne va da înapoi elementul cu ID-ul foo.
Se poate spune, de asemenea, document.getElementById
și trece-l foo șir fără ca hashtag.
Ai de gând să mă întorc același obiect exact.
Dacă în loc să trecem șirul. Bara de document.querySelectorAll
am de gând să mă întorc toate elementele cu bara de clasă.
Putem combina, de asemenea, selectoare CSS.
Dacă trecem în șirul # foo img
care ne va da înapoi toate elementele imaginii
că sunt copii ai elementului cu ID-ul foo.
După cum puteți vedea, prin Combinarea selectorilor avem unele capabilități de căutare foarte puternic.
Dar sub capota, DOM este de fapt doar un copac,
și aceste selectoare ne permit să abstract, care departe de un anumit grad
pentru că nu ne pasă întotdeauna de întreaga structură a arborelui DOM.
Asta a fost o prezentare generală rapidă a DOM, și mulțumesc pentru alături de noi.
[CS50.TV]