Bilang karagdagan, ang HTMLDocument object ay tumutukoy sa dalawang katangian, ang bawat isa ay tumutukoy hindi sa isang koleksyon, ngunit sa isang solong elemento. Ang document.body property ay kumakatawan sa HTML document element, at ang document.head property ay kumakatawan sa . Ang mga pag-aari na ito ay palaging tinukoy sa dokumento: kahit na ang pinagmulang dokumento ay walang mga elemento at mga elemento, ang browser ay gagawa ng mga ito nang tahasan. Ang documentElement property ng isang Document object ay tumutukoy sa root element ng dokumento. Sa mga HTML na dokumento ay palaging kinakatawan nito ang .

Ang value ng HTML class attribute ay isang listahan ng zero o higit pang mga identifier, na pinaghihiwalay ng mga puwang. Binibigyang-daan ka nitong tukuyin ang mga hanay ng mga kaugnay na elemento ng dokumento: anumang mga elemento na may parehong identifier sa katangian ng klase ay bahagi ng parehong hanay. Ang klase ng salita ay nakalaan sa JavaScript, kaya ang client-side na JavaScript ay gumagamit ng className property upang iimbak ang halaga ng HTML class attribute.

Karaniwang ginagamit ang attribute ng klase kasabay ng CSS cascading style sheet para maglapat ng karaniwang istilo ng pag-render sa lahat ng miyembro ng isang set. Gayunpaman, bilang karagdagan, tinutukoy ng pamantayan ng HTML5 ang getElementsByClassName() na pamamaraan, na nagbibigay-daan sa iyong pumili ng maraming elemento ng dokumento batay sa mga identifier sa kanilang mga katangian ng klase.

Tulad ng getElementsByTagName() method, ang getElementsByClassName() method ay maaaring tawagin sa parehong HTML na dokumento at HTML elements, at nagbabalik ng live na NodeList object na naglalaman ng lahat ng descendants ng dokumento o elemento na tumutugma sa pamantayan sa paghahanap.

Ang getElementsByClassName() method ay tumatagal ng isang string argument, ngunit ang string mismo ay maaaring maglaman ng maraming identifier, na pinaghihiwalay ng mga puwang. Ang lahat ng elemento na ang mga attribute ng klase ay naglalaman ng lahat ng tinukoy na identifier ay ituturing na tugma. Ang pagkakasunud-sunod ng mga identifier ay hindi mahalaga. Tandaan na sa parehong katangian ng klase at argumento sa pamamaraang getElementsByClassName(), ang mga identifier ng klase ay pinaghihiwalay ng mga puwang sa halip na mga kuwit.

Nasa ibaba ang ilang halimbawa ng paggamit ng getElementsByClassName() na pamamaraan:

// Find all elements with class "warning" var warnings = document.getElementsByClassName("babala"); // Hanapin ang lahat ng mga inapo ng isang elemento na may mga identifier na "log" // na may mga klase na "error" at "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("fatal error");

Ang CSS Cascading Style Sheets ay may napakalakas na syntactic construct na kilala bilang mga selector na nagbibigay-daan sa iyong ilarawan ang mga elemento o set ng mga elemento sa isang dokumento. Kasama ng pag-standardize ng mga tagapili ng CSS3, ang isa pang pamantayan ng W3C na kilala bilang Selectors API ay tumutukoy sa mga pamamaraan ng JavaScript para sa pagkuha ng mga elemento na tumutugma sa isang tinukoy na tagapili.

Ang susi sa API na ito ay ang querySelectorAll() method ng Document object. Ito ay tumatagal ng isang string argument na may CSS selector at nagbabalik ng NodeList object na kumakatawan sa lahat ng elemento ng dokumento na tumutugma sa selector.

Bilang karagdagan sa querySelectorAll() na pamamaraan, ang object ng dokumento ay tumutukoy din sa isang querySelector() method, na katulad ng querySelectorAll() method maliban na ito ay nagbabalik lamang ng una (sa pagkakasunud-sunod ng dokumento) na tumutugmang elemento, o null kung walang tumutugmang mga elemento.

Ang dalawang pamamaraan na ito ay tinukoy din ng klase ng Mga Elemento. Kapag tinawag sila sa isang elemento, hahanapin ang buong dokumento para sa isang tugma para sa ibinigay na tagapili, at pagkatapos ay sinasala ang resulta upang isama lamang ang mga inapo ng elementong ginamit. Ang diskarte na ito ay maaaring mukhang counterintuitive dahil nangangahulugan ito na ang selector string ay maaaring magsama ng mga ninuno ng elementong itinutugma.

Pagkatapos pumili ng elemento ng dokumento, kung minsan ay kinakailangan na maghanap ng mga bahagi ng dokumento na may kaugnayan sa istruktura (magulang, kapatid, anak). Ang isang bagay na Dokumento ay maaaring isipin bilang isang puno ng mga bagay na Node. Ang uri ng Node ay tumutukoy sa mga katangian na nagbibigay-daan sa iyong mag-navigate sa gayong puno. May isa pang interface ng application para sa pag-navigate ng dokumento, tulad ng Element object tree.

Ang Document object, ang Element object nito, at ang Text object na kumakatawan sa mga fragment ng text sa dokumento ay lahat ng Node object. Ang klase ng Node ay tumutukoy sa mga sumusunod na mahahalagang katangian:

Ang parent node ng node na ito, o null para sa mga node na walang parent, gaya ng Document.

Isang nababasang bagay na tulad ng array (NodeList) na nagbibigay ng representasyon ng mga child node.

Ang una at huling child node, o null kung ang ibinigay na node ay walang child node.

Susunod at naunang kapatid na node. Ang magkapatid na node ay dalawang node na may parehong magulang. Ang pagkakasunud-sunod kung saan lumitaw ang mga ito ay tumutugma sa pagkakasunud-sunod sa dokumento. Ang mga katangiang ito ay nagli-link ng mga node sa isang dobleng naka-link na listahan.

Ang uri ng node na ito. Ang mga node ng uri ng Dokumento ay may halaga na 9 sa property na ito. Mga node ng uri ng Element - halaga 1. Mga node ng teksto ng uri ng Teksto - halaga 3. Mga node ng uri Mga Komento - halaga 8 at mga node ng uri ng DocumentFragment - halaga 11.

Text content ng Text at Comment node.

Ang pangalan ng isang Element tag na may lahat ng character na na-convert sa uppercase.

Gamit ang mga katangiang ito ng klase ng Node, maaari mong i-reference ang pangalawang child node ng unang child node ng Document object, tulad ng ipinapakita sa ibaba:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

Ipagpalagay natin na ang pinag-uusapang dokumento ay may sumusunod na anyo:

TestHello World!

Pagkatapos ay ang pangalawang child node ng unang child node ang magiging elemento. Sa property ng nodeType naglalaman ito ng value 1 at sa property na nodeName naglalaman ito ng value na "BODY".

Gayunpaman, tandaan na ang API na ito ay lubhang sensitibo sa mga pagbabago sa teksto ng dokumento. Halimbawa, kung nagdagdag ka ng isang line feed sa pagitan ng mga at tag sa dokumentong ito, ang line feed na character na iyon ay magiging unang child node (Text node) ng unang child node, at ang pangalawang child node ay magiging elemento, hindi .

Kapag ang pangunahing interes ay nasa mismong mga elemento ng dokumento, sa halip na sa teksto sa loob ng mga ito (at ang puting espasyo sa pagitan ng mga ito), mas maginhawang gumamit ng interface ng application na nagbibigay-daan sa iyo upang bigyang-kahulugan ang dokumento bilang isang puno ng mga bagay na Elemento , binabalewala ang mga Text at Comment node na bahagi rin ng dokumento.

Ang unang bahagi ng interface ng application na ito ay ang child property ng Element objects. Tulad ng childNodes property, ang value nito ay isang NodeList object. Gayunpaman, hindi tulad ng childNodes property, ang listahan ng mga bata ay naglalaman lamang ng mga Element object.

Tandaan na ang Text at Comment node ay walang child node. Nangangahulugan ito na ang property na Node.parentNode na inilarawan sa itaas ay hindi kailanman nagbabalik ng mga node na may uri ng Text o Comment. Ang halaga ng parentNode property ng anumang Element object ay palaging isa pang Element object o ang ugat ng tree - isang Document o DocumentFragment object.

Ang pangalawang bahagi ng interface ng application para sa pag-navigate sa mga elemento ng dokumento ay ang mga katangian ng object ng Element, katulad ng mga katangian para sa pag-access ng mga node ng bata at kapatid ng Node object:

Katulad ng firstChild at lastChild properties, ngunit ibalik ang child elements.

Katulad ng nextSibling at previousSibling properties, pero ibalik ang sibling elements.

Bilang ng mga elemento ng bata. Ibinabalik ang parehong halaga ng mga child.length property.

Ang mga katangian ng pag-access ng elemento ng bata at kapatid na ito ay na-standardize at ipinapatupad sa lahat ng kasalukuyang browser maliban sa IE.

Ang Document Object Model, o "DOM", ay isang programming interface para sa pag-access ng mga elemento ng mga web page. Sa pangkalahatan, ito ay isang page API na nagbibigay-daan sa iyong basahin at manipulahin ang nilalaman, istraktura, at mga istilo ng isang pahina. Alamin natin kung paano ito gumagana at kung paano ito gumagana.

Ang proseso ng pagbabago ng orihinal na HTML na dokumento sa isang renderable, istilo at interactive na pahina ay tinatawag na "Critical Rendering Path". Bagama't ang prosesong ito ay maaaring hatiin sa ilang hakbang, gaya ng inilarawan ko sa Pag-unawa sa Pag-render ng Kritikal na Landas, ang mga hakbang na ito ay maaaring halos pagsama-samahin sa dalawang hakbang. Sa una, pina-parse ng browser ang dokumento para matukoy kung ano ang ipapakita sa page, at sa pangalawa, ginagawa ng browser ang pag-render.

Ang resulta ng unang yugto ay tinatawag na "render tree". Ang rendering tree ay isang representasyon ng mga elemento ng HTML na ire-render sa isang page at ang mga nauugnay na istilo nito. Upang mabuo ang punong ito, kailangan ng browser ng dalawang bagay:

Ang DOM ay isang object na representasyon ng orihinal na HTML na dokumento. Ito ay may ilang mga pagkakaiba, tulad ng makikita natin sa ibaba, ngunit mahalagang ito ay isang pagtatangka na i-convert ang istraktura at nilalaman ng isang HTML na dokumento sa isang object model na maaaring magamit ng iba't ibang mga programa.

Ang istraktura ng mga bagay sa DOM ay kinakatawan ng tinatawag na "node tree". Tinatawag itong gayon dahil maaari itong isipin bilang isang puno na may isang magulang na sumasanga sa ilang mga sanga ng bata, na ang bawat isa ay maaaring may mga dahon. Sa kasong ito, ang "elemento" ng magulang ay ang elemento ng ugat, ang "mga sanga" ng bata ay ang mga nested na elemento, at ang "mga dahon" ay ang mga nilalaman sa loob ng mga elemento.

Kunin natin ang HTML na dokumentong ito bilang isang halimbawa:

Ang aking unang web page Kumusta, mundo!

Kamusta ka?

Ang dokumentong ito ay maaaring katawanin bilang sumusunod na puno ng mga node:

• html
  • ulo
    • pamagat
      • Ang aking unang web page
  • katawan
    • h1
      • Hello, mundo!
    • p
      • Kamusta ka?

Sa halimbawa sa itaas, lumalabas na ang DOM ay isang 1:1 na pagmamapa ng orihinal na HTML na dokumento. Gayunpaman, tulad ng sinabi ko dati, may mga pagkakaiba. Upang lubos na maunawaan kung ano ang DOM, kailangan nating tingnan kung ano ito.

Kahit na ang DOM ay nilikha mula sa isang HTML na dokumento, hindi ito palaging eksaktong pareho. Mayroong dalawang kaso kung saan maaaring mag-iba ang DOM mula sa pinagmulang HTML.

Ang DOM ay ang interface para sa pag-access sa aktwal (iyon ay, nai-render na) na mga elemento ng isang HTML na dokumento. Sa panahon ng proseso ng paglikha ng DOM, ang browser mismo ay maaaring itama ang ilang mga error sa HTML code.

Isaalang-alang ang HTML na dokumentong ito bilang isang halimbawa:

Hello, mundo!

Ang dokumento ay kulang sa mga elemento at , na isang kinakailangan para sa HTML. Ngunit kung titingnan natin ang nagresultang puno ng DOM, makikita natin na naayos na ito:

• html
  • ulo
  • katawan
    • Hello, mundo!
  2. Kapag ang DOM ay binago ng Javascript code

  Bilang karagdagan sa pagiging interface para sa pagtingin sa mga nilalaman ng isang HTML na dokumento, ang DOM mismo ay maaari ding baguhin.

  Maaari kaming, halimbawa, lumikha ng mga karagdagang node para sa DOM gamit ang Javascript.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("Ako ay bago!");newParagraph.appendChild(paragraphContent);document.body.appendChild(newParagraph);

  Babaguhin ng code na ito ang DOM, ngunit hindi lilitaw ang mga pagbabago sa HTML na dokumento.

  Ang DOM ay hindi ang nakikita mo sa browser (i.e. ang rendering tree)

  Sa viewport ng browser makikita mo ang rendering tree, na gaya ng sinabi ko ay kumbinasyon ng DOM at CSSOM. Ano ang naiiba sa DOM at sa render tree ay ang huli ay binubuo lamang ng kung ano ang ire-render sa screen.

  Dahil ang render tree ay nauugnay lamang sa kung ano ang na-render, hindi nito kasama ang mga elemento na biswal na nakatago. Halimbawa, ang mga elementong may mga istilo na may display: wala .

  Hello, mundo!

  Kamusta ka?

  Isasama ng DOM ang elemento

  • html
    • ulo
    • katawan
      • h1
        • Hello, mundo!
      • p
        • Kamusta ka?

  Gayunpaman, ang render tree, at samakatuwid ay kung ano ang nakikita sa viewport, ay hindi isasama sa elementong ito.

  • html
    • katawan
      • h1
        • Hello, mundo!
  Ang DOM ay hindi ang ipinapakita sa DevTools

  Ang pagkakaibang ito ay bahagyang mas maliit dahil ang DevTools Element Inspector ay nagbibigay ng pinakamalapit na approximation sa DOM na mayroon kami sa browser. Gayunpaman, ang DevTools inspector ay naglalaman ng karagdagang impormasyon na wala sa DOM.

  Ang pinakamagandang halimbawa nito ay ang CSS pseudo-elements. Ang mga pseudo element na ginawa gamit ang ::before at ::after ay bahagi ng CSSOM at rendering tree, ngunit hindi ito teknikal na bahagi ng DOM. Ito ay dahil ang DOM ay nilikha lamang mula sa orihinal na HTML na dokumento, hindi kasama ang mga istilong inilapat sa elemento.

  Kahit na ang mga pseudo-element ay hindi bahagi ng DOM, ang mga ito ay nasa aming devtools element inspector.

  
  Buod

  Ang DOM ay ang interface sa HTML na dokumento. Ginagamit ito ng mga browser bilang unang hakbang sa pagtukoy kung ano ang ire-render sa viewport, at ng Javascript code upang baguhin ang nilalaman, istraktura, o istilo ng isang page.

Sa tutorial na ito titingnan natin ang mga pangunahing kaalaman sa pagtatrabaho sa mga kaganapan, katangian at getElementById sa JavaScript.

Sa nakaraang mga aralin, pinag-aralan namin ang mga pangunahing kakayahan ng wikang JavaScript. Simula sa araling ito, gagawin namin kung para saan talaga ang JavaScript - babaguhin namin ang mga elemento ng HTML page at tutugon sa mga aksyon ng user. Ang aming mga script ay magiging mas kahanga-hanga at kapaki-pakinabang.

Magsisimula kami sa pagtuturo sa aming code na tumugon sa mga aksyon ng user ng site. Halimbawa, magki-click ang user sa isang lugar gamit ang mouse, at ang aming code bilang tugon ay kailangang iproseso ang pag-click na ito at ipakita ang ilang impormasyon sa screen.

Ang mga pagkilos ng user na masusubaybayan namin sa pamamagitan ng JavaScript ay tinatawag na mga kaganapan. Ang mga kaganapan ay maaaring ang mga sumusunod: umiyak mouse sa isang elemento ng pahina, gabay mouse sa isang elemento ng page o vice versa - pangangalaga mouse cursor mula sa isang elemento at iba pa. Bilang karagdagan, may mga kaganapan na hindi nakadepende sa mga aksyon ng user, halimbawa, ang kaganapan kapag ang isang HTML na pahina ay na-load sa browser.

Mayroong ilang mga paraan upang gumana sa mga kaganapan sa JavaScript. Magsisimula tayo sa pinakasimple sa kanila.

Ang pinakamadaling paraan upang itakda ang tugon ng isang elemento sa isang partikular na kaganapan ay ang tukuyin ito gamit ang isang katangian para sa isang partikular na tag. Halimbawa, isang kaganapan "pag-click ng mouse" tumutugma sa onclick attribute, event "itaas ang mouse"- ang katangian ng onmouseover, at ang kaganapan "mga dahon ng cursor na elemento"- katangian ng onmouseout.

Ang value ng attribute na may event ay JavaScript code. Sa sumusunod na halimbawa sa pamamagitan ng pag-click sa isang pindutan gamit ang mouse ang function ng alerto ay isasagawa:

At ngayon sa pamamagitan ng pag-click ang function ng func ay isasagawa sa elemento:

function func() ( alert("!"); )

Maaari kang magsagawa ng hindi lamang isang function, ngunit marami:

function func1() ( alert("1"); ) function func2() ( alert("2"); )

Pakitandaan na kung kailangan mo ng double quotes sa loob ng isang attribute (halimbawa, para sa isang string) at ang mga panlabas na quotes ng attribute ay double quotes din - onclick="alert("!")"- hindi gagana ang code na ito.

Mayroong ilang mga paraan upang labanan ito: maaari mong baguhin ang mga panlabas na quote sa mga solong quote onclick="alert("!")", maaari ka ring makatakas sa mga panloob na panipi gamit ang backslash onclick="alerto(\"!\)" o ilipat lang ang JavaScript code mula sa attribute papunta sa function, at iwanan lang ang function name sa attribute onclick="func()".

Ang parehong bagay ay mangyayari kung ilalagay mo ang mga panlabas na quote ng katangian sa mga solong quote at gagamit din ng mga solong quote para sa string: onclick="alert("!")"- dito, din, ang lahat ay nalutas sa magkatulad na paraan.

Ngayon ay matututunan natin kung paano tumanggap ng mga elemento ng HTML page at magsagawa ng iba't ibang mga manipulasyon sa kanila (magagawa nating baguhin, halimbawa, ang kanilang teksto at kulay at marami pang ibang kapaki-pakinabang na bagay).

Sabihin nating mayroon kaming tag sa page na may id attribute na nakatakdang subukan . Isulat natin ang link sa tag na ito sa elem variable. Upang gawin ito, dapat nating gamitin ang getElementById method, na nakakakuha ng elemento sa pamamagitan ng id nito.

Ang entry na ito ay magaganap kapag na-click ang button kung saan namin itinalaga ang onclick attribute. Sa pamamagitan ng pag-click sa button na ito, gagana ang function na func, na makakahanap ng elemento sa HTML page na may id na katumbas ng pagsubok at pagsusulat link dito sa elem variable:

Ngayon sa elem variable mayroon kaming link sa isang elemento na may id attribute sa test value. Ang variable elem mismo ay bagay.

Ang object na ito at ang HTML page tag ay konektado sa isa't isa - maaari naming baguhin ang anumang mga katangian ng elem object at sa parehong oras ay makikita namin ang mga pagbabago sa HTML page na mangyayari sa elementong natanggap namin.

Tingnan natin kung paano ito nangyayari sa pagsasanay.

Ngayon ay babasahin natin at babaguhin ang mga katangian ng tag. Muli tayong magkaroon ng input na may id na katumbas ng pagsubok at isang button, sa pag-click kung saan ilulunsad ang func function:

Sa loob ng function ng func matatanggap namin ang aming input sa pamamagitan ng kanyang id at magsulat ng isang link dito sa elem variable:

function func() ( var elem = document.getElementById("test"); )

Ipakita natin ngayon ang mga nilalaman ng ating mga input attribute. Upang ma-access, halimbawa, ang value attribute, dapat mong isulat ang sumusunod: elem.value , kung saan ang elem ay ang variable kung saan kami nagsulat ng link sa aming elemento gamit ang getElementById, at ang value ay ang attribute ng tag na interesado kami.

Maaari naming ipakita ang mga nilalaman ng katangian sa pamamagitan ng alerto sa ganitong paraan - alerto(elem.value) - o isulat ito sa ilang variable. Gawin natin ito:

function func() ( var elem = document.getElementById("test"); alert(elem.value); //ay magpapakita ng "!" )

Maaari naming basahin ang mga halaga ng iba pang mga katangian sa parehong paraan, halimbawa, elem.id - binabasa namin ang halaga ng katangian ng id, at elem.type - ang halaga ng katangian ng uri. Tingnan ang halimbawa:

function func() ( var elem = document.getElementById("test"); alert(elem.value); //magpapakita ng "!" alert(elem.id); //magpapakita ng "test" alert(elem.type ); // ay magpapakita ng "teksto")

Hindi mo lang mababasa ang mga value ng attribute, ngunit mababago mo rin ang mga ito. Para, halimbawa, baguhin ang value ng value attribute, kailangan mo lang itong italaga sa elem.value construct:

function func() ( var elem = document.getElementById("test"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

Magiging ganito ang HTML code (ang value attribute ay magiging www):

Well, ngayon ang pinakamahirap na bagay - hindi ka maaaring pumasok sa elem variable, ngunit bumuo ng isang kadena ng mga puntos sa ganitong paraan:

function func() ( alert(document.getElementById("test").value); //ay magpapakita ng "!" )

Sa parehong paraan (chain) maaari mong muling isulat ang mga katangian:

function func() ( document.getElementById("test").value = "www"; }!}

Gayunpaman, sa karamihan ng mga kaso, ang pagpapakilala ng isang variable ay mas maginhawa. Ihambing ang dalawang halimbawa - ngayon ay ipinakilala ko ang elem variable at maaaring magbasa ng anumang bilang ng mga katangian, habang ang getElementById ay tinatawag minsan lang:

function func() ( var elem = document.getElementById("test"); elem.value = "www"; elem.type = "submit"; }!}

Ngayon hindi ako nagpapakilala ng isang bagong variable at kaya kailangan kong tawagan ang getElementById nang dalawang beses:

function func() ( document.getElementById("test").value = "www"; document.getElementById("test").type = "submit"; }!}

Sa aking opinyon, ang code na ito ay naging mas kumplikado, kahit na ito ay tumatagal ng isang mas kaunting linya. Bilang karagdagan, kung gusto kong baguhin ang halaga ng id mula sa pagsubok sa, halimbawa, www, kailangan kong gawin ito sa maraming lugar, na hindi masyadong maginhawa.

Sa aming kaso, kung gagamit kami ng getElementById sa bawat oras, pagkatapos ay ipoproseso ng browser ang HTML page sa bawat oras at maghahanap ng elementong may ibinigay na id nang maraming beses (hindi mahalaga na pareho ang mga id - gagawin ng browser ang lahat ang mga aksyon nang maraming beses), nagsasagawa ng mga walang kwentang operasyon na maaaring makapagpabagal sa pagpapatakbo ng browser.

Kung gagamitin natin ang elem variable, walang paghahanap sa page na magaganap (ang elemento ay natagpuan na at ang link dito ay nasa elem variable).

Natutunan mo na kung paano gumawa ng mga katangian sa pamamagitan ng JavaScript at ngayon ay oras na para sabihin sa iyo na hindi lahat ay napakasimple - mayroong isang pagbubukod kapag nagtatrabaho sa mga katangian - ito ang katangian ng klase.

Espesyal ang salitang ito sa JavaScript at samakatuwid ay hindi tayo basta basta magsulat elem.klase upang basahin ang halaga ng katangian ng klase. Sa halip ay magsulat ka elem.className.

Ang sumusunod na halimbawa ay nagpapakita ng halaga ng katangian ng klase:

function func() ( var elem = document.getElementById("test"); alert(elem.className); )

Sa pamamagitan ng paraan, may iba pang mga katangian na tinatawag na naiiba kaysa sa mga katangian. Halimbawa, ang for() attribute ay may property na tinatawag na htmlFor.

Ngayon ay gagana tayo sa isang espesyal na bagay na ito, na tumuturo sa kasalukuyang elemento (ang elemento kung saan naganap ang kaganapan). Bukod dito, ito ay nagpapahiwatig na ang elementong ito ay nakuha na ng getElementById method.

Tingnan natin kung paano ito gagawin at kung ano ang kaginhawahan ng diskarteng ito.

Magkaroon tayo ng gawain ng pag-click sa isang input upang ipakita ang mga nilalaman ng halaga nito.

Sa ngayon maaari mo lamang gawin ang desisyong ito:

function func() ( var elem = document.getElementById("test"); alert(elem.value); )

Sa prinsipyo, ang solusyon na ito ay mabuti, ngunit ngayon isipin na mayroon kaming maraming mga input at kapag nag-click kami sa bawat isa, kailangan naming ipakita ang halaga nito.

Sa kasong ito, magtatapos tayo sa isang bagay na tulad nito:

function func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) function func2() ( var elem = document.getElementById("test2"); alert(elem.value); ) function func3() ( var elem = document.getElementById("test3"); alert(elem.value); )

Ngayon ang disbentaha ng aming diskarte ay malinaw na nakikita - para sa bawat input kailangan naming lumikha ng aming sariling pag-click sa pagpoproseso ng function, at ang mga function na ito ay halos parehong bagay.

Kung mayroon tayong 10 input, kailangan nating gumawa ng 10 function, na hindi maginhawa.

Pasimplehin natin ang ating gawain: ipapasa natin ang id ng kasalukuyang elemento bilang parameter sa function. At sa halip na isang malaking bilang ng mga pag-andar, ang lahat ay mababawasan sa isang pag-andar:

function func(id) ( var elem = document.getElementById(id); alert(elem.value); )

Gayunpaman, ang solusyon na ito ay mayroon pa ring disbentaha - ang bawat elemento ay kailangang magpasok ng ibang id, na medyo hindi rin maginhawa.

Kaya, sa wakas ay tingnan natin ang opsyon ng paglutas ng problema gamit ito .

Gawin natin ito upang ang bawat input ay magpapakita ng nilalaman nito kapag na-click. Upang gawin ito, ipinapasa namin ang bagay na ito bilang isang parameter sa function, tulad nito: func(this) .

Ang aming ito ay ipinasa bilang isang parameter ng function at nagtatapos sa elem variable. Ang elem na ito ay kumikilos na parang ito ay nakuha sa ganitong paraan: var elem = document.getElementById(...), ngunit hindi mo kailangang matanggap ito sa ganitong paraan, handa na ang lahat doon at magagamit mo ito. Halimbawa, itinuturo ng elem.value ang halaga ng aming input at iba pa.

Kaya, narito ang pinakasimpleng solusyon sa aming problema:

function func(elem) ( alert(elem.value); )

Sa JavaScript, ang pagtatrabaho sa mga katangian ng CSS ay nangyayari sa pamamagitan ng pagbabago ng halaga ng katangian ng estilo para sa isang elemento. Halimbawa, upang baguhin ang kulay na kailangan mong buuin ang sumusunod na kadena - elem.style.color- at italaga dito ang nais na halaga ng kulay:

function func() ( var elem = document.getElementById("test"); elem.style.color = "red"; )

Hindi mo rin maaaring ipasok ang elem variable, ngunit bumuo isang napakahabang kadena.

Ang gulo talaga ng topic. Ngunit, tulad ng sinasabi nila, ang diyablo ay hindi kasingkilabot bilang siya ay ipininta. Ito ay kung saan nakukuha ko ang pinakamatigas na mani: ang sobrang gawaing ito ng "pagpinta nito" bilang natutunaw hangga't maaari, ngunit hindi ganap na primitive. Sa ngayon, ang lahat ng mga materyales na nabasa ko ay malamang na maging abstruse o primitive.

Ang abbreviation na DOM ay kumakatawan sa Modelo ng Bagay ng Dokumento(modelo ng object ng dokumento).

Ang DOM ay isang programming interface para sa pag-access sa nilalaman ng HTML, XHTML at XML na mga dokumento, iyon ay, kumakatawan sa HTML, XHTML at XML na mga tag at katangian, pati na rin ang mga istilo ng CSS bilang mga bagay sa programming. Parehong gumagana ang JavaScript at iba pang mga wika sa web programming sa modelong ito.

Isang maliit na kasaysayan

Mayroong 4 na antas ng DOM (0, 1, 2 at 3).

Kasama sa Level 0 (1996) ang mga modelo ng DOM na umiral bago ang Level 1. Pangunahing mga koleksyon ito: document.images, document.forms, document.layers at document.all. Ang mga modelong ito ay hindi pormal na mga detalye ng DOM na inilathala ng W3C. Sa halip, kinakatawan nila ang impormasyon tungkol sa kung ano ang umiiral bago nagsimula ang proseso ng standardisasyon.

Kasama rin sa Antas 1 (1997) ang pangunahing pag-andar para sa pagproseso ng mga dokumentong XML: maraming paraan upang gumana sa mga indibidwal na node, magtrabaho kasama ang mga tagubilin sa pagproseso ng XML, atbp.

Bilang karagdagan, ang antas 1 ng DOM ay naglalaman ng ilang mga espesyal na interface na maaaring pangasiwaan ang mga indibidwal na elemento ng HTML. Halimbawa, maaari kang magtrabaho sa mga HTML na talahanayan, form, listahan ng pagpili, atbp.

Nagdagdag ang DOM Level 2 (2002) ng ilang bagong feature.

Habang ang DOM Level 1 ay walang suporta para sa mga namespace, ang DOM Level 2 na mga interface ay naglalaman ng mga pamamaraan para sa pamamahala ng mga namespace na nauugnay sa mga kinakailangan para sa pagbuo at pagproseso ng mga XML na dokumento.

Bilang karagdagan, ang DOM level 2 ay sumusuporta sa mga kaganapan.

Ang Antas 2 ay ang kasalukuyang antas ng detalye ng DOM, ngunit ang W3C ay nagrerekomenda ng ilang seksyon ng detalye ng Antas 3.

Ang DOM Level 3 ay isang gumaganang draft ng detalye na nagpapalawak sa functionality ng DOM Level 2. Ang isa sa pinakamahalagang feature ng bersyong ito ng detalye ay ang kakayahang magtrabaho kasama ang maraming extension ng DOM.

Ano ang ibig sabihin ng "interface ng software"?

Ang interface ng salitang Ingles ay maaaring isalin bilang "contact area". Ang isang computer, sa halos pagsasalita, ay nakakaunawa lamang ng dalawang bagay: isang walang laman na bit at isang punong piraso. Ang wikang "sinasalita" ng isang computer ay maaaring isipin bilang isang walang katapusang string ng mga zero at isa, na nagbibigay ng walang katapusang bilang ng iba't ibang mga kumbinasyon.

Ang anumang code ng programa ay isang interpretasyon, naiintindihan ng programmer, ng mga "zero at isa" na ito kung saan gumagana ang computer. Kaya, ang anumang programming language ay isang human-machine interface.

Gumagana ang mga browser tulad ng ibang mga application sa computer. Binibigyang-kahulugan nila ang HTML, XML, CSS code, JavaScript, PHP, Perl, atbp. sa "mga zero at isa." Upang harapin ang multilinggwalismong ito, kailangan ang isang karaniwang plataporma. Ang platform na ito ay ang DOM - isang detalye na hindi nakadepende sa isang partikular na programming language o markup. Ito ay isang interface na maaaring magamit sa maraming sikat na programming language na nauugnay sa paglikha ng mga web page at may kakayahang maunawaan at bigyang-kahulugan ang mga bagay ng DOM.

DOM at mga browser

DOM at JavaScript

Sa JavaScript, ang tuktok ng hierarchical ladder ng mga object ng DOM, isang uri ng "conductor" sa interface na ito, ay ang object ng dokumento, at ang mga object ng DOM ay nagiging mga katangian nito, mga katangian ng mga katangian nito, atbp. Tinatawag din silang mga DOM node.

Mayroong 12 uri ng mga node sa DOM level 2. Ang bawat uri ng DOM node ay itinalaga ng isang pare-pareho na may natatanging pangalan. Karamihan sa mga node ay idinisenyo upang gumana sa XML. Sa HTML - JavaScript assembly na ginagawa namin, 5 uri lang ang magagamit. Ngunit kahit na ang "tip of the iceberg" na ito ay isang napaka "kumakalat na puno" na hindi maaaring saklawin sa isa o dalawang aralin.

Ang buong hanay ng mga constant ng uri ng node na tinukoy sa detalye ng W3C DOM (mga node na available para sa HTML - naka-highlight ang JavaScript sa kulay asul):

* Ang mga notasyon ay mga pangalan na tumutukoy sa format ng mga hindi na-parse na seksyon, ang format ng mga elemento na may katangian ng notasyon, o ang application program kung saan ang direktiba ay tinutugunan. (Hindi malinaw? Hindi pa rin ako sigurado.)

Istraktura ng dokumento sa DOM

Ang lahat ng mga object ng dokumento ay mga DOM node. Tingnan natin ang isang pangunahing dokumento:

Teksto ng talata

Narito ang isang diagram ng DOM tree nito:

Ang bawat node ay maaaring magkaroon ng mga child node (ang mga arrow ay humahantong sa kanila sa diagram). Ang object ng dokumento - ang base ng puno ng dokumento - ay isa ring node, ngunit wala itong parent node at may ilang mga katangian at pamamaraan na wala ang ibang mga node. Mayroon itong isang child node: element.

Ang isang elemento ay may dalawang child node: at , kung saan ang lahat ng elementong nakapaloob sa mga ito ay nagiging mga bata.

Pansin!

Ang "Element" at "tag" ay hindi magkasingkahulugan. Ang isang tag ay isang markup mark: - ito ay dalawang magkaibang tag. At ang isang elemento ay isang bagay na minarkahan ng mga tag na ito:

Teksto ng talata

Mga elemento, at

Naglalaman ng teksto sa loob. Ito ang mga node ng text ng kanilang anak. Ang elemento ay mayroon ding katangian: align="center" . Ang mga node ng katangian ay mga child node din ng mga elementong naglalaman ng mga ito.

Kapag nagtatrabaho sa mga DOM tree node, ginagamit ang kanilang mga katangian at pamamaraan.

Maliit na pagpapakilala

Uulitin ko muli: kapag na-access natin ang mga elemento ng pahina sa mga script, hindi lamang tayo nakikitungo sa wikang Javascript, kundi pati na rin sa interface ng DOM na naka-embed dito. Minsan kailangan mong magkaroon ng kamalayan sa mga ito, kung minsan maaari mong kalimutan "na tayo ay nagsasalita sa prosa."

Nagamit na namin ang ilang mga katangian at pamamaraan mula sa modelo ng object ng DOM sa ganitong paraan. Samakatuwid, paminsan-minsan ay magbibigay ako ng mga link sa mga nakaraang aralin.

Sa araling ito, hindi kami pupunta sa "akademikong" ruta, isinasaalang-alang ang lahat ng mga katangian ng lahat ng mga node sa lahat ng mga browser. Una, kilalanin natin ang pinakapraktikal at "walang salungatan" sa kanila.

Iyon ang dahilan kung bakit hindi kami magsisimula, gaya ng nakaugalian, gamit ang "mga pangunahing katangian": nodeName at nodeValue.

tagName

Nagbabalik ng string na naglalaman ng pangalan ng tag ng elemento. Ang lahat ng mga halaga ng tagName ay naglalaman lamang ng mga malalaking titik.

Syntax

Halimbawa

Pagsubok sa tagName property

document.write(document.getElementById( "testTagName").tagName)

Resulta

Pagsubok sa tagName property

innerHTML

Nakatagpo na namin ang ari-arian na ito (tingnan ang Aralin 10). At ngayon naiintindihan na natin kung saan ito nanggaling: "mula sa bahay."

Nagbibigay ng access sa mga nilalaman ng elemento. Tinutukoy hindi lamang ang nilalaman ng teksto, kundi pati na rin ang lahat ng mga tag ng HTML na matatagpuan sa loob ng elemento.

Ang pag-aari na ito ay hindi lamang para sa pagbabasa, ngunit para din sa pagbabago ng nilalaman.

Tandaan

Sa IE, ang innerHTML ay read-only para sa ilang elemento: lahat ito ay mga elemento ng talahanayan, maliban sa at , pati na rin at .

Halimbawa, gumawa kami ng isang walang laman na talahanayan na walang elemento at gusto naming ipasok ito sa programmatically sa pamamagitan ng innerHTML :

Magtatapon ang IE ng "hindi kilalang runtime error" at gagawin ng ibang mga browser ang pag-paste.

Kasabay nito, kung itatanong natin ang kasalukuyang nilalaman ng isang elemento , halimbawa, sa pamamagitan ng alert(document.getElementById("id").innerHTML) , pagkatapos ay gagana ito sa IE.

Syntax

Halimbawa

Pagsubok sa innerHTML property

Talata upang ipasok

Ang pangunahing tool para sa pagtatrabaho at mga dynamic na pagbabago sa page ay ang DOM (Document Object Model) - isang object model na ginagamit para sa XML/HTML na mga dokumento.

Ayon sa modelo ng DOM, ang isang dokumento ay isang hierarchy.
Ang bawat HTML tag ay bumubuo ng isang hiwalay na elemento ng node, ang bawat piraso ng teksto ay bumubuo ng isang elemento ng teksto, atbp.

Sa madaling salita, ang DOM ay isang representasyon ng isang dokumento bilang isang puno ng mga tag. Binubuo ang punong ito ng isang nested na istraktura ng mga tag kasama ang mga fragment ng text ng page, na bawat isa ay bumubuo ng hiwalay na node.

Buuin muna natin ang DOM tree para sa susunod na dokumento.

Pamagat: Napakahusay na Dokumento

Ang pinakalabas na tag ay , kaya ang puno ay nagsisimulang tumubo mula doon.

Mayroong dalawang node sa loob: at - nagiging mga child node sila ng .

Form ng mga tag mga node ng elemento(element node). Iniharap ang teksto mga node ng teksto(text node). Parehong pantay na node sa DOM tree.

Tingnan natin ngayon ang isang mas mahalagang pahina:

Tungkol sa moose Ang katotohanan tungkol sa moose.

Ang ugat na elemento ng hierarchy ay html. Mayroon siyang dalawang inapo. Ang una ay ang ulo, ang pangalawa ay ang katawan. At iba pa, ang bawat nested na tag ay anak ng tag sa itaas:

Sa figure na ito, ang asul ay nagpapahiwatig ng mga elemento ng node, ang itim ay nagpapahiwatig ng mga elemento ng teksto.

Ang puno ay nabuo ng mga asul na elemento ng node - mga HTML tag.

At ito ang hitsura ng isang puno kung iguguhit mo ito nang direkta sa isang HTML na pahina:

Sa pamamagitan ng paraan, ang puno sa figure na ito ay hindi isinasaalang-alang ang teksto na binubuo lamang ng mga character na whitespace. Halimbawa, ang naturang text node ay dapat na dumating kaagad pagkatapos ng . Tinatawag ang isang DOM na hindi naglalaman ng gayong "walang laman" na mga node "na-normalize".

Tingnan natin ang isang bahagyang mas kumplikadong dokumento.

Data ng Dokumento

• Maingat
• Impormasyon

Ang nangungunang tag ay html, mayroon itong ulo at katawan ng mga bata, at iba pa. Nagreresulta ito sa isang tag tree:

Mga Katangian

Sa halimbawang ito, ang mga node ay may mga sumusunod na katangian: style , class , id . Sa pangkalahatan, ang mga katangian ay itinuturing din na mga node sa DOM na ang magulang ay ang elemento ng DOM kung saan ang mga ito ay tinukoy.

Gayunpaman, sa web programming ay karaniwang hindi nila sinisilip ang jungle na ito, at isinasaalang-alang ang mga katangian bilang mga katangian lamang ng isang DOM node, na, tulad ng makikita natin sa ibang pagkakataon, ay maaaring itakda at baguhin sa kahilingan ng programmer.

Sa totoo lang, ito ay isang lihim, ngunit ang DOCTYPE ay isa ring DOM node, at matatagpuan sa DOM tree sa kaliwa ng HTML (ang katotohanang ito ay nakatago sa larawan).

P.S. Ito ay isang biro tungkol sa lihim, siyempre, ngunit hindi lahat ay talagang nakakaalam tungkol dito. Mahirap isipin kung saan maaaring maging kapaki-pakinabang ang gayong kaalaman...

Kapag nag-parse ng HTML, agad na lumilikha ang Internet Explorer na-normalize DOM kung saan ang mga node ay hindi nilikha mula sa walang laman na text.

Ang Firefox ay may ibang opinyon, lumilikha ito ng elemento ng DOM mula sa bawat fragment ng teksto.
Samakatuwid, sa Firefox ang puno ng dokumentong ito ay ganito ang hitsura:

Sa figure, para sa kaiklian, ang mga node ng teksto ay ipinahiwatig lamang ng isang hash. Ang katawan ay may 7 anak sa halip na 3.

May ipagyayabang din ang Opera. Maaari siyang magdagdag ng karagdagang walang laman na elemento "mula lamang sa kanyang sarili."

Upang makita ito, buksan ang dokumento. Ibinabalik nito ang bilang ng mga child node ng document.body , kabilang ang mga text node.

Nakakuha ako ng 3 para sa IE, 7 para sa Firefox at 8 (!?) para sa Opera.

Sa pagsasagawa, ang hindi pagkakatugma na ito ay hindi lumilikha ng malalaking problema, ngunit kailangan mong malaman ito. Halimbawa, ang pagkakaiba ay maaaring magpakita mismo sa kaso ng enumerating tree node.

Bakit, bukod sa magagandang guhit, kailangan natin ng hierarchical DOM?

Napakasimple:

Ang bawat elemento ng DOM ay isang bagay at nagbibigay ng mga katangian para sa pagmamanipula ng mga nilalaman nito, para sa pag-access sa mga magulang at mga anak.

Ginagamit ang object ng dokumento para sa pagmamanipula ng DOM.
Gamit ang dokumento , maaari mong makuha ang nais na elemento ng puno at baguhin ang nilalaman nito.

Halimbawa, nakukuha ng code na ito ang unang elemento na may ol na tag, nag-aalis ng dalawang elemento ng listahan nang sunud-sunod, at pagkatapos ay idaragdag ang mga ito sa reverse order:

Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

Para sa isang halimbawa kung paano gumagana ang naturang script, mag-click sa teksto sa pahina ng moose

Sa mga lumang tutorial at script, makikita mong direktang binago ang HTML code ng isang page sa pamamagitan ng pagtawag sa document.write .

Sa modernong mga script, ang pamamaraang ito ay halos hindi ginagamit ang mga kaso ng tamang paggamit nito ay mabibilang sa isang banda.

Iwasan ang document.write.. Maliban kung alam mo talaga ang iyong ginagawa (bakit ka nagbabasa ng tutorial noon - isa ka nang guro)

Tingnan natin ang mga paraan ng pag-access at katangian ng mga elemento ng DOM.

Ang lahat ng pag-access at pagbabago ng DOM ay nagmula sa object ng dokumento.

Magsimula tayo sa tuktok ng puno.

Ang tuktok na tag. Sa kaso ng isang tamang HTML na pahina, ito ay magiging .

Tag, kung naroroon sa dokumento (dapat).

Ang sumusunod na halimbawa, kapag na-click ang isang button, ay gagawa ng representasyon ng text ng mga object.documentElement at document.body. Ang string mismo ay nakasalalay sa browser, kahit na ang mga bagay ay pareho sa lahat ng dako.

function go() ( alert(document.documentElement) alert(document.body) )

Ang bawat elemento sa DOM ay may uri. Naka-store ang numero nito sa attribute na elem.nodeType

Sa kabuuan, mayroong 12 uri ng mga elemento sa DOM.

Karaniwang isa lang ang ginagamit: Node.ELEMENT_NODE, na ang bilang ay 1. Ang mga elemento ng ganitong uri ay tumutugma sa mga HTML tag.

Minsan ay kapaki-pakinabang din ang uri ng Node.TEXT_NODE, na katumbas ng 3. Ito ay mga elemento ng teksto.

Ang iba pang mga uri ay hindi ginagamit sa javascript programming.

Ang sumusunod na halimbawa, kapag nag-click sa isang button, ay magpi-print ng mga uri ng document.documentElement at pagkatapos ay ang uri ng huling anak ng document.body node. Ito ay isang text node.

function go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) Text

Halimbawa, ito ang magiging hitsura ng dokumento mula sa halimbawa sa itaas sa isang browser kung ang bawat nakikitang elemento ay napapalibutan ng isang frame na may numero ng nodeType sa kanang sulok sa itaas.

...Data

• Maingat
• Impormasyon

Ang mga elemento lamang sa loob ng katawan ang ipinapakita dito, dahil sila lamang ang ipinapakita sa pahina. Para sa mga elemento ng uri 1 (mga tag), ang kaukulang tag ay ipinahiwatig sa mga bracket para sa mga elemento ng teksto (uri 3), mayroon lamang isang numero.