Introducere. Lucrul cu modelul DOM Ce este modelul obiect document dom

În această lecție, ne vom uita la ce este DOM-ul, de ce este necesar și cum este construit.

Ce este DOM?

Browserul, atunci când solicită o pagină și primește codul HTML sursă ca răspuns de la server, trebuie mai întâi să o analizeze. În procesul de parsare și parsare a codului HTML, browserul construiește un arbore DOM pe baza acestuia.

După efectuarea acestei acțiuni și a altora, browserul continuă să redeze pagina. În acest proces, el folosește, desigur, deja arborele DOM pe care l-a creat, nu HTML-ul original.

DOM este modelul de obiect de document pe care browserul îl creează în memoria computerului pe baza codului HTML pe care îl primește de la server.

Pentru a spune simplu, codul HTML este textul unei pagini, iar DOM este un set de obiecte asociate create de browser la analizarea textului acesteia.

În Chrome, codul sursă al paginii pe care o primește browserul poate fi vizualizat în fila „Sursă” din panoul „Instrumente pentru dezvoltatori web”.

În Chrome, nu există niciun instrument care să poată fi utilizat pentru a vizualiza arborele DOM pe care l-a creat. Dar există o reprezentare a acestui arbore DOM sub formă de cod HTML, este disponibil în fila „Elemente”. Această reprezentare DOM este, desigur, mult mai convenabilă pentru a lucra cu un dezvoltator web. Prin urmare, nu există niciun instrument care ar reprezenta DOM-ul sub forma unei structuri arborescente.

Obiectele din acest model sunt formate din aproape tot ceea ce este în HTML (etichete, conținut text, comentarii etc.), inclusiv documentul în sine. Relațiile dintre aceste obiecte din model se formează pe baza modului în care elementele HTML sunt situate unul față de celălalt în cod.

În acest caz, DOM-ul documentului după formarea acestuia poate fi modificat. Când DOM-ul se schimbă, browserul redesenează imaginea paginii aproape instantaneu. Drept urmare, redarea noastră a paginii este întotdeauna conformă cu DOM .

Pentru a citi și modifica DOM-ul în mod programatic, browser-ul ne pune la dispoziție un API DOM sau, cu alte cuvinte, o interfață de programare. Într-un mod simplu, API-ul DOM este o colecție de un număr mare de diverse obiecte, proprietățile și metodele lor pe care le putem folosi pentru a citi și modifica DOM .

Pentru a lucra cu DOM în cele mai multe cazuri, este folosit JavaScript, deoarece. până în prezent, este singurul limbaj de programare în care scripturile pot fi executate într-un browser.

De ce avem nevoie de un API DOM? Avem nevoie de el pentru a putea folosi JavaScript pentru a schimba pagina din mers, de exemplu. fă-l dinamic și interactiv.

API-ul DOM ne pune la dispoziție (dezvoltatorilor) un număr mare de metode prin care putem schimba totul din pagină, precum și interacționa cu utilizatorul. Acestea. această interfață de programare ne permite să creăm interfețe complexe, formulare, să procesăm acțiunile utilizatorului, să adăugăm și să eliminăm diverse elemente de pe pagină, să le modificăm conținutul, proprietățile (atributele) și multe altele.

Acum, pe web, practic nu există site-uri în scripturile cărora nu ar exista nicio lucrare cu DOM.

Care este codul HTML pentru o pagină?

Înainte de a trece la studiul modelului obiect document, trebuie mai întâi să vă amintiți care este codul sursă al unei pagini web (document HTML).

Codul sursă al unei pagini web este format din etichete, atribute, comentarii și text. Etichetele sunt sintaxa de bază a HTML. Majoritatea sunt în perechi. În acest caz, unul dintre ele este cel de deschidere, iar celălalt este cel de închidere. O astfel de pereche de etichete formează un element HTML. Elementele HTML pot avea Opțiuni suplimentare- atribute.

Într-un document pentru a crea un anumit marcaj, unele elemente sunt în interiorul altora. Ca rezultat, un document HTML poate fi gândit ca un set de elemente HTML imbricate.

Ca exemplu, luați în considerare următorul html cod:

Titlul paginii Titlul articolului Secțiunea articolului

Conținutul articolului

În acest cod, elementul rădăcină este html . Capul și elementele corpului sunt imbricate în el. Elementul head conține titlul , în timp ce elementul body conține h1 și div . Elementul div la rândul său conține h2 și p .

Acum să ne uităm la modul în care browserul construiește un arbore DOM pe baza codului HTML.

Cum este construit arborele DOM al documentului?

După cum s-a descris deja mai sus, browserul construiește un arbore bazat pe elemente HTML și alte entități. cod sursa pagini. Atunci când se efectuează acest proces, se ia în considerare imbricarea elementelor unul în celălalt.

Drept urmare, browserul folosește arborele DOM rezultat nu numai în activitatea sa, ci ne oferă și un API pentru operare convenabilă cu el prin JavaScript.

La construirea DOM-ului, browserul creează obiecte (noduri ale arborelui DOM) din elemente HTML, text, comentarii și alte entități ale acestui limbaj.

În cele mai multe cazuri, dezvoltatorii web sunt interesați doar de obiecte (noduri) formate din elemente HTML.

În același timp, browserul nu creează doar obiecte din elemente HTML, ci și le conectează între ele prin anumite conexiuni, în funcție de modul în care fiecare dintre ele se raportează la celălalt în cod.

Elementele care se află direct într-un element sunt copii ale acestuia. Și este un părinte pentru fiecare dintre ei. În plus, toate aceste elemente în relație între ele sunt frați (frați).

Mai mult, în HTML, orice element are întotdeauna un părinte (elementul HTML în care se află direct). În HTML, un element nu poate avea mai mulți părinți. Singura excepție este elementul html. Nu are părinte.

Pentru a obține arborele DOM pe măsură ce browserul îl construiește, trebuie doar să „aranjați” toate elementele în funcție de relația lor între ele.

Crearea arborelui DOM se face de sus în jos.

Rădăcina arborelui DOM este întotdeauna documentul însuși (nodul documentului). În plus, arborele este construit în funcție de structura codului HTML.

De exemplu, codul HTML la care ne-am uitat mai sus ar avea următorul arbore DOM:

În partea de sus a acestui arbore se află nodul document. Acest nod este asociat cu html, este copilul său. Nodul html este format din elementul html(...). Nodurile cap (...) și body (...) au o relație de părinte cu html. În relație unul cu celălalt, sunt frați, pentru că ai un singur parinte. Nodul principal este legat de titlu (lt;titlu>...) și este copilul său. Nodurile h1 și div sunt legate de body , pentru ei este părintele. Nodul div este legat de h2(...) și p(), ele sunt copiii acestuia.

Arborele începe, după cum sa menționat mai sus, de la documentul obiect (nod). La rândul său, are un nod copil format din elementul html (...). Elementele cap(...) și corp(...) sunt în html și, prin urmare, sunt copiii săi. În continuare, nodul principal este părintele titlului (lt;titlu>...). Elementele h1 și div sunt imbricate în interiorul corpului, ceea ce înseamnă că sunt copiii acestuia. Div-ul conține direct elementele h2(...) și p(). Aceasta înseamnă că nodul div pentru fiecare dintre ele este părintele.

Acesta este modul în care arborele DOM este pur și simplu construit în browser pe baza codului HTML.

De ce trebuie să știți cum este construit un arbore DOM? În primul rând, este o înțelegere a mediului în care doriți să schimbați ceva. În al doilea rând, majoritatea acțiunilor când se lucrează cu DOM se rezumă la găsirea (selectarea) elementelor necesare. Neștiind cum este aranjat arborele DOM și conexiunile dintre noduri, găsiți câteva anumit element va fi destul de greu.

Exercițiu

Pe baza arborelui DOM prezentat în figură, creați codul HTML.

Lucrul cu modelul DOM

Fiecare obiect Window are o proprietate document care se referă la un obiect Document. Acest obiect Document nu este un obiect independent. Este obiectul central al unui API bogat cunoscut sub numele de Document Object Model (DOM), care definește modul în care este accesat conținutul unui document.

Prezentare generală a DOM

Document Object Model (DOM) este o interfață fundamentală de programare a aplicațiilor care oferă capacitatea de a lucra cu conținutul documentelor HTML și XML. Interfața de programare a aplicațiilor (API) DOM nu este deosebit de complexă, dar există multe caracteristici arhitecturale de care ar trebui să fii conștient.

În primul rând, ar trebui să se înțeleagă că cuibărit elemente HTML sau documentele XML sunt reprezentate ca un arbore de obiecte DOM. Vizualizarea arborescentă a unui document HTML conține noduri reprezentând elemente sau etichete precum și

Și noduri reprezentând linii de text. Un document HTML poate conține și noduri reprezentând comentarii HTML. Luați în considerare următorul document HTML simplu:

Exemplu de document Acesta este un document HTML

Exemplu simplu text.

Reprezentarea DOM a acestui document este prezentată în următoarea diagramă:

Pentru cei care nu sunt încă familiarizați cu structurile arborescente în programarea computerelor, este util să știe că terminologia pentru a le descrie a fost împrumutată din arborii genealogic. Este apelat nodul imediat deasupra nodului dat părintească cu privire la acest nod. Nodurile care sunt la un nivel sub alt nod sunt filiale cu privire la acest nod. Sunt numite noduri care sunt la același nivel și au același părinte surori. Nodurile situate orice număr de niveluri sub alt nod sunt copiii acestuia. Părinte, bunicul și orice alte noduri de deasupra acestui nod sunt strămoșii săi.

Fiecare dreptunghi din această diagramă este un nod de document, care este reprezentat de un obiect Node. Rețineți că figura prezintă trei tipuri diferite de noduri. Rădăcina arborelui este nodul Document, care reprezintă întregul document. Nodurile care reprezintă elemente HTML sunt noduri de tip Element, iar nodurile care reprezintă text sunt noduri de tip Text. Document, Element și Text sunt subclase ale clasei Node. Document și Element sunt cele mai importante două clase din DOM.

Tipul de nod și subtipurile sale formează ierarhia tipurilor prezentată în diagrama de mai jos. Rețineți diferențele formale dintre tipurile generice Document și Element și tipurile HTMLDocument și HTMLElement. Tipul Document reprezintă un document HTML și XML, iar clasa Element reprezintă un element al documentului respectiv. Subclasele HTMLDocument și HTMLElement reprezintă în mod specific un document HTML și elementele acestuia:

În această diagramă, trebuie menționat și faptul că un numar mare subtipuri ale clasei HTMLElement care reprezintă tipuri concrete de elemente HTML. Fiecare dintre acestea definește proprietăți JavaScript care reflectă atributele HTML ale unui anumit element sau grup de elemente. Unele dintre aceste clase specifice definesc proprietăți sau metode suplimentare care nu reflectă sintaxa limbajului de marcare HTML.

Selectarea elementelor documentului

Munca majoritara programe clientîn JavaScript este oarecum legat de manipularea elementelor documentului. În timpul execuției, aceste programe pot folosi variabila globală document, care se referă la obiectul Document. Totuși, pentru a efectua orice manipulare asupra elementelor documentului, programul trebuie să obțină cumva, sau să selecteze, obiectele Element care se referă la acele elemente ale documentului. DOM definește mai multe moduri de selectare a elementelor. Puteți selecta un element sau elemente ale unui document:

prin valoarea atributului id;

prin valoarea atributului nume;

după numele etichetei;

după numele clasei sau claselor CSS;

pentru a se potrivi cu un anumit selector CSS.

Toate aceste tehnici de selecție a elementelor sunt descrise în următoarele subsecțiuni.

Selectarea elementelor după valoarea atributului id

Toate elementele HTML au atribute id. Valoarea acestui atribut trebuie să fie unică în document - niciun element din același document nu trebuie să aibă aceeași valoare a atributului id. Selectați elementul după valoare unică Atributul id poate fi realizat folosind metoda getElementById() a obiectului Document:

Var section1 = document.getElementById("section1");

Acesta este cel mai simplu și mai comun mod de a selecta elemente. Dacă scriptul trebuie să poată manipula un anumit set de elemente ale documentului, atribuiți valori atributelor id ale acelor elemente și utilizați capacitatea de a le căuta după acele valori.

Versiuni Internet Explorer sub IE8, metoda getElementById() caută valorile atributelor id fără a ține seama de majuscule și minuscule și returnează, de asemenea, elemente care se potrivesc cu valoarea atributului name.

Selectarea elementelor după valoarea atributului nume

Atributul nume HTML a fost inițial destinat pentru denumirea elementelor de formular, iar valoarea acestui atribut a fost folosită atunci când datele formularului au fost trimise la server. La fel ca atributul id, atributul name atribuie un nume unui element. Cu toate acestea, spre deosebire de id, valoarea atributului name nu trebuie să fie unică: mai multe elemente pot avea același nume simultan, ceea ce este destul de comun atunci când este utilizat în butoanele radio și formularele de casete de selectare. De asemenea, spre deosebire de id, atributul name este permis numai pe anumite elemente HTML, inclusiv formulare, elemente de formular și elemente și .

Puteți selecta elemente HTML pe baza valorilor atributelor lor de nume folosind metoda getElementsByName() a obiectului Document:

Var radiobuttons = document.getElementsByName("culoare_favorită");

Metoda getElementsByName() nu este definită de clasa Document, ci de clasa HTMLDocument, deci este disponibilă numai în documentele HTML și nu este disponibilă în documentele XML. Returnează un obiect NodeList care se comportă ca o matrice numai în citire de obiecte Element.

În IE, metoda getElementsByName() returnează, de asemenea, elemente ale căror valori ale atributului id se potrivesc cu valoarea specificată. Pentru a asigura compatibilitatea cu versiuni diferite browsere, trebuie să fiți atenți la alegerea valorilor atributelor și să nu utilizați aceleași șiruri pentru valorile atributelor nume și id.

Selectarea elementelor după tip

Metoda getElementsByTagName() a obiectului Document vă permite să selectați toate elementele HTML sau XML de tipul specificat (sau după numele etichetei). De exemplu, pentru a obține un obiect asemănător matricei numai pentru citire care conține obiectele Element ale tuturor elementelor din document, puteți face următoarele:

var spans = document.getElementsByTagName("span");

La fel ca metoda getElementsByName(), getElementsByTagName() returnează un obiect NodeList. Elementele documentului sunt incluse în tabloul NodeList în aceeași ordine în care apar în document, adică. primul element

Într-un document, puteți alege:

Var firstParagraph = document.getElementsByTagName("p");

Numele etichetelor HTML nu țin cont de majuscule și minuscule, iar când getElementsByTagName() este aplicat unui document HTML, se compară cu numele etichetei fără a ține seama de majuscule și minuscule. Variabila spans creată mai sus, de exemplu, va include și toate elementele care sunt scrise ca .

Puteți obține un NodeList care conține toate elementele dintr-un document prin trecerea wildcardului „*” la metoda getElementsByTagName().

În plus, clasa Element definește și metoda getElementsByTagName(). Acționează exact ca versiunea metodei din clasa Document, dar selectează doar elementele care sunt copii ale elementului pe care este apelată metoda. Adică, găsiți toate elementele din interiorul primului element

Este posibil astfel:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

Din motive istorice, clasa HTMLDocument definește proprietăți speciale pentru accesarea anumitor tipuri de noduri. Proprietăți imagini, formeȘi link-uri, de exemplu, se referă la obiecte care se comportă ca matrice numai pentru citire care conțin elemente , Și (dar numai acele etichete , care au un atribut href). Aceste proprietăți se referă la obiecte HTMLCollection, care seamănă mult cu obiectele NodeList, dar pot fi indexate în plus după valorile atributelor id și name.

Obiectul HTMLDocument definește, de asemenea, proprietățile sinonime de încorporare și pluginuri, care sunt colecții de elemente HTMLCollection. Proprietatea ancore nu este standard, dar poate fi folosită pentru a accesa elemente A care are un atribut nume, dar nu un atribut href. Proprietatea scripts este definită de standardul HTML5 și este o colecție de elemente HTMLCollection.

În plus, obiectul HTMLDocument definește două proprietăți, fiecare dintre acestea nu se referă la o colecție, ci la un singur element. Proprietatea document.body reprezintă un element de document HTML, iar proprietatea document.head reprezintă . Aceste proprietăți sunt întotdeauna definite în document: chiar dacă nu există elemente și în documentul original, browserul le va crea implicit. Proprietatea documentElement a obiectului Document se referă la elementul rădăcină al documentului. În documentele HTML, acesta reprezintă întotdeauna .

Selectarea elementelor după clasa CSS

Valoarea atributului clasei HTML este o listă de zero sau mai mulți identificatori separați prin spații. Face posibilă definirea unor seturi de elemente de document înrudite: orice elemente care au același identificator în atributul de clasă fac parte din același set. Clasa de cuvinte este rezervată în JavaScript, astfel încât JavaScript la nivel de client utilizează proprietatea className pentru a stoca valoarea atributului de clasă HTML.

De obicei, atributul de clasă este utilizat împreună cu foile de stil în cascadă CSS pentru a aplica un stil de afișare comun tuturor membrilor unui set. Totuși, în plus, standardul HTML5 definește metoda getElementsByClassName(), care vă permite să selectați seturi de elemente de document pe baza identificatorilor din atributele clasei lor.

La fel ca metoda getElementsByTagName(), metoda getElementsByClassName() poate fi apelată atât pe documente HTML, cât și pe elemente HTML și returnează un obiect NodeList „în direct” care conține toți descendenții documentelor sau elementelor care corespund criteriilor de căutare.

Metoda getElementsByClassName() acceptă un singur argument șir, dar șirul în sine poate conține mai mulți identificatori separați prin spații. Toate elementele ale căror atribute de clasă conțin toți identificatorii specificați vor fi considerate potrivite. Ordinea identificatorilor nu contează. Rețineți că atât în ​​atributul de clasă, cât și în argumentul metodei getElementsByClassName(), identificatorii de clasă sunt separați prin spații, nu prin virgule.

Următoarele sunt câteva exemple de utilizare a metodei getElementsByClassName():

// Găsiți toate elementele cu clasa "warning" var warnings = document.getElementsByClassName("warning"); // Găsiți toți descendenții elementului cu id "log" // cu clasele "error" și "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName(„eroare fatală”);

Selectarea elementelor folosind selectoare CSS

Foile de stil în cascadă CSS au constructe sintactice foarte puternice cunoscute sub numele de selectoare care vă permit să descrieți elemente sau seturi de elemente dintr-un document. Împreună cu standardizarea selectoarelor CSS3, se definește un alt standard W3C cunoscut sub numele de API Selectors Metode JavaScript pentru a obține elemente care se potrivesc cu selectorul specificat.

Cheia acestui API este metoda querySelectorAll() a obiectului Document. Este nevoie de un singur argument șir cu un selector CSS și returnează un obiect NodeList reprezentând toate elementele din document care se potrivesc cu selectorul.

În plus față de metoda querySelectorAll(), obiectul document definește și o metodă querySelector() similară cu metoda querySelectorAll(), cu excepția faptului că returnează doar primul element care se potrivește (în ordinea documentului), sau null dacă nu există elemente care se potrivesc .

Aceste două metode sunt definite și de clasa Elements. Când sunt apelați pe un element, întregul document este căutat pentru o potrivire cu selectorul dat, iar apoi rezultatul este filtrat astfel încât să rămână doar descendenții elementului utilizat. Această abordare poate părea contraintuitivă, deoarece înseamnă că șirul selector poate include strămoșii elementului care se potrivește.

Structura documentului și navigarea documentelor

După selectarea unui element de document, uneori este necesar să găsiți părți ale documentului legate structural (părinte, frați, element copil). Obiectul Document poate fi gândit ca un arbore de obiecte Node. Tipul Nod definește proprietăți care vă permit să navigați printr-un astfel de arbore. Există o altă interfață de aplicație pentru navigarea prin document, ca un arbore de obiecte Element.

Documentele ca arbori de noduri

Obiectul Document, obiectele sale Element și obiectele Text care reprezintă fragmentele de text din document sunt toate obiecte Node. Clasa Node definește următoarele proprietăți importante:

parentNode

Nodul părinte al acestui nod sau nul pentru nodurile care nu au părinte, cum ar fi Document.

childNodes

Un obiect asemănător matricei care poate fi citit (NodeList) care oferă o reprezentare a nodurilor copil.

primulCopil, ultimulCopil

Primul și ultimul nod copil sau nul dacă nodul dat nu are copii.

următorul Frate, precedentul Frate

Nodurile frate următoare și anterioare. Nodurile Brother sunt două noduri care au același părinte. Ordinea lor corespunde cu ordinea din document. Aceste proprietăți leagă nodurile într-o listă dublu legată.

nodeType

Tipul acestui nod. Nodurile de tip Document au valoarea 9 în această proprietate. Noduri de tip Element - valoare 1. Noduri de text de tip Text - valoare 3. Noduri de tip Comentarii - valoare 8 și noduri de tip DocumentFragment - valoare 11.

nodeValue

Conținutul text al nodurilor Text și Comentariu.

nodeName

Numele etichetei unui element în care toate caracterele sunt convertite în majuscule.

Cu aceste proprietăți ale clasei Node, vă puteți referi la al doilea nod copil al primului nod copil al obiectului Document, așa cum se arată mai jos:

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

Să presupunem că documentul în cauză arată astfel:

Testează Hello World!

Apoi al doilea nod copil al primului nod copil va fi elementul . Conține valoarea 1 în proprietatea nodeType și valoarea „BODY” în proprietatea nodeName.

Cu toate acestea, rețineți că acest API este extrem de sensibil la modificările din textul documentului. De exemplu, dacă adăugați o singură linie nouă între etichetele și în acest document, acel caracter de linie nouă va deveni primul nod copil (nodul Text) al primului nod copil, iar al doilea nod copil va fi elementul, nu .

Documentele ca arbori de elemente

Când elementele documentului în sine sunt de interes principal, mai degrabă decât textul din ele (și spațiul alb dintre ele), este mult mai convenabil să utilizați un API care vă permite să interpretați documentul ca un arbore de obiecte Element, ignorând textul. și noduri de comentariu care fac, de asemenea, parte din document.

Prima parte a acestui API este proprietatea copiilor a obiectelor Element. La fel ca proprietatea childNodes, valoarea sa este un obiect NodeList. Totuși, spre deosebire de proprietatea childNodes, lista de copii conține doar obiecte Element.

Rețineți că nodurile Text și Comment nu au noduri copil. Aceasta înseamnă că proprietatea Node.parentNode descrisă mai sus nu returnează niciodată noduri Text sau Comment. Valoarea proprietății parentNode a oricărui obiect Element va fi întotdeauna un alt obiect Element sau rădăcina arborelui, un obiect Document sau DocumentFragment.

A doua parte a API-ului de navigare a elementelor de document este proprietățile obiectului Element, similare cu proprietățile de accesare a nodurilor copil și frate ale obiectului Node:

firstElementChild, lastElementChild

Similar cu proprietățile firstChild și lastChild, dar returnează elemente copil.

nextElementSibling, previousElementSibling

Similar cu proprietățile nextSibling și previousSibling, dar returnează elemente frate.

childElementCount

Cantitate elemente copil. Returnează aceeași valoare ca proprietatea children.length.

Aceste proprietăți de acces pentru copii și frați sunt standardizate și implementate în toate browserele actuale cu excepția IE.

innerHTML
vartext = element.innerHTML;
element.innerHTML = "";
Atribuirea unui nou innerHTML suprascrie codul, chiar dacă noua valoare este adăugată la cea actuală (+=). Scripturile adăugate în acest fel nu sunt executate.

outerHTML
Conține întregul element și nu poate fi modificat. Din punct de vedere tehnic, scrierea la această proprietate creează un nou element care îl înlocuiește pe cel vechi. Referințele la elementul vechi din variabile nu se modifică.

date
textNode.data - conținutul nodurilor text și al comentariilor

textContent
element.textContent - text din interiorul elementului fără etichete.
Există, de asemenea, o proprietate innerText non-standard care are multe în comun cu textContent .

Vizibilitatea elementului

ascuns
element.hidden = adevărat
Atributul ascuns nu este acceptat în IE11.

Atribute

Cele mai multe atribute standard din DOM devin proprietăți ale obiectului:
element.id = „id”
Pentru atributele non-standard, nu este creată nicio proprietate (nedefinită)

Puteți crea propriile proprietăți DOM:
element.myData = (nume:"Ioan", lastName:"Smith");
si metode:
element.myFunc = function()(alert this.nodeName);
Acest lucru funcționează deoarece nodurile DOM sunt obiecte JavaScript obișnuite. Aceste proprietăți și metode non-standard nu afectează afișarea etichetei și sunt vizibile numai în JavaScript.

Accesarea atributelor etichetei:
element.hasAttribute(nume)
element.getAttribute(nume)
element.setAttribute(nume, valoare)
element.removeAttribute(nume)
element.attributes este o pseudo-matrice de atribute.

Atributele nu țin seama de majuscule și minuscule (html), iar proprietățile sunt sensibile la majuscule și minuscule (javaScript).
Valoarea atributului este întotdeauna un șir.

Atribut: a.getAttribute("href") - afișează exact ceea ce este în HTML
Proprietate: a.href - poate diferi de valoarea atributului
Cel mai adesea, o proprietate depinde de un atribut, dar nu invers. Modificarea proprietății nu afectează atributul.

Lucrul cu clasele

Atributul de clasă are două proprietăți:
className - șir
classList - obiect

Metode obiect classList:
element.classList.contains("clasa") - verifica daca un obiect contine o clasa data
element.classList.add("clasa")
element.classList.remove("clasa")
element.classList.toggle("clasa")

classList este o pseudo-matrice, poate fi iterată printr-o buclă for.

atributele datelor

Atributele de date personalizate sunt disponibile nu numai ca atribute, ci și prin proprietatea setului de date
date-about = „o anumită valoare”
element.set.date.despre

Ordinea nodurilor

parinte.contine(copil) - adevarat sau fals
verifică dacă nodul copil este imbricat în părinte

nodeA.compareDocumentPosition(nodeB) - Oferă informații despre conținutul și ordinea relativă a elementelor. Valoarea returnată este o mască de biți:

Adăugarea și eliminarea nodurilor

vardiv = document.createElement("div")
document.createTextNode(„text”)

parent.appendChild(element) - elementul este adăugat la sfârșitul părintelui
parent.insertBefore(element, nextSibling) - elementul este adăugat înainte de nextSibling
parent.insertBefore(element, parent.firstChild) - adăugat la început
parent.insertBefore(element, null) - funcționează ca appendChild
Toate metodele de inserare returnează nodul inserat.
Când mutați un element, nu trebuie să îl eliminați mai întâi din vechiul loc, metodele de inserare fac acest lucru automat.

element.insertAdjacentHTML(where, html) - inserați cod HTML arbitrar oriunde în document. Unde specifică unde se inserează html în raport cu elementul - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(unde, newElement)
element.insertAdjacentText(unde, text)
ultimele două metode nu sunt acceptate în Firefox

node.append(...nodes) - inserează noduri la sfârșitul nodului,
node.prepend(...nodes) - inserează noduri la începutul nodului,
node.after(...nodes) - inserează noduri după nod ,
node.before(...nodes) - inserează noduri înaintea nodului,
node.replaceWith(...nodes) - Inserează noduri în loc de node .
aici nodurile sunt noduri sau șiruri, în orice număr și combinație, separate prin virgule.

var fragment = document.createDocumentFragment() - simulează un nod DOM care dispare atunci când este inserat într-un document, lăsând doar copii. ÎN browsere moderne Nu se recomandă.

element.cloneNode(true) - copie profundă a elementului
element.cloneNode(false) - copie fără copii

parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() - elimină elementul direct, fără referire la părinte.
Metodele returnează gazda la distanță

W3C
creatorii DOM

Înainte de a începe să înveți tehnologia DOM, ar trebui să cunoști deja elementele de bază Limbi HTML, CSS și , pe lângă asta, trebuie să citiți articole despre formulare HTML (știți cum să creați butoane, câmpuri de text etc.).

DOM (model de obiect document) Document Object Model creat de W3C (World Wide Web Consortium) - un consorțiu al World Wide Web.

DOM este o tehnologie web care vă permite să manipulați etichetele HTML ale unei pagini prin limbajul JavaScript. DOM-ul reprezintă etichetele HTML ca obiecte cu proprietăți și metode. Fiecare etichetă HTML (obiect) dintr-o pagină HTML, datorită DOM, are propria sa adresă unică. Prin accesarea acestei adrese, JavaScript poate manipula eticheta HTML.

Adresele din DOM sunt generate automat, dar sunt prea lungi și complexe. Prin urmare, creatorii DOM au făcut posibil ca programatorii web să scrie ei înșiși adrese scurte, prin selectorul de id (identificator unic).

Cum funcționează DOM-ul

Browserul, când deschide o pagină HTML, creează o structură DOM pe baza etichetelor sale, în care fiecare etichetă HTML apare ca un obiect cu propria sa adresă unică. Structura DOM este de asemenea numită Arborele DOM, acest arbore este format din noduri care sunt etichete HTML, atribute, text.

Istoria DOM

Inițial, DOM-ul nu era standardizat și cele două existau la acea vreme Browser Netscape Navigator și Internet Explorer au creat DOM-ul pe cont propriu. La acea vreme, programatorii web trebuiau să învețe două versiuni ale DOM.

Pe acest moment, W3C a standardizat DOM-ul și toate browserele încearcă să adere la acest standard.

Această secțiune oferă o scurtă introducere în Document Object Model (DOM) - ce este DOM, cum sunt furnizate structurile documentelor HTML și XML și cum să interacționați cu acestea. Această secțiune conține informații de bază și exemple.

Ce este Document Object Model (DOM)?

Document Object Model (DOM) este o interfață de programare (API) pentru documente HTML și XML. DOM oferă o reprezentare structurată a unui document și definește modul în care acea structură poate fi accesată din programe care pot schimba conținutul, stilul și structura documentului. O reprezentare DOM constă dintr-un grup structurat de noduri și obiecte care au proprietăți și metode. În esență, DOM conectează o pagină web la limbaje de scripting sau limbaje de programare.

O pagină web este un document. Documentul poate fi prezentat atât în ​​fereastra browserului, cât și în codul HTML propriu-zis. Oricum, este același document. DOM oferă o altă modalitate de a reprezenta, stoca și gestiona acest document. DOM acceptă pe deplin reprezentarea orientată pe obiecte a unei pagini web, făcând posibilă schimbarea acesteia folosind un limbaj de scripting precum JavaScript.

Cum este accesibil DOM-ul?

Nu trebuie să faci nimic special pentru a lucra cu DOM. Diverse browsere au implementări DOM diferite, aceste implementări arată grade diferite de conformitate cu standardul DOM actual (acesta este un subiect pe care am încercat să nu îl acoperim în această documentație), dar fiecare browser folosește propriul DOM pentru a face paginile web accesibile limbilor de scripting.

Când creați un script folosind elementul sau includeți o instrucțiune într-o pagină web pentru a încărca scriptul, puteți începe imediat să utilizați API-ul folosind elementele fie pentru a interacționa cu documentul în sine, fie pentru a obține descendenții acestui document, de exemplu. diverse elemente Pe pagina. Programarea DOM poate fi la fel de simplă ca afișarea unui mesaj folosind o funcție de obiect sau utilizarea unor metode DOM mai complexe care creează conținut nou, așa cum se arată în exemplul următor:

În exemplul următor, codul JavaScript este definit în interiorul unui element, codul dat setează funcția când documentul este încărcat (când întregul DOM este disponibil pentru utilizare). Această funcție creează un nou element H1, adaugă text la acel element și apoi adaugă H1 în arborele documentului:

< html > < head > < script >// rulează această funcție când documentul este încărcat în fereastra. onload = funcția () ( // creează mai multe elemente // într-un spațiu gol Pagina HTML antet = document. createElement("h1"); heading_text = document. createTextNode("Cap mare!"); rubrica. appendChild(text_tit); document. corp. appendChild(titlu); )< body >Tipuri importante de date

Această secțiune are scopul de a descrie pe scurt tipuri variateși obiecte într-un mod simplu și accesibil. Există o serie de tipuri de date diferite care sunt utilizate în API de care ar trebui să le cunoașteți. Pentru simplitate, sintaxa exemplelor din această secțiune se referă în mod obișnuit la noduri ca element s, matrice de noduri ca nodeList s (sau doar elemente s), iar atributele nodului ca pur și simplu atribute s.

Mai jos este un tabel cu descriere scurta aceste tipuri de date.

document	Atunci când un membru returnează un obiect de tip document (de exemplu, proprietatea proprietarDocument a elementului returnează documentul căruia îi aparține), acel obiect document este propriul său obiect rădăcină. Secțiunea de referință a documentului DOM descrie obiectul documentului. element
element	denotă un element sau un nod de tip element returnat de un membru al API-ului DOM. În loc să spunem că metoda document.createElement() returnează o referință la un nod, vom spune doar că acest element returnează un element care tocmai a fost creat în DOM. obiectele element implementează interfața elementului DOM și, de asemenea, interfața mai generală Node. Ambele interfețe sunt incluse în acest ajutor. nodeList
NodeList	o matrice de elemente, precum cea returnată de metoda Document.getElementsByTagName(). Elementele specifice dintr-o matrice sunt accesate prin index în două moduri: listă.articol(1) Aceste metode sunt echivalente. În primul mod, item() este singura metodă a obiectului NodeList. Acesta din urmă folosește sintaxa matricei normale pentru a obține a doua valoare din listă.
atribute	Când un atribut este returnat de un membru API (de exemplu, metoda createAttribute()), acesta va fi o referință la un obiect care oferă o interfață specială (deși mică) pentru atribute. Atributele sunt noduri în DOM, la fel ca elementele, deși le puteți folosi rar ca atare.
numităNodeMap	namedNodeMap este ca o matrice, dar elementele sunt accesibile prin nume sau index. Accesul prin index este doar pentru comoditatea enumerarii. elementele nu au o ordine anume în listă. Acest tip de date are o metodă item() în acest scop și, de asemenea, puteți adăuga și elimina elemente din namedNodeMap

interfețe DOM

Acest ghid este despre obiecte și lucruri reale pe care le puteți folosi pentru a gestiona ierarhia DOM. Există multe puncte în care înțelegerea modului în care funcționează poate fi surprinzătoare. De exemplu, un obiect care reprezintă un element de formular HTML își ia proprietatea name din interfața HTMLFormElement și proprietatea className din interfața HTMLElement. În ambele cazuri, proprietatea dorită se află pe acel obiect formular.

De asemenea, relația dintre obiecte și interfețele pe care le implementează în DOM poate fi surprinzătoare, iar această secțiune încearcă să vorbească puțin despre interfețele care există în DOM și despre cum pot fi accesate.

Interfețe și obiecte

Multe obiecte implementează acțiuni din mai multe interfețe. Obiectul tabel, de exemplu, implementează o specială care include metode precum createCaption și insertRow . Dar, deoarece este un tabel, este și un element HTML, table implementează interfața Element descrisă în secțiunea . În cele din urmă, deoarece un element HTML (în sensul DOM) este un nod din arborele care alcătuiește modelul obiect pentru o pagină HTML sau XML, un element de tabel implementează și interfața Node mai generală din care derivă Element.

vartable = document.getElementById("tabel"); var tableAttrs = table.attributes; // Interfață nod/element pentru (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

Interfețe de bază în DOM

Această secțiune listează câteva dintre cele mai comune interfețe din DOM. Ideea nu este de a descrie ceea ce fac aceste metode API, ci de a vă oferi câteva gânduri despre tipurile de metode și proprietăți pe care le veți vedea adesea folosind DOM. Aceste părți comune ale API-ului sunt folosite în majoritatea exemplelor din secțiunea de la sfârșitul acestui ajutor.

Documentul, fereastra sunt obiecte ale căror interfețe ai tendința de a folosi mult în programarea DOM. vorbind in termeni simpli, obiectul fereastră reprezintă ceva asemănător unui browser, iar obiectul document reprezintă rădăcina documentului în sine. Element moștenește de la interfața comună Node, iar aceste interfețe împreună oferă multe metode și proprietăți care pot fi utilizate pe elemente individuale. Aceste elemente pot avea și interfețe separate pentru lucrul cu tipurile de date pe care le conțin aceste elemente, ca în exemplul de obiect tabel din cazul precedent.

Mai jos este lista finaliștilor membri comuni ai API-ului utilizat în programarea paginilor web și XML folosind DOM:

• parentNode.appendChild(nod)

Testarea DOM API

Acest document conține exemple pentru fiecare interfață pe care o puteți utiliza în dezvoltarea dvs. În unele cazuri, exemplele sunt pagini web complete cu acces la DOM în element, elementele necesare pentru a rula scriptul pe formular și elementele HTML pe care se vor efectua operațiunile DOM sunt de asemenea enumerate. Când se întâmplă acest lucru, puteți pur și simplu să copiați și să lipiți exemplul într-un nou document HTML, să îl salvați și să îl rulați în browser.

Există însă cazuri în care exemplele sunt mai concise. Pentru a rula exemplele, care demonstrează doar elementele de bază ale modului în care interfețele interacționează cu elementele HTML, puteți pregăti o pagină de test în care puneți funcții în interiorul scripturilor. Următoarea pagină web foarte simplă conține un element în antet în care puteți pune funcții pentru a testa interfața. Pagina contine mai multe elemente cu atribute care pot fi returnate, setate sau, cu alte cuvinte, manipulate si contine interfața cu utilizatorul trebuia să sune funcțiile dorite din browser.

Puteți folosi această pagină de testare sau una similară pentru a testa interfețele DOM care vă interesează și pentru a vedea cum funcționează în browsere. Puteți actualiza conținutul funcției test() după cum este necesar, puteți crea mai multe butoane sau puteți adăuga elemente după cum este necesar.

< html > < head > < title >Teste DOM< script type = " application/javascript" >funcția setBodyAttr (attr, valoare) ( ​​dacă (document. corp) eval ("document. corp." + attr+ "="" + valoare+ """ ) ; altfel notSupported () ; )< body > < div style =" margin : .5 in; height : 400 ; " > < p > < b > < tt >text< form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = "negru" >negru< option value = "albastru inchis" >albastru inchis< p > < b > < tt >bgColor< select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = "alb" >alb< option value = "gri deschis" >gri< p > < b > < tt >legătură< select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = "albastru" >albastru< option value = "verde" >verde< small > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" >(link exemplu)< br > < form > < input type = " button" value = "versiune" onclick = " ver()" />

Pentru a testa multe interfețe pe o singură pagină, un set de proprietăți care schimbă culorile unei pagini web, puteți crea o pagină web similară cu o întreagă „consolă” de butoane, câmpuri de text și alte elemente. Următoarea captură de ecran oferă o idee despre cum interfețele pot fi grupate pentru testare.

În acest exemplu, meniul drop-down actualizează dinamic părțile accesibile din DOM ale paginii web (de exemplu, culoare de fundal, culoarea linkului și culoarea textului). Cu toate acestea, atunci când dezvoltați pagini de testare, testarea interfețelor, așa cum citiți despre asta, este o parte importantă a învățării. munca eficienta cu DOM.