Lucrul cu modelul DOM. Manipularea DOM în exemple pur JavaScript Dom
În această lecție, ne vom uita la ce este DOM-ul, de ce este necesar și cum este construit.
Ce este DOM?Când un browser 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 analiză și analiză a codului HTML, browserul construiește un arbore DOM pe baza acestuia.
După finalizarea acestei acțiuni și a altora, browserul începe să redeze pagina. În acest proces, el, desigur, folosește deja arborele DOM pe care l-a creat, și nu codul HTML original.
DOM este un model 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”.
Chrome nu are un instrument cu care să puteți vizualiza arborele DOM pe care îl creează. 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 ca structură arborescentă.
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 poziționate 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ă aproape instantaneu imaginea paginii. Ca rezultat, redarea paginii noastre corespunde întotdeauna DOM-ului.
Pentru a citi și modifica DOM-ul în mod programatic, browser-ul ne oferă un API DOM sau, cu alte cuvinte, o interfață de programare. Mai simplu spus, API-ul DOM este o colecție de un număr mare de obiecte diferite, proprietățile și metodele lor pe care le putem folosi pentru a citi și modifica DOM.
Pentru a lucra cu DOM, JavaScript este folosit în majoritatea cazurilor, deoarece... Astăzi este singurul limbaj de programare în care scripturile pot fi executate într-un browser.
De ce avem nevoie de API-ul 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. Aceste. Această interfață software 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.
În zilele noastre practic nu există site-uri pe web ale căror scenarii să nu funcționeze cu DOM.În ce constă codul HTML al unei pagini?
Î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 constructul sintactic de bază al HTML. Majoritatea sunt pereche. În acest caz, unul dintre ele se deschide, iar celălalt se închide. O astfel de pereche de etichete formează un element HTML. Elementele HTML pot avea parametri suplimentari - atribute.
Într-un document, pentru a crea anumite markupuri, unele elemente sunt situate în interiorul altora. Ca rezultat, un document HTML poate fi reprezentat ca un set de elemente HTML imbricate unul în celălalt.
Ca exemplu, luați în considerare următorul cod HTML:
Titlul paginii Titlul articolului Secțiunea articolului
Conținutul articolului
În acest cod, elementul rădăcină este html. Conține elemente ale capului și corpului. Elementul head conține un titlu, iar corpul conține un h1 și un 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 unui document?
După cum este descris mai sus, browserul construiește un arbore bazat pe elemente HTML și alte entități ale codului sursă a paginii. 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 lucrul convenabil cu acesta prin JavaScript.
La construirea DOM-ului, browserul creează obiecte (noduri de arbore DOM) din elemente HTML, text, comentarii și alte entități ale acestui limbaj.
În același timp, browserul nu numai că creează 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 în relație cu acesta. Și este un părinte pentru fiecare dintre ei. În plus, toate aceste elemente sunt frați (frați) în relație unul cu celălalt.
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 un arbore 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.
În acest caz, rădăcina arborelui DOM este întotdeauna documentul însuși (nodul documentului). Apoi, 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 lui. Nodul html este format din elementul html (...). Nodurile cap(...) și corp(...) 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 asociat cu titlul (lt;titlu>...), este copilul său. Nodurile h1 și div sunt asociate cu body , care este părintele lor. Nodul div este conectat la h2(...) și p(), ele sunt copiii acestuia.
Arborele începe, după cum sa menționat mai sus, cu obiectul document (nodul). 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 corp, adică 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 cât de ușor este să construiți un arbore DOM într-un browser bazat pe cod HTML.
De ce trebuie să știți cum este construit arborele 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 lucrați cu DOM se reduc la căutarea (selectarea) elementelor necesare. Fără a ști cum este structurat arborele DOM și conexiunile dintre noduri, va fi destul de dificil să găsești un element specific în el.Pe baza arborelui DOM prezentat în figură, creați cod HTML.
Subiectul este chiar complex. Dar, după cum se spune, diavolul nu este atât de groaznic pe cât este pictat. Aici primesc cea mai dură nucă: această super sarcină de a o „vopsi” cât mai digerabilă, dar nu în întregime primitivă. Până acum, toate materialele pe care le-am citit tind să fie fie abstruse, fie primitive.
Ce este DOMAbrevierea DOM înseamnă Model obiect document(model de obiect document).
DOM este o interfață de programare pentru accesarea conținutului documentelor HTML, XHTML și XML, adică reprezentând etichete și atribute HTML, XHTML și XML, precum și stilurile CSS ca obiecte de programare. Atât JavaScript, cât și alte limbaje de programare web funcționează cu acest model.
Puțină istorie
Există 4 niveluri DOM (0, 1, 2 și 3).
Nivelul 0 (1996) a inclus modele DOM care existau înainte de Nivelul 1. Acestea sunt în principal colecții: document.images, document.forms, document.layers și document.all. Aceste modele nu sunt în mod oficial specificații DOM publicate de W3C. Mai degrabă, ele reprezintă informații despre ceea ce a existat înainte de începerea procesului de standardizare.
Nivelul 1 (1997) a inclus și funcționalități de bază pentru procesarea documentelor XML: numeroase moduri de a lucra cu noduri individuale, lucru cu instrucțiuni de procesare XML etc.
În plus, nivelul 1 DOM conține o serie de interfețe speciale care pot gestiona elemente HTML individuale. De exemplu, puteți lucra cu tabele HTML, formulare, liste de selecție etc.
DOM Level 2 (2002) a adăugat câteva funcții noi.
În timp ce nivelul 1 DOM nu avea suport pentru spațiile de nume, interfețele DOM Nivelul 2 conțin metode de gestionare a spațiilor de nume asociate cu cerințele pentru compunerea și procesarea documentelor XML.
În plus, nivelul 2 DOM acceptă evenimente.
Nivelul 2 este nivelul actual al specificației DOM, dar W3C recomandă unele secțiuni ale specificației de nivel 3.
DOM Level 3 este un proiect de lucru al specificației care extinde funcționalitatea DOM Level 2. Una dintre cele mai importante caracteristici ale acestei versiuni a specificației este capacitatea de a lucra cu numeroase extensii DOM.
Ce înseamnă „interfață software”?
Interfața cuvântului englezesc poate fi tradus ca „zonă de contact”. Un computer, aproximativ vorbind, înțelege doar două lucruri: un bit gol și un bit umplut. Limbajul pe care îl „vorbește” un computer poate fi gândit ca un șir nesfârșit de zerouri și unu, dând un număr infinit de combinații diferite.
Orice cod de program este o interpretare, pe înțelesul programatorului, a acestor „zerouri și unități” cu care lucrează computerul. Astfel, orice limbaj de programare este o interfață om-mașină.
Browserele funcționează la fel ca alte aplicații de calculator. Ei interpretează codurile HTML, XML, CSS, JavaScript, PHP, Perl etc. în „zerouri și unu”. Pentru a face față acestui multilingvism, este nevoie de o platformă comună. Această platformă este DOM - o specificație care nu depinde de un anumit limbaj de programare sau de marcare. Este o interfață care poate fi utilizată în multe limbaje de programare populare asociate cu crearea de pagini web și capabilă să înțeleagă și să interpreteze obiecte DOM.
DOM și browsere
DOM și JavaScript
În JavaScript, partea de sus a scării ierarhice a obiectelor DOM, un fel de „conductor” al acestei interfețe, este obiectul document, iar obiectele DOM devin proprietățile sale, proprietățile proprietăților sale etc. Ele sunt numite și noduri DOM.
noduri DOMExistă 12 tipuri de noduri în DOM nivelul 2. Fiecărui tip de nod DOM i se atribuie o constantă cu un nume unic. Majoritatea nodurilor sunt proiectate să funcționeze cu XML. În ansamblul HTML - JavaScript pe care îl facem, pot fi folosite doar 5 tipuri. Dar chiar și acest „vârf al aisbergului” este un „copac foarte răspândit” care nu poate fi acoperit în una sau două lecții.
Setul complet de constante de tip de nod definite în specificația W3C DOM (nodurile disponibile pentru HTML - JavaScript sunt evidențiate cu albastru):
Nume constant |
Sens |
Descriere |
Node.ELEMENT_NODE |
Element Node (returnează elementul rădăcină al documentului, pentru documentele HTML acesta este elementul HTML) |
|
Node.ATTRIBUTE_NODE |
Nod de atribut (returnează un atribut al unui element de document XML sau HTML) |
|
Nod text (#text) |
||
Node.CDATA_SECTION_NODE |
Nod secțiune CDATA (XML: o sintaxă alternativă pentru afișarea datelor de caractere) |
|
Node.ENTITY_REFERENCE_NODE |
||
Node.ENTITY_NODE |
Nod de partiție |
|
Node.PROCESSING_INSTRUCTION_NODE |
Nod directiv XML |
|
Node.COMMENT_NODE |
Nod de comentariu |
|
Node.DOCUMENT_NODE |
Nodul document (baza pentru accesarea conținutului documentului și crearea componentelor acestuia) |
|
Node.DOCUMENT_TYPE_NODE |
Nod tip document (returnează tipul acestui document, adică valoarea etichetei DOCTYPE) |
|
Node.DOCUMENT_FRAGMENT_NODE |
Nod fragment de document (extragerea unei părți din arborele documentului, crearea unui nou fragment de document, inserarea unui fragment ca copil al unui nod etc.) |
|
Node.NOTATION_NODE |
Nod de notație* |
* Notațiile sunt nume care identifică formatul secțiunilor neparsate, formatul elementelor care au un atribut de notație sau programul de aplicație căruia îi este adresată directiva.
(Nu este clar? Nici eu nu sunt prea sigur încă.)
Structura documentului în DOM
< title>Toate obiectele document sunt noduri DOM. Să ne uităm la un document de bază:Antet DOM
Textul paragrafului
Iată o diagramă a arborelui său DOM:
Fiecare nod poate avea noduri copil (săgețile conduc la ele în diagramă). Obiectul document - baza arborelui document - este, de asemenea, un nod, dar nu are un nod părinte și are o serie de proprietăți și metode pe care alte noduri nu le au. Are un nod copil: element.
Un element are două noduri copil: și , pentru care toate elementele conținute în ele devin copii.
Atenţie!
Antet DOM
.„Element” și „etichetă” nu sunt sinonime. O etichetă este un semn de marcare: - acestea sunt două etichete diferite. Și un element este un obiect marcat cu aceste etichete:
Elemente și
Conține text în interior. Acestea sunt nodurile lor de text copil. Elementul are și un atribut: align="center" . Nodurile de atribut sunt și noduri copii ale elementelor care le conțin.
Când lucrați cu nodurile arborelui DOM, sunt utilizate proprietățile și metodele acestora.Unele proprietăți ale nodurilor
Mică introducere
Repet încă o dată: atunci când accesăm elemente de pagină în scripturi, avem de-a face nu numai cu limbajul Javascript, ci și cu interfața DOM încorporată în acesta. Uneori trebuie să fii conștient de acest lucru, uneori poți uita „că vorbim în proză”.
Am folosit deja unele proprietăți și metode din modelul de obiecte DOM în acest fel. Prin urmare, din când în când voi oferi link-uri către lecțiile anterioare.
În această lecție, nu vom merge pe calea „academică”, luând în considerare toate proprietățile tuturor nodurilor din toate browserele. În primul rând, să facem cunoștință cu cele mai practice și „fără conflicte” dintre ele.
De aceea nu vom începe, așa cum este de obicei, cu „proprietățile principale”: nodeName și nodeValue.
tagName
Returnează un șir care conține numele etichetei elementului. Toate valorile tagName conțin numai caractere majuscule.
Sintaxă element.tagName
Exemplu
Testarea proprietății tagName document.write(document.getElementById(„testTagName”
).tagName)
Rezultat
Testarea proprietății tagName
innerHTML
Oferă acces la conținutul elementului. Specifică nu numai conținutul textului, ci și toate etichetele HTML situate în interiorul elementului.
Această proprietate nu este doar pentru citire, ci și pentru modificarea conținutului.
Nota
În IE, innerHTML este doar în citire pentru un număr de elemente: toate elementele de tabel, cu excepția
De exemplu, am creat un tabel gol fără un element
IE va arunca o „eroare de rulare necunoscută” și alte browsere vor face lipirea.
În același timp, dacă interogăm conținutul existent al unui element
Returnează un șir care conține numele etichetei elementului. Toate valorile tagName conțin numai caractere majuscule.
Sintaxă.innerHTML = "text atribuit".tagName
|
Paragraf de inserat // Această funcție citește textul și îl inserează în paragraful dat. funcția testRead() ( document.getElementById( "ţintă").innerHTML = document.getElementById( „testInnerHTML”).innerHTML } // Această funcție modifică textul paragrafului dat. funcția testChange() ( document.getElementById( "ţintă").innerHTML = „Recolorarea și schimbarea textului” } // Această funcție readuce proprietatea în poziția inițială. funcția testReset() ( document.getElementById( "ţintă").innerHTML = „Paragraf de inserat” } |
Testarea proprietății innerHTML
Paragraf de inserat
Structura documentului
Vă puteți gândi la HTML ca la o serie de casete imbricate. Etichetele par să includă alte etichete, care la rândul lor includ etichete sau text. Iată un exemplu de document din capitolul anterior:
Pagina mea de pornire Pagina mea de pornire
Bună, sunt Marijn și aceasta este pagina mea de pornire.
Și am scris și o carte! Citiți-l aici.
Această pagină are următoarea structură:
Structura de date pe care browserul o folosește pentru a prezenta un document reflectă forma acestuia. Pentru fiecare casetă există un obiect cu care putem interacționa și să aflăm diferite date despre el - ce etichetă reprezintă, ce casete și text conține. Această reprezentare se numește Document Object Model, sau pe scurt DOM.
Putem accesa aceste obiecte prin variabila globală a documentului. Proprietatea sa documentElement se referă la obiectul care reprezintă eticheta. De asemenea, oferă proprietăți ale capului și corpului, care conțin obiecte pentru elementele corespunzătoare.
Arbori Reamintim arbori de sintaxă din Capitolul 11. Structura lor este remarcabil de similară cu structura unui document de browser. Fiecare nod se poate conecta la alte noduri, iar fiecare ramură poate avea propria sa ramură. Această structură este un exemplu tipic de structuri imbricate, în care elementele conțin subelemente similare cu ele însele.Numim o structură de date arbore atunci când se ramifică, nu are bucle (un nod nu se poate conține) și are o singură „rădăcină” distinctă. În cazul DOM, rădăcina este document.documentElement.
Copacii se găsesc adesea în știința computațională. Pe lângă reprezentarea structurilor recursive, cum ar fi un document HTML sau programe, acestea sunt adesea folosite pentru a lucra cu seturi sortate de date, deoarece elementele sunt de obicei mai ușor de găsit sau de inserat într-un arbore sortat decât într-o matrice unidimensională sortată.
Un arbore tipic are noduri diferite. Arborele de sintaxă a limbajului Egg a avut variabile, valori și aplicații. Aplicațiile au avut întotdeauna ramuri copil, iar variabilele și valorile erau „frunze”, adică noduri fără ramuri copil.
Același lucru este valabil și pentru DOM. Nodurile pentru elementele obișnuite care reprezintă etichetele HTML definesc structura documentului. Ele pot avea noduri copil. Un exemplu de astfel de nod este document.body. Unele dintre aceste noduri secundare pot fi frunze, cum ar fi textul sau comentariile (în HTML, comentariile sunt scrise între caractere).
Fiecare obiect nod DOM are o proprietate nodeType, care conține un cod numeric care identifică tipul nodului. Pentru elementele obișnuite este egal cu 1, care este, de asemenea, definit ca un document de proprietate constantă.ELEMENT_NODE. Nodurile de text care reprezintă pasaje de text au valoarea 3 (document.TEXT_NODE). Comentariile au 8 (document.COMMENT_NODE).
Adică, iată o altă modalitate de a reprezenta grafic arborele documentului:
Frunzele sunt noduri de text, iar săgețile arată relațiile tată-copil dintre noduri.
Standard Utilizarea numerelor criptice pentru a reprezenta tipul de nod nu este o abordare în stil JavaScript. Mai târziu vom întâlni și alte părți ale interfeței DOM care par, de asemenea, extraterestre și incomode. Motivul este că DOM-ul nu a fost conceput doar pentru JavaScript. Încearcă să definească o interfață independentă de limbaj, care poate fi utilizată în alte sisteme – nu doar HTML, ci și XML, care este un format de date de uz general, cu o sintaxă similară cu HTML.Se dovedește a fi incomod. Deși standardele sunt un lucru foarte util, în cazul nostru avantajul independenței lingvistice nu este atât de util. Este mai bine să ai o interfață care este bine adaptată la limba pe care o folosești decât o interfață familiară în toate limbile.
Pentru a ilustra integrarea incomodă cu limbajul, luați în considerare proprietatea childNodes pe care o au nodurile DOM. Conține un obiect asemănător matricei cu o proprietate de lungime și proprietăți numerotate pentru accesarea nodurilor copil. Dar aceasta este o instanță de tipul NodeList, nu o matrice reală, deci nu are metode precum forEach.
Există, de asemenea, probleme asociate cu proiectarea slabă a sistemului. De exemplu, nu puteți crea un nod nou și nu puteți adăuga imediat proprietăți sau noduri secundare. Mai întâi trebuie să îl creați, apoi să adăugați copii unul câte unul și, în final, să atribuiți proprietăți unul câte unul, folosind efecte secundare. Codul care lucrează îndeaproape cu DOM se dovedește a fi lung, urât și cu multă repetare.
Dar aceste probleme nu sunt fatale. JavaScript vă permite să creați abstracții. Este ușor să scrieți funcții de ajutor care vă permit să exprimați operațiunile mai clar și mai concis. În general, aceste tipuri de instrumente oferă multe biblioteci care vizează programarea pentru browser.
Nodurile DOM Tree Traversal conțin multe referințe la nodurile învecinate. Acest lucru este prezentat în diagramă:
Deși aici este afișată doar o legătură de fiecare tip, fiecare nod are o proprietate parentNode care indică către nodul său părinte. Fiecare nod element (tip 1) are, de asemenea, o proprietate childNodes care indică către un obiect asemănător matricei care conține nodurile sale copil.
În teorie, puteți accesa orice parte a arborelui folosind doar aceste link-uri. Dar JavaScript ne oferă o mulțime de link-uri de ajutor suplimentare. Proprietățile firstChild și lastChild indică primul și ultimul element copil sau sunt nule pentru acele noduri care nu au copii. previousSibling și nextSibling indică nodurile vecine - noduri care au același părinte ca nodul curent, dar sunt imediat înainte sau după cel curent în listă. Proprietatea previousSibling a primului nod va fi nulă, iar proprietatea nextSibling a ultimului nod va fi nulă.
Funcțiile recursive sunt utile atunci când lucrați cu astfel de structuri imbricate. Următoarele caută în document noduri de text care conțin șirul dat și returnează true când îl găsește:
Funcția talksAbout(node, șir) ( if (node.nodeType == document.ELEMENT_NODE) ( pentru (var i = 0; i< node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) >-1;
) ) console.log(talksAbout(document.body, "books")); // → adevărat
Proprietățile nodului text nodeValue conține o linie de text.Găsirea elementelor Este adesea util să navigați prin aceste link-uri pentru părinți, copii și frați și să vă deplasați prin întregul document. Totuși, dacă avem nevoie de un anumit nod într-un document, este foarte incomod să-l parcurgem, pornind de la document.body și mergând stupid prin calea codificată în cod. Făcând acest lucru, facem presupuneri în program cu privire la structura exactă a documentului - pe care este posibil să dorim să o modificăm ulterior. Un alt factor de complicare este că nodurile de text sunt create chiar și pentru spațiile dintre noduri. În documentul din exemplu, eticheta body nu are trei copii (h1 și doi p), ci șapte: aceste trei spații plus înainte, după și între ei.
Var link = document.body.getElementsByTagName("a"); console.log(link.href);
Toate nodurile de element au o metodă getElementsByTagName care colectează toate elementele cu o etichetă dată care sunt descendenți (descendenți direcți sau indirecti) acelui nod și le returnează ca obiect asemănător matricei.
Pentru a găsi un anumit nod, îi puteți da un atribut id și puteți utiliza metoda document.getElementById.
var struț = document.getElementById("gertrude");
console.log(struț.src);A treia metodă este getElementsByClassName, care, ca și getElementsByTagName, caută conținutul nodului element și returnează toate elementele care conțin șirul specificat în clasa lor.
Modificarea documentului Aproape totul din structura DOM poate fi schimbat. Nodurile element au un set de metode care sunt folosite pentru a le modifica. Metoda removeChild elimină nodul copil specificat. Pentru a adăuga un nod, puteți folosi appendChild, care adaugă nodul la sfârșitul listei, sau insertBefore, care adaugă nodul trecut ca prim argument înainte ca nodul trecut ca al doilea argument.
Metoda replaceChild este folosită pentru a înlocui un nod copil cu altul. Acceptă două noduri: cel nou și cel care trebuie înlocuit. Nodul care trebuie înlocuit trebuie să fie un copil al elementului a cărui metodă o apelăm. Ambele replaceChild și insertBefore se așteaptă la un nou nod ca prim argument.
Crearea nodurilor În exemplul următor, trebuie să facem un script care înlocuiește toate imaginile (eticheta) din document cu textul conținut în atributul lor „alt”, care specifică o reprezentare text alternativă a imaginii.Pentru a face acest lucru, trebuie nu numai să ștergeți imaginile, ci și să adăugați noi noduri de text pentru a le înlocui. Pentru a face acest lucru folosim metoda document.createTextNode.
Acest 
V 
.
Înlocui
funcția replaceImages() ( var images = document.body.getElementsByTagName("img"); for (var i = images.length - 1; i >= 0; i--) ( var imagine = imagini[i]; dacă ( image.alt) ( var text = document.createTextNode(image.alt); image.parentNode.replaceChild(text, imagine); ) ) )Având un șir, createTextNode ne oferă un nod DOM de tip 3 (text) pe care îl putem insera în document pentru a-l afișa pe ecran.
Ciclul prin imagini începe la sfârșitul listei de noduri. Acest lucru se face deoarece lista de noduri returnate de metoda getElementsByTagName (sau proprietatea childNodes) este actualizată constant pe măsură ce documentul se modifică. Dacă am începe de la început, eliminarea primei imagini ar face ca lista să-și piardă primul element, iar în timpul celei de-a doua treceri a buclei, când i este 1, s-ar opri pentru că și lungimea listei ar deveni 1.
Dacă trebuie să lucrați cu o listă fixă de noduri în loc de una live, o puteți converti într-o matrice reală folosind metoda slice.
Var arrayish = (0: „unu”, 1: „două”, lungime: 2); var real = Array.prototype.slice.call(arrayish, 0); real.forEach(funcție(elt) ( console.log(elt); )); // → unu // doi
Pentru a crea noduri de elemente (tip 1), puteți utiliza document.createElement. Metoda ia un nume de etichetă și returnează un nou nod gol de tipul dat. Următorul exemplu definește instrumentul elt, care creează un nod element și folosește argumentele rămase ca copii. Această funcție este apoi utilizată pentru a adăuga informații suplimentare la cotație.
Nicio carte nu este niciodată terminată. Învățăm suficient în timp ce lucrăm la el pentru a-l găsi imatur de îndată ce îl părăsim.< arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } document.getElementById("quote").appendChild(elt("footer", "-", elt("strong", "Карл Поппер"), ", предисловие ко второму изданию ", elt("em", "Открытое общество и его враги "), ", 1950"));
Atribute Unele elemente de atribut, cum ar fi href pentru legături, pot fi accesate prin proprietatea obiect cu același nume. Acest lucru este posibil pentru un număr limitat de atribute standard utilizate în mod obișnuit.Dar HTML vă permite să atribuiți orice atribute nodurilor. Acest lucru este util pentru că... vă permite să stocați informații suplimentare într-un document. Dacă veniți cu propriile nume de atribute, acestea nu vor fi printre proprietățile nodului elementului. În schimb, va trebui să utilizați metodele getAttribute și setAttribute pentru a lucra cu ele.
Cod de pornire 00000000.
Pisica are patru picioare.
var paras = document.body.getElementsByTagName("p");Array.prototype.forEach.call(paras, function(para) ( if (para.getAttribute("data-classified") == "secret") para.parentNode.removeChild(para); ));
Recomand să puneți „date-“ în fața numelor atributelor inventate pentru a vă asigura că acestea nu intră în conflict cu altele. Ca exemplu simplu, vom scrie un evidențiator de sintaxă care caută etichete („preformatat” - folosit pentru cod și text simplu) cu un atribut de limbaj de date și încearcă destul de grosier să evidențieze cuvintele cheie în limbă.
Funcția highlightCode(nod, cuvinte cheie) ( var text = node.textContent; node.textContent = ""; // Ștergeți nodul var potrivirea, pos = 0; while (match = keywords.exec(text)) ( var before = text slice(pos, node.appendChild(document.createTextNode(before)); cuvinte cheie.lastIndex ) var after = text.slice(pos node.appendChild(document.createTextNode(after));
Funcția highlightCode ia un nod ȘI un caracter obișnuit (cu setarea globală activată) care se potrivește cu cuvântul cheie al limbajului de programare care conține elementul.
Proprietatea textContent este folosită pentru a obține tot textul nodului și apoi este setată la șirul gol, care șterge nodul. Parcurgem toate aparițiile expresiei cuvântului cheie, adăugăm text între ele sub formă de noduri de text simple și adăugăm text potrivit (cuvinte cheie) prin includerea lor în elemente (bold).
Var languages = ( javascript: /\b(function|return|var)\b/g /* … etc */ ); funcția highlightAllCode() (var pres = document.body.getElementsByTagName("pre"); for (var i = 0; i< pres.length; i++) { var pre = pres[i]; var lang = pre.getAttribute("data-language"); if (languages.hasOwnProperty(lang)) highlightCode(pre, languages); } }
Iată un exemplu:
Și iată, funcția de identificare:
Funcția id(x) ( return x; ) highlightAllCode();Există un atribut folosit în mod obișnuit, clasa, al cărui nume este un cuvânt cheie în JavaScript. Din motive istorice, când implementările JavaScript mai vechi nu au putut gestiona numele de proprietăți care corespund cuvintelor cheie, acest atribut este accesibil printr-o proprietate numită className. De asemenea, îl puteți accesa prin numele său real „clasă” prin metodele getAttribute și setAttribute.
Aspect Este posibil să fi observat că diferitele tipuri de elemente sunt dispuse diferit. Unele, cum ar fi paragrafeleȘi titlurile se întind pe toată lățimea documentului și apar pe linii separate. Astfel de elemente se numesc elemente bloc. Altele ca link-uri sau textul aldine apar pe aceeași linie cu textul din jur. Ele sunt numite încorporate (inline). Pentru orice document, browserele pot construi un aranjament de elemente, un aspect în care fiecare va avea o dimensiune și o poziție în funcție de tipul și conținutul său. Acest aspect este apoi folosit pentru a crea aspectul documentului. Mărimea și poziția unui element pot fi găsite prin JavaScript. Proprietățile offsetWidth și offsetHeight dau dimensiunea în pixeli ocupată de element. Pixelul este unitatea de măsură de bază în browsere și de obicei corespunde mărimii celui mai mic punct de pe ecran. În mod similar, clientWidth și clientHeight dau dimensiunea interiorului unui element, fără a număra chenarul (sau, după cum spun unii, bordura). Sunt într-o cutie
console.log("clientHeight:", para.clientHeight);
Analizarea unui document este o sarcină dificilă. Din motive de viteză, motoarele de browser nu reconstruiesc documentul de fiecare dată când este schimbat, ci așteaptă atât de mult. cum este posibil acest lucru. Când programul JavaScript care a modificat documentul se termină de rulat, browserul va trebui să calculeze un nou aspect de pagină pentru a afișa documentul modificat pe ecran. Când un program solicită poziția sau dimensiunea a ceva citind proprietăți precum offsetHeight sau apelând getBoundingClientRect, aspectul trebuie, de asemenea, calculat pentru a furniza informațiile corecte.
Un program care citește periodic aspectul DOM și modifică DOM va forța browserul să recalculeze aspectul de mai multe ori și, prin urmare, va fi lent. În exemplul următor, există două programe diferite care construiesc o linie de caractere X de 2000 px și măsoară timpul de rulare.
function time(nume, actiune) ( var start = Date.now(); // Ora curenta in milisecunde action(); console.log(nume, "luat", Date.now() - start, "ms"); ) time("dumb", function() (var target = document.getElementById("one"); while (target.offsetWidth< 2000) target.appendChild(document.createTextNode("X")); }); // → тупо заняло 32 ms time("умно", function() { var target = document.getElementById("two"); target.appendChild(document.createTextNode("XXXXX")); var total = Math.ceil(2000 / (target.offsetWidth / 5)); for (var i = 5; i < total; i++) target.appendChild(document.createTextNode("X")); }); // → умно заняло 1 ms Stiluri Am văzut că diferitele elemente HTML se comportă diferit. Unele sunt afișate ca blocuri, altele sunt în linie. Unele adaugă stil vizual, cum ar fi textul aldine și subliniat și albastru.
Apariția imaginii în etichetă sau faptul că linkul din etichetă deschide o pagină nouă la clic este legat de tipul elementului. Dar stilurile de bază asociate cu elementul, cum ar fi culoarea textului sau sublinierea, pot fi modificate de noi. Iată un exemplu de utilizare a proprietății style:
Legătură verde
Atributul style poate conține una sau mai multe declarații de proprietate (culoare), urmate de două puncte și o valoare. În cazul declarațiilor multiple, acestea sunt separate prin punct și virgulă: „culoare: roșu; graniță: niciunul”.
O mulțime de lucruri pot fi schimbate folosind stiluri. De exemplu, proprietatea de afișare controlează dacă un element este afișat sub formă de bloc sau inline.
Textul este afișat în linie, ca un bloc și nu este vizibil deloc.
Un element de bloc este afișat ca un bloc separat, iar acesta din urmă nu este vizibil deloc – afișare: niciunul nu dezactivează afișarea elementelor. În acest fel puteți ascunde elemente. Acest lucru este de obicei de preferat în locul ștergerii lor complet din document, deoarece este mai ușor să le arătați din nou mai târziu, dacă este necesar.
Codul JavaScript poate acționa direct asupra stilului unui element prin proprietatea stilului nodului. Conține un obiect care are proprietăți pentru toate proprietățile stilului. Valorile lor sunt șiruri pe care le putem scrie pentru a schimba un aspect al stilului elementului.
Frumuseţe
var para = document.getElementById("para");console.log(para.style.color);
para.style.color = "magenta";Unele nume de proprietăți de stil conțin cratime, cum ar fi font-family. Deoarece ar fi dificil de lucrat cu ele în JavaScript (ar trebui să scrieți stil["font-family"), numele proprietăților din obiectul stiluri sunt scrise fără cratima, dar apar cu majuscule: style.fontFamily
Stiluri în cascadă Sistemul de stiluri în HTML se numește CSS (Foi de stil în cascadă). O foaie de stil este un set de stiluri dintr-un document. Poate fi scris în interiorul unei etichete:
puternic (stil font: italic; culoare: gri; )
Acum textul etichetei puternice este înclinat și gri.
„Cascadă” înseamnă că mai multe reguli sunt combinate pentru a produce stilul final al documentului. În exemplu, stilul implicit pentru, care face textul aldin, este suprapus cu o regulă din etichetă, care adaugă stil de font și culoare.
Când valoarea unei proprietăți este determinată de mai multe reguli, cele ulterioare au prioritate. Dacă stilul textului include regula font-weight: normal, care intră în conflict cu stilul implicit, atunci textul ar fi normal, nu bold. Stilurile care sunt aplicate unui nod prin atributul style au cea mai mare prioritate.
În CSS este posibil să setați nu numai numele etichetelor. Regula pentru .abc se aplică tuturor elementelor care au clasa „abc” specificată. Regula #xyz se aplică unui element cu un atribut id egal cu „xyz” (atributele id trebuie făcute unice pentru document).
Subtil (culoare: gri; dimensiunea fontului: 80%; ) #header ( fundal: albastru; culoare: alb; ) /* Elementele p care au clasele a și b și id-ul setat la main */ p.a.b#main ( margin-bottom : 20px)
Prioritatea celor mai recente reguli funcționează atunci când regulile au aceeași granularitate. Este o măsură a cât de exact descrie elementele eligibile, determinată de numărul și tipul de aspecte elementare necesare. De exemplu, regula pentru p.a este mai detaliată decât regulile pentru p sau just.a și va avea prioritate.
Metoda querySelectorAll, care există atât pe obiectul document, cât și pe elementele nod, ia un șir de selecție și returnează un obiect asemănător matricei care conține toate elementele care se potrivesc cu acesta.
Îmi plac furtunile de la începutul lunii mai
Când primul tunet al primăverii
De parcă s-ar zbuci și s-ar juca
Bubuit pe cerul albastru.
function count(selector) ( return document.querySelectorAll(selector).length; ) console.log(count("p")); // Toate elementele// → 4 console.log(count(".animal"); // Clasa animale // → 2 console.log(count("p .animal"); // Clasa de animale înăuntru
// → 2 console.log(count("p > .animal"); // Copil direct
// → 1
Spre deosebire de metode precum getElementsByTagName, obiectul returnat de querySelectorAll nu este interactiv. Nu se va schimba dacă schimbați documentul.
Metoda querySelector (fără All) funcționează într-un mod similar. Ai nevoie de el dacă ai nevoie de un element specific. Va returna doar prima potrivire sau nulă dacă nu există potriviri.
Poziție și animație Proprietatea de poziție a stilurilor afectează foarte mult plasarea elementelor. În mod implicit, este static, ceea ce înseamnă că elementul se află în poziția sa normală în document. Când este relativ, elementul încă ocupă spațiu, dar acum proprietățile de sus și stânga pot fi folosite pentru a-l muta în raport cu poziția sa normală. Când este absolut, elementul este îndepărtat din „fluxul” normal al documentului - adică nu ocupă spațiu și se poate suprapune cu altele. În plus, proprietățile sale din stânga și de sus pot fi folosite pentru a-l poziționa absolut relativ la colțul din stânga sus al celui mai apropiat element de închidere a cărui poziție nu este statică. Și dacă nu există un astfel de element, atunci acesta este poziționat în raport cu documentul.Putem folosi acest lucru pentru a crea animație. Următorul document prezintă o imagine a unei pisici care se mișcă într-o elipsă.
var angle = 0, lastTime = null;
funcția animate(time) ( dacă (lastTime != null) unghi += (time - lastTime) * 0,001; lastTime = ora; cat.style.top = (Math.sin(unghi) * 20) + "px"; cat .style.left = (Math.cos(unghi) * 200) + "px" requestAnimationFrame(animate) requestAnimationFrame(animate);
Imaginea este centrată pe pagină și poziția dată: relativă. Actualizăm constant proprietățile de sus și din stânga ale imaginii pentru a o face să se miște.
Scriptul folosește requestAnimationFrame pentru a apela funcția de animare de fiecare dată când browserul este gata să redeseneze ecranul. Funcția de animare în sine apelează requestAnimationFrame din nou pentru a programa următoarea actualizare. Când fereastra browserului (sau marcajul) este activă, acest lucru va avea ca rezultat actualizări cu o rată de aproximativ 60 de ori pe secundă, permițând animații cu aspect plăcut.
Dacă pur și simplu am actualiza DOM-ul într-o buclă, pagina s-ar bloca și nimic nu ar fi vizibil. Browserele nu reîmprospătează pagina în timp ce JavaScript rulează și nu permit interacțiunea cu pagina în timp ce rulează. De aceea, avem nevoie de o cerereAnimationFrame - îi spune browserului că am terminat deocamdată și poate face lucruri de browser, cum ar fi să reîmprospăteze ecranul și să răspundă la solicitările utilizatorilor.
Funcția noastră de animație trece timpul curent prin argumente, pe care le compară cu precedentul (variabila lastTime), astfel încât mișcarea pisicii să fie uniformă și animația să se desfășoare fără probleme. Dacă pur și simplu am muta o sumă stabilită la fiecare pas, mișcarea s-ar slăbi dacă, de exemplu, o altă sarcină ar încărca computerul.
Stilurile necesită de obicei unități de măsură. În cazul nostru, trebuie să adăugăm px la număr pentru a explica browserului că numărăm în pixeli (și nu în centimetri, ems sau alte unități). Este ușor de uitat. Utilizarea numerelor fără unități va face ca stilul să fie ignorat - cu excepția cazului în care numărul este 0, care este independent de unități.
Rezumat Programele JavaScript pot examina și modifica documentul afișat curent în browser printr-o structură numită DOM. Această structură de date reprezintă modelul de document al browserului, iar un program JavaScript îl poate modifica pentru a schimba documentul vizibil. DOM-ul este organizat ca un arbore, în care elementele sunt aranjate ierarhic în funcție de structura documentului. Obiectele element au proprietăți de tip parentNode și childNodes, care sunt folosite pentru orientarea în arbore.Aspectul unui document poate fi modificat prin stiluri, fie prin adăugarea directă de stiluri la noduri, fie prin definirea unor reguli pentru unele noduri. Stilurile au multe proprietăți, cum ar fi culoarea sau afișarea. JavaScript poate influența stilul unui element direct prin proprietatea lui de stil.
ExercițiiConstruirea unui tabel Am construit tabele din text simplu în Capitolul 6. HTML face construirea tabelelor ușoară. Un tabel în HTML este construit folosind următoarele etichete:
| Kilimanjaro | 5895 | Tanzania |
Fiecare linie conține o etichetă. În interiorul acestuia putem plasa celule: fie celule antet, fie celule obișnuite.
Aceleași date pe care le-am folosit în Capitolul 6 sunt din nou disponibile în variabila MOUNTAINS.
Scrieți o funcție buildTable care, luând o matrice de obiecte cu aceleași proprietăți, construiește o structură DOM reprezentând tabelul. Tabelul ar trebui să aibă un rând de antet în care numele proprietăților sunt împachetate în elemente și ar trebui să existe un rând pentru fiecare obiect matrice în care proprietățile sale sunt împachetate în elemente. Aici este utilă funcția Object.keys, returnând o matrice care conține numele proprietăților obiectului.
După ce aveți elementele de bază în jos, aliniați celulele numerice la dreapta schimbându-le proprietatea style.textAlign la „dreapta”.
/* Definește stiluri pentru tabele frumoase */ table ( border-collapse: collapse; ) td, th ( chenar: 1px negru solid; padding: 3px 8px; ) th ( text-align: left; ) function buildTable(data) ( / / Codul dvs. ) document.body.appendChild(buildTable(MUNTAINS));
Elemente după numele etichetei Metoda getElementsByTagName returnează toate elementele copil cu numele etichetei dat. Creați propria versiune a acestei metode ca o funcție obișnuită care ia un nod și un șir (numele etichetei) și returnează o matrice care conține toate nodurile descendente cu numele etichetei dat.Pentru a afla numele etichetei unui element, utilizați proprietatea tagName. Rețineți că aceasta va returna numele etichetei în majuscule. Utilizați metodele șiruri toLowerCase sau toUpperCase.
Un titlu cu un element span în interior.
Un paragraf cu unul sau două elemente.
function byTagName(node, tagName) ( // Codul dvs. ) console.log(byTagName(document.body, "h1").length);// → 1 console.log(byTagName(document.body, "span").length);// → 3 var para = document.querySelector("p");
console.log(byTagName(para, "span").length);
// → 2
Pălăria pisicii Extindeți animația pisicii astfel încât atât pisica, cât și pălăria lui să zboare pe părțile opuse ale elipsei.
Sau lasă pălăria să zboare în jurul pisicii. Sau veniți cu altceva interesant.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ă de programe care pot schimba conținutul, stilul și structura documentului. Vederea 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. În orice caz, 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ă modificarea acesteia folosind un limbaj de scripting precum JavaScript.
Cum se accesează DOM-ul?Nu trebuie să faci nimic special pentru a manipula DOM. Diferitele browsere au implementări diferite ale DOM, iar aceste implementări arată grade diferite de conformitate cu standardul DOM real (un subiect pe care am încercat să evităm să intrăm în această documentație), dar fiecare browser folosește un DOM diferit pentru a face paginile web interoperabile. cu limbaje de scripting.
Prin crearea unui script folosind elementul sau prin includerea instrucțiunilor într-o pagină web pentru a încărca scriptul, puteți începe imediat să utilizați interfața de programare a aplicației (API), folosind elementele fie pentru a interacționa cu documentul în sine, fie pentru a obține descendenți de acel document, adică diverse elemente de pe pagină. Programarea dvs. DOM poate fi ceva la fel de simplă ca imprimarea unui mesaj folosind o funcție de obiect sau poate utiliza 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, acest cod setează o funcție atunci 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 >// lansează această funcție la încărcarea unei ferestre de document. onload = function () ( // crearea mai multor elemente // într-o pagină HTML goală titlu = document. createElement( "h1" ) ; heading_text = document. createTextNode( "Big Head!" ) ; heading. appendChild( heading_text ) ; document . body.appendChild( titlu) ;< body >Tipuri importante de dateAceastă secțiune are scopul de a descrie pe scurt diferitele tipuri și obiecte într-un mod simplu și accesibil. Există o serie de tipuri de date diferite care sunt utilizate în API la care ar trebui să acordați atenție. Pentru simplitate, exemplul de sintaxă din această secțiune se referă în mod obișnuit la noduri ca element s, matrice de noduri ca nodeList s (sau pur și simplu elemente s), iar atributele nodului ca pur și simplu atribut s.
Mai jos este un tabel cu o scurtă descriere a acestor tipuri de date.
| document | Când un membru returnează un obiect de tip document (de exemplu, proprietatea proprietarDocument a elementului returnează documentul la care se referă), 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 pur și simplu că acest element returnează un element care a fost pur și simplu 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:
Aceste metode sunt echivalente. În prima metodă, item() este singura metodă a obiectului NodeList. Acesta din urmă folosește sintaxa normală a matricei pentru a obține a doua valoare din listă. |
| atribut | 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 rar le puteți folosi în acest fel. |
| numităNodeMap | namedNodeMap este similar cu o matrice, dar elementele sunt accesate după nume sau index. Accesul prin index este doar pentru comoditatea listării, deoarece Elementele nu au o ordine specifică î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 |
Acesta este un tutorial despre obiecte și lucruri reale pe care le puteți folosi pentru a manipula ierarhia DOM. Există multe locuri î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ă este în acel obiect de formă.
În plus, relația dintre obiecte și interfețele pe care le implementează în DOM poate fi surprinzătoare și această secțiune încearcă să spună puțin despre interfețele existente în DOM și despre cum pot fi accesate.
Interfețe și obiecteMulte obiecte implementează acțiuni din mai multe interfețe. Obiectul tabel, de exemplu, implementează unul special care include metode precum createCaption și insertRow . Dar, deoarece acesta este un tabel, este și un element HTML, table implementează interfața Element, descrisă în secțiune. Î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 este derivat Element.
Var table = 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 DOMAceastă 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 când utilizați 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 foarte des în programarea DOM. În termeni simpli, obiectul fereastră reprezintă ceva ca un browser, iar obiectul document reprezintă rădăcina documentului în sine. Element moștenește din interfața comună Node, iar aceste interfețe împreună oferă multe metode și proprietăți care pot fi aplicate elementelor 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 o listă scurtă de membri API obișnuiți utilizați în programarea paginilor web și XML folosind DOM:
- parentNode.appendChild(nod)
Acest document conține exemple pentru fiecare interfață pe care o puteți utiliza în dezvoltarea dvs. În unele cazuri, exemplele sunt pagini web cu drepturi depline cu acces la DOM-ul din element, listând, de asemenea, elementele necesare rulării script-ului pe formular și elementele HTML pe care vor fi efectuate operațiunile DOM. 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 exemple care doar demonstrează elementele de bază ale modului în care interfețele interacționează cu elementele HTML, puteți pregăti o pagină de test în care veți plasa funcții în interiorul scripturilor. Următoarea pagină web foarte simplă conține un element antet în care puteți plasa funcții pentru a testa interfața. Pagina conține mai multe elemente cu atribute care pot fi returnate, setate sau, cu alte cuvinte, manipulate și conține interfața cu utilizatorul necesară pentru a apela 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ă acestea î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, value) ( dacă (document. corp) eval ("document.body." + attr+ "="" + value+ """ ) ; else 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 închis" >albastru închis< 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 paginii 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ți ale paginii web accesibile din DOM (de exemplu, culoarea fundalului, culoarea linkului și culoarea textului). Cu toate acestea, atunci când dezvoltați pagini de testare, testarea interfețelor, după cum ați citit, este o parte importantă a învățării cum să lucrați eficient cu DOM.
Testarea proprietății tagName
var text = element.innerHTML;
element.innerHTML = "";
Atribuirea unui nou innerHTML suprascrie codul, chiar dacă noua valoare este atașată la cea actuală (+=). Scripturile adăugate în acest fel nu sunt executate.
outerHTML
Conține întregul element și nu poate fi schimbat. Din punct de vedere tehnic, scrierea pe 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 comentarii
textContent
element.textContent - text din interiorul elementului fără etichete.
Există, de asemenea, o proprietate non-standard numită innerText care are multe în comun cu textContent.
ascuns
element.hidden = adevărat
Atributul ascuns nu este acceptat în IE11.
Cele mai multe atribute standard din DOM devin proprietăți ale obiectului:
element.id = „id”
Pentru atributele non-standard, proprietatea nu este creată (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. Astfel de 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), în timp ce proprietățile sunt sensibile la majuscule și minuscule (javaScript).
Valoarea atributului este întotdeauna un șir.
Atribut: a.getAttribute("href") - afișează exact 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.
Atributul clasei corespunde a două proprietăți:
className - șir
classList — obiect
Metode obiect classList:
element.classList.contains("clasa") - verifică dacă un obiect conține o clasă dată
element.classList.add(„clasa”)
element.classList.remove("clasa")
element.classList.toggle("clasa")
classList este o pseudo-matrice și poate fi iterată printr-o buclă for.
atributele datelorAtributele 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
parent.contains(child) — adevărat 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 nodurilorvar div = 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) - va funcționa 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; metoda de inserare face acest lucru automat.
element.insertAdjacentHTML(unde, html) - inserează cod HTML arbitrar oriunde în document. Unde specifică unde trebuie inserat html-ul î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 nod,
node.before(...nodes) – inserează noduri înainte de nodul nod,
node.replaceWith(...nodes) – inserează noduri în loc de node .
aici nodurile sunt noduri sau șiruri, în orice cantități și combinații, enumerate separate prin virgule.
var fragment = document.createDocumentFragment() - simulează un nod DOM care, atunci când este introdus într-un document, dispare, lăsând doar descendenții săi. Nu este recomandat în browserele moderne.
element.cloneNode(true) - copie profundă a elementului
element.cloneNode(false) - copie fără elemente copil
parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() - elimină un element direct, fără referire la părintele său.
Metodele returnează nodul la distanță
Citeste si...
