Tehnicienii care lucrează cu dom: elemente părinte, copil și adiacente. Manipulări cu DOM pe JavaScript pur verificând existența filialelor

De regulă, atunci când trebuie să efectuați orice acțiune cu DOM, dezvoltatorii folosesc jQuery. Cu toate acestea, aproape orice manipulare DOM se poate face pe JavaScript pur folosind DOM API.

Luați în considerare acest API în detaliu:

La final veți scrie biblioteca simplă DOM, care poate fi utilizată în orice proiect.

DOM solicitări

Solicitările DOM se efectuează utilizând metoda.QuerySelector (), care este primită ca argument un selector CSS arbitrar.

Const myelement \u003d document.QuerySelector ("# foo\u003e div.bar")

El va returna primul element de fit. Dimpotrivă, este posibil să verificați dacă elementul selectorului corespunde:

MyElement.Matches ("div.bar") \u003d\u003d\u003d Adevărat

Dacă aveți nevoie să obțineți toate elementele corespunzătoare selectorului, utilizați următorul design:

Const myelemente \u003d document.querySelectorall ("bar")

Dacă știți cum să vă referiți la elementul părinte, puteți căuta pur și simplu printre elementele copilului său, în loc să căutați pe tot parcursul codului:

Const mychildelemet \u003d myelement.QuerySelector ("intrare") // în schimb: // document.querySelector ("# foo\u003e div.bar intrare")

Întrebarea apare: de ce utilizați apoi alte metode mai puțin convenabile cum ar fi .gelementsbytagname ()? Există o mică problemă - rezultatul de ieșire .QuerySelector () nu este actualizat și când adăugăm un nou element (vezi), nu se va schimba.

Const elemente1 \u003d document.querySelectorall ("div") const elemente2 \u003d document.getelementsytagname ("div") const nou -element \u003d document.Creeelement (document "div". Lungime \u003d\u003d\u003d Elemente2. Lungime // FALSE

De asemenea, QuerySelectorall () colectează totul într-o singură listă, ceea ce nu face foarte eficient.

Cum să lucrați cu liste?

În plus față de toate U.QuerySelectorall () există două nuanțe mici. Nu puteți doar să apelați metodele rezultatelor și să vă așteptați ca acestea să se aplice fiecăruia (așa cum ați putea fi obișnuiți să o faceți cu jQuery). În orice caz, va fi necesar să sorți toate elementele din ciclu. Al doilea - obiectul returnat este o listă de elemente, nu o matrice. În consecință, metodele de matrice nu vor funcționa. Desigur, există metode pentru liste, ceva de genul .Foreceh (), dar, din păcate, nu sunt potrivite pentru toate cazurile. Deci, este mai bine să convertiți o listă într-o matrice:

// utilizând Array.De () Array.De (MyElements) .Fore "sau prototip (până la ES6) Array.protype.Forech.Call (Myelemente, Dosomenetwitheachelement) // mai ușoară: )

Fiecare element are unele proprietăți care se referă la "familia".

MyElement.Children MyElement.FirsstelmentChild myeelement.LastelementChild myeelement.Previoulementsibling myeelement.nexTelementsibling

Deoarece interfața elementului (element) este moștenită din interfața nodului (nod), sunt prezente și următoarele proprietăți:

Myelement.Childnoduri myeelement.firstchild myeelement.Lastchild myelement.previoussibling myelement.nextsibling myelement.parennode myeelement.parentement

Primele proprietăți se referă la element, iar ultima (cu excepția .parelementului) poate fi listele de elemente de orice tip. În consecință, puteți verifica tipul de element:

Myelement.firstchild.noDetype \u003d\u003d\u003d 3 // Acest element va fi un nod text

Adăugarea de clase și atribute

Adăugați o nouă clasă este foarte simplă:

Myelement.classlist.add ("foo") myeelement.classlist.remove ("bar") myelement.classlist.toggle ("Baz")

Adăugarea unei proprietăți pentru un articol apare la fel ca pentru orice obiect:

// Obținerea valorii atributului const valoare \u003d myelement.Value // Setați atributul ca proprietate a elementului myelement.value \u003d "(! Lang: foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Puteți utiliza metode.getattribute (), .SetAttribute () i.removeattribute (). Acestea schimbă imediat atributele HTML ale elementului (spre deosebire de proprietățile DOM), care vor determina redresarea browserului (puteți vedea toate modificările studiind elementul utilizând instrumentele de dezvoltator din browser). Astfel de perverți nu numai că necesită mai multe resurse decât instalarea proprietăților DOM, dar pot duce, de asemenea, la erori neașteptate.

De regulă, ele sunt folosite pentru elemente care nu au proprietăți DOM corespunzătoare, cum ar fi Colspan. Sau dacă utilizarea lor este cu adevărat necesară, de exemplu, pentru moștenirea proprietăților HTML (vezi).

Adăugarea stilurilor CSS

Adăugați-le în același mod ca și alte proprietăți:

Myelement.style.marginleft \u003d "2em"

Unele proprietăți specifice pot fi setate folosind .Style, dar dacă doriți să obțineți valori după unele computere, este mai bine să utilizați fereastra.GetComplutestyle (). Această metodă primește un element și returnează CssstyleDeclară, care conține stiluri atât elementul însuși, cât și părintele acestuia:

Fereastră.GetComplutestyle (Myeelement) .GetPropertyValue ("Margin-stânga")

Schimba dom.

Puteți muta elemente:

// Adăugarea elementului1 ca element de ultim element2 Element1.appendandild (element2) // Insert element2 ca element element copil1 în fața elementului element31.vinserbore (element2, element3)

Dacă nu doriți să vă deplasați, dar trebuie să introduceți o copie, folosim:

// crearea unei clone const myelementclone \u003d myelement.clonenode () myparenelement.appendordild (MyelementClone)

Metoda. Clonenode () ia o valoare booleană ca argument, iar elementele copilului sunt, de asemenea, clonate.

Desigur, puteți crea elemente noi:

Const mynewelement \u003d document.creElement ("div") const mynewtextnode \u003d document.createtextnode ("unele text")

Și apoi introduceți-le așa cum se arată mai sus. Nu va funcționa direct pentru a șterge, dar îl puteți face prin elementul părinte:

Myparenelement.removechild (Myeelement)

Puteți contacta și indirect:

Myelement.parentNode.removechild (Myeelement)

Metode pentru elemente

Fiecare element are proprietăți precum .innerhtml i.textcccccccccontent, conțin cod HTML și, în consecință, textul în sine. Următorul exemplu modifică conținutul elementului:

// Schimbați html myelement.innerhtml \u003d `

De fapt, schimbarea în HTML este o idee rea, deoarece toate modificările făcute mai devreme sunt pierdute, iar manipultorii de evenimente sunt supraîncărcați. Este mai bine să folosiți această metodă numai căderea tuturor HTML și înlocuirea acestuia cu o copie de pe server. Ca aceasta:

Const link \u003d document.creelemente ("a") const text \u003d document.createtextnode ("Continuați lectură ...") const hr \u003d document.creelement ("hr") link.href \u003d "foo.html" link.appendordild ( Text) MyElement.appendandild (link) myeelement.appendandild (HR)

Cu toate acestea, acest lucru va implica doi redrawrs în browser, în timp ce .innerhtml va duce doar la unul. Puteți ocoli-o, dacă mai întâi adăugați totul la documentul de documentare și apoi adăugați un fragment de care aveți nevoie:

Const fragment \u003d document.CreatedocumentFragment () fragment.appendandchild (text) Fragment.appendandild (HR) MyElement.appendandild (fragment)

Stivuitoare de evenimente

Unul dintre cei mai simpli agenți:

Myelement.onclick \u003d funcția onClick (eveniment) (consola.log (eveniment.type + "a fost concediat"))

Dar, de regulă, ar trebui evitată. Aici.onclick este o proprietate de element și, în teorie, îl puteți schimba, dar nu veți putea adăuga alți manipulatori utilizând o altă caracteristică care se referă la cea veche.

Pentru a adăuga manipulatori este mai bine să utilizați.AdDeventlistener (). Este nevoie de trei argumente: tipul de eveniment, funcția care va fi numită de fiecare dată când este declanșată și obiectul de configurare (vom reveni mai târziu la acesta).

MyElement.AdDeventListener ("CLICK", FUNCTION (consola.log))) MyElement.AdDeventlistener ("CLICK", FUNCTION (EVENIMENT) (CONSOLE.LOG (Eveniment.type + "a fost concediat din nou"))

Proprietatea Event.TArget adaugă elementul pentru care evenimentul este fixat.

Și astfel puteți accesa toate proprietățile:

. , Funcție (eveniment) (consola.log (event.target.value))))

Prevenirea implicită

Pentru a face acest lucru, utilizați metoda.preventdefault (), care blochează acțiunile standard. De exemplu, va bloca trimiterea formularului dacă autorizația de pe partea clientului nu a avut succes:

Myform.addeventlistener ("Trimiteți", funcția (const name \u003d this.QuerySelector ("# # nume") dacă (nume.value \u003d\u003d\u003d "(! Lang: Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Metoda.Soppropagare () vă va ajuta dacă aveți un manipulator specific de evenimente, fixat în spatele elementului copil și al doilea manipulator al aceluiași eveniment atribuit părintelui.

Așa cum am menționat mai devreme, metoda .addeventlistener () ia al treilea argument opțional ca obiect cu configurația. Acest obiect trebuie să conțină oricare dintre următoarele proprietăți booleane (implicit toate în valoarea falsă):

• captură: evenimentul va fi atașat la acest element înainte de orice alt element de mai jos în DOM;
• odată: Evenimentul poate fi fixat numai o singură dată;
• pasiv: eveniment.preventdefault () va fi ignorat (excepție în timpul erorii).

Cea mai obișnuită proprietate este

Myelement.addeventlistener (tip, ascultător, adevărat)

Procesoarele sunt șterse utilizând metoda The.RemoveeventListener () Gazduirea a două argumente: tipul evenimentului și referința la funcția de ștergere. De exemplu, proprietatea ONC poate fi implementată după cum urmează:

MyElement.AdDeventlistener ("schimbare", Listener de funcții (eveniment) (consola.log (eveniment.type + "a fost declanșat pe" + acest) Acest.removeeventlistener ("schimbare", ascultător))

Moştenire

Să presupunem că aveți un element și doriți să adăugați un handler de evenimente pentru toate elementele copilului. Apoi, ar trebui să le conduceți în ciclu folosind metoda Myform.QuerySelectorlall ("intrare"), după cum se arată mai sus. Cu toate acestea, puteți adăuga pur și simplu elemente în formular și verificați conținutul lor utilizând evenimentul.target.

Myform.addeventlistener ("schimbare", funcție (eveniment) (const țint \u003d event.target dacă (țintă.Matches ("intrare") (consola.log (țintă.value)))))

Și încă un plus al acestei metode este că manipulatorul va fi legat automat la elemente noi de copii.

Animaţie

Cea mai ușoară modalitate de a adăuga animație folosind CSS cu proprietatea de tranziție. Dar pentru o mai mare flexibilitate (de exemplu, JavaScript este cel mai potrivit.

Apelați metoda Window.settimeout () până când animația sa terminat, nu este cea mai bună idee, deoarece aplicația dvs. poate atârna, în special pe dispozitivele mobile. Este mai bine să utilizați fereastră.RequalstaNimarăFrame () pentru a salva toate modificările la următoarea redesenare. Este nevoie de o funcție ca argument, care la rândul său primește o ștampilă de timp:

Const start \u003d fereastră.Performance.Now () const duration \u003d 2000 fereastră.RequentațieFrame (const progres \u003d acum - porniți myelement.style.Opacitate \u003d progres / durată dacă (progresul< duration) { window.requestAnimationFrame(fadeIn) } }

În acest fel, se realizează o animație foarte netedă. În articolul său, Mark Brown vorbește pe acest subiect.

Vă scriem biblioteca

Faptul că în DOM să efectueze orice operațiune cu elementele tot timpul trebuie să fie sortate, poate părea foarte plictisitor în comparație cu sintaxa de $ JQuery ("Foo"). CSS (Culoare: Red ") . Dar de ce să nu scrieți câteva din metodele voastre, facilitând această sarcină?

Const $ \u003d funcția $ (elemente const \u003d array.De (selectați.queryselectorlall (selector) retur (elemente, html (newtml) (element \u003d\u003e element.innerhtml \u003d newhtml)) returnează acest lucru), css (element \u003d\u003e obiect.assign (element.style, newcss))) returnați acest lucru), activat (eveniment, manipulator, opțiuni) (Acest lucru.Fore (element \u003d\u003e (element.addeventlistener (eveniment, manipulator, opțiuni))) returnați acest))

Aplicațiile complexe și grele web au devenit obișnuite astăzi. Crossbox și bibliotecile de tip jQuery ușor de utilizat cu funcționalitatea lor largă pot ajuta cu fermitate în manipularea Dom în zbor. Prin urmare, nu este surprinzător faptul că mulți dezvoltatori folosesc mai des biblioteci decât lucrează cu API nativ Dom, cu care au existat multe probleme. Și, deși distincțiile din browsere rămân încă o problemă, Dom este acum într-o formă mai bună de 5-6 ani în urmă, când JQuery a câștigat popularitate.

În acest articol, voi demonstra posibilitățile de DOM privind manipularea HTML, concentrându-se asupra relației elementelor parentale, a copilului și a elementelor vecine. În concluzie, voi da date privind sprijinirea acestor oportunități în browsere, dar considerăm că biblioteca de tip JQuery rămâne o opțiune bună datorită disponibilității bug-urilor și inconsecvențelor în implementarea funcționării native.

Numărarea filialelor

Pentru a demonstra, voi folosi următorul markup HTML, în timpul articolului îl vom schimba de mai multe ori:

• Exemplu unul.
• Exemplu doi.
• Exemplul trei.
• Exemplu patru.
• Exemplu de cinci.
• Exemplu șase.

Vary_list \u003d document.getelementbyid ("mylist"); Consola.log (mylist.children.length); // 6 consola.log (Mylist.ChildelementCount); // 6.

După cum puteți vedea, rezultatele sunt aceleași, deși tehnicile sunt utilizate diferite. În primul caz, folosesc proprietatea copiilor. Această proprietate este doar citită, returnează colecția de elemente HTML în interiorul elementului solicitat; Pentru a număra numărul lor, folosesc proprietatea de lungime a acestei colecții.

În al doilea exemplu, folosesc metoda ChildelementCount, care mi se pare un mod mai precis și potențial mai susținut (vom discuta mai târziu, nu cred că aveți probleme cu înțelegerea a ceea ce face).

Aș putea încerca să folosesc copii.Length (în loc de copii.Length), dar uita-te la rezultat:

Vary_list \u003d document.getelementbyid ("mylist"); consola.log (Mylist.Childnodes.Lend); // 13.

Returnează 13, deoarece copiii sunt o colecție de toate nodurile, inclusiv spațiile - consideră acest lucru dacă sunteți importantă decât diferența dintre filiale și elementele copilului.

Verificați existența filialelor

Pentru a verifica prezența elementului filialei, pot folosi metoda Haschildnodes (). Metoda returnează o valoare logică, raportând la disponibilitatea sau absența acestora:

Vary_list \u003d document.getelementbyid ("mylist"); consola.log (mylist.haschildnodes ()); // Adevărat.

Știu că există filiale în lista mea, dar pot schimba HTML astfel încât să nu fie; Acum, marcajul arată astfel:

Și aici este rezultatul noii lansare a lui Haschildnodes ():

Consola.log (mylist.haschildnodes ()); // Adevărat.

Metoda încă returnează adevărat. Deși lista nu conține niciun element, există un spațiu care este un tip valid de nod. Această metodă ia în considerare toate nodurile, nu numai elementele de noduri. Pentru a face haschildnodes () a revenit fals, trebuie să schimbăm din nou marcajul:

Și acum rezultatul așteptat este afișat în consola:

Consola.log (mylist.haschildnodes ()); // Fals

Bineînțeles, dacă știu că pot întâlni un spațiu, mai întâi voi verifica existența nodurilor copilului, apoi folosind proprietatea NodeType, definim dacă există elemente-elemente între ele.

Adăugarea și eliminarea filialelor

Există tehnici care pot fi utilizate pentru a adăuga și șterge elemente din DOM. Cel mai faimos dintre ele se bazează pe o combinație de metode de create () și a apendicchild ().

Var Myel \u003d document.Creeelement ("div"); document.body.appendandchild (Myel);

În acest caz, eu creez

Pre.