[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[Ito ay CS50.] [CS50.TV]
Sa video na ito kami ay pagpunta sa tumingin sa mga DOM.
Kapag ang isang browser Dina-download ang isang webpage, ito ay kinakailangan na kinakatawan sa memory kahit papaano.
Ang dokumento object modelo, o DOM,
naglalarawan kung paano browser ang kumakatawan sa isang webpage sa memorya.
Sa video na ito, isasaalang-alang namin tumingin sa ang DOM sa konteksto ng JavaScript,
ngunit DOM ay isang wika-malayang konsepto.
Halimbawa, PHP ay may sarili nitong DOM pagpapatupad pati na rin.
Gayunpaman, DOM ay madalas na ginagamit ng JavaScript
dahil ang JavaScript ay nagbibigay-daan sa amin upang baguhin ang mga nilalaman ng isang webpage sa mabilisang,
DOM at nagbibigay-daan sa amin upang ma-access ang mga bahagi ng isang webpage.
Ating tingnan ang isang halimbawa webpage.
Okay, ngayon sabihin makita kung paano ang pahina na ito ay kakatawanin sa DOM.
At puno bawat pangangailangan upang magkaroon ng isang ugat na node sa tuktok.
Para sa mga dokumentong ito, ang mga HTML element ay ang root node
dahil ito ang unang elemento na lilitaw.
Sabihin magdagdag ng isang root node sa aming tree.
Ating tingnan ang dokumentong HTML muli.
Mapapansin na ang body tag ay nested sa loob ng tag na HTML.
Nangangahulugan ito na ang mga elemento ng katawan ay isang anak ng HTML element.
Maaari naming kumakatawan ito sa aming DOM puno sa pamamagitan ng paggawa ng katawan ng isang dahon
pababang mula sa HTML.
Tayo'y gawin iyon.
Mayroon kaming mga katawan sa ilalim HTML.
Ngayon ay maaari naming makita ang katawan na ito ay may 2 anak ng sarili nitong,
ang h1 elemento at ang ul elemento.
Nangangahulugan ito na maaari naming ikonekta ang parehong mga elemento
sa mga elemento katawan, kaya natin gawin iyon.
Mayroon kaming isang h1 at isang ul.
Sa wakas, ang ul elemento ay may 3 mga bata pa,
at ito ay makumpleto ang aming DOM tree, kaya natin idagdag li, li, li.
Ito makumpleto ng aming DOM tree, at ito ay kung paano browser ang pag-iimbak ng iyong webpage.
Ngayon sabihin tumingin sa kung paano namin maaaring tumawid ito puno gamit ang JavaScript.
Maaari naming i-access ang puno ng paggamit ng isang espesyal na variable JavaScript tinatawag na dokumento.
One-aari ng sa bagay na ito dokumento
ay ang katawan ari-arian, at mga bagay na ito ay kumakatawan
ang katawan sangkap sa aming halimbawa webpage.
Kung gusto naming upang makakuha ng lahat ng mga anak ng mga elemento ng katawan,
na kung tandaan mo na ang h1 tag at ang ul tag,
maaari naming sabihin document.body.childNodes.
At ito ay magbibigay sa amin pabalik isang array na naglalaman ng parehong mga elemento h1
at ang ul elemento dahil ang mga ito ay parehong mga direktang mga bata ng katawan.
Kung gusto naming lumikha ng isang variable na kumakatawan sa mga elemento ul
maaari naming sabihin vrr ul = pagkatapos ay ang code na ito up dito,
at ngayon dahil childNodes ay lamang ng isang array
kaya namin sa index ito sa [1] upang makuha ang pangalawang elemento ng array na.
Gamit ang bagong bagay ul maaari naming ma-access ang iba't-ibang mga katangian ng mga elemento tulad nito ID.
Kung sabihin namin ul.id na pupuntahan magiging katumbas ng listahan string
dahil iyon ang kung ano ang mayroon kami sa aming mga pahina ng HTML.
Maaari din naming kumuha nito tagName, na sa kasong ito ay magiging
kung anong uri ng elemento ito ay, sa kasong ito, ang isang ul.
Maaari din naming kumuha nito magulang o ang node sa itaas nito, na sa kasong ito
ay pagpunta sa maging sa katawan elemento.
Kung sabihin namin. ParentNode, na nangyayari na maging kapareho ng document.body.
Siyempre, ul na ito ay may mga anak ng kanyang sarili,
sa gayon ay maaari pa rin namin sasabihin. childNodes ito sa elemento,
at array na ito ay dapat na ngayon ay may haba 3 dahil mayroong 3 mga item sa aming listahan.
Sa wakas, marahil ang pinaka-kapaki-pakinabang na ari-arian ay magiging. InnerHTML,
at ito ay ang aktwal na nilalaman ng mga listahan, na sa aming halimbawang pahina
ay mga 3 li tag.
Siyempre, kung kami ay may isang malaking dokumento, pag-access sa mga elemento
sa ganitong paraan ay magiging talagang pahirap dahil
malaon gagamitin namin sasabihin ng mga bagay tulad ng document.body.childNodes
bracket ng isang bagay. childNodes bracket ibang bagay,
at ito ay pagpunta upang makakuha ng talagang mahirap.
Sa halip kung ano ang aming talagang gusto lang gawin ay magagawang i-query ang dokumento,
kaya lang i naghanap kami para sa mga bagay sa internet gamit ang mga keyword
namin talagang kailangan ang ilang mga paraan ng paghahanap ng dokumentong ito upang succinctly
bumalik lamang ang mga elemento pinapahalagahan namin ang tungkol sa walang traversing
ang buong tuktok puno hanggang ibaba.
Sa kabutihang-palad, modernong mga browser daan sa amin upang gawin ito
na may isang espesyal na function na tinatawag na querySelectorAll,
at pag-andar na ito ay tumatagal ng isang solong argument
iyon ay isang CSS selector, at ito ay pagpunta sa ibalik sa amin
ang lahat ng mga elemento na tugma sa selector.
Nangangahulugan iyon na hindi mo kailangang malaman ng isang buong bagong syntax para sa querying ang DOM.
Sa halip na maaari mong ilapat ang kaalaman alam mo na
tungkol sa tagapili ng CSS.
Ating tingnan ang ilang mga halimbawa ng querying ang dokumento.
Kung sabihin namin querySelectorAll at pumasa ito sa ganitong string # foo
na pupuntahan bigyan kami pabalik ang elemento na may ID foo.
Maaari mo ring sabihin document.getElementByID
at pumasa ito ang string foo nang hindi na hashtag.
Ikaw ay pagpunta upang makabalik sa parehong eksaktong bagay.
Kung sa halip namin ipapasa ang mga string. Bar upang document.querySelectorAll
kami ay pagpunta upang makabalik ang lahat ng mga elemento sa bar class.
Maaari din naming pagsamahin ang tagapili ng CSS.
Kung pumasa kami sa string # foo img
na pupuntahan bigyan kami pabalik ang lahat ng mga elemento ng imahe
na ang mga bata ng mga elemento na may ID foo.
Tulad ng iyong nakikita, pamamagitan ng pagsasama ng tagapili mayroon kaming ilang mga talagang mahusay na kakayahan sa paghahanap.
Ngunit sa ilalim ng hood, ang DOM ay talagang lamang ng isang puno,
at mga tagapili ng daan sa amin upang abstract na ang layo sa ilang mga degree na
dahil hindi kami laging mahalaga tungkol sa ang buong istraktura ng tree DOM.
Iyon ay isang mabilis na pangkalahatang-ideya ng DOM, at salamat sa pagsali sa amin.
[CS50.TV]