Tehnici DOM: părinte, copil și frați. Tehnici DOM: părinți, copii și frați Adăugarea și îndepărtarea copiilor

Dar, în loc să inserez un element special creat, pot folosi și appendChild () și doar să mut elementul existent. Să presupunem că avem următorul markup:

Pot modifica locația listei cu următorul cod:

Var myList \u003d document.getElementById ("lista mea"), container \u003d document.getElementById ("c"); container.appendChild (lista mea);

DOM-ul rezultat va arăta astfel:

Rețineți că întreaga listă a fost eliminată din locul său (deasupra paragrafului) și apoi inserată după ea, înainte de corpul de închidere. Deși metoda appendChild () este de obicei utilizată pentru a adăuga elemente create cu createElement (), poate fi folosită și pentru a muta elementele existente.

De asemenea, pot elimina complet copilul din DOM folosind removeChild (). Iată cum lista noastră este eliminată din exemplul anterior:

Var myList \u003d document.getElementById ("lista mea"), container \u003d document.getElementById ("c"); container.removeChild (lista mea);

Elementul a fost acum eliminat. Metoda removeChild () returnează elementul eliminat și îl pot salva în caz că am nevoie mai târziu.

Var myOldChild \u003d document.body.removeChild (myList); document.body.appendChild (myOldChild);

Există, de asemenea, metoda ChildNode.remove (), care a fost adăugată relativ recent la specificații:

Var myList \u003d document.getElementById ("lista mea"); MyList.remove ();

Această metodă nu returnează un obiect la distanță și nu funcționează în IE (numai Edge). Și ambele metode elimină nodurile text în același mod ca și nodurile elementelor.

Înlocuirea copiilor

Pot înlocui copilul existent cu unul nou, indiferent dacă acest element nou există sau l-am creat de la zero. Iată marcajul:

Text de exemplu

Var myPar \u003d document.getElementById ("par"), myDiv \u003d document.createElement ("div"); myDiv.className \u003d "exemplu"; myDiv.appendChild (document.createTextNode („Text element nou”)); document.body.replaceChild (myDiv, myPar);

După cum puteți vedea, metoda replaceChild () ia două argumente: elementul nou și elementul vechi pe care îl înlocuiește.

De asemenea, pot folosi această metodă pentru a muta un element existent. Aruncați o privire la următorul HTML:

Exemplu de text 1

Exemplu de text 2

Exemplu de text 3

Pot înlocui al treilea paragraf cu primul paragraf cu următorul cod:

Var myPar1 \u003d document.getElementById ("par1"), myPar3 \u003d document.getElementById ("par3"); document.body.replaceChild (myPar1, myPar3);

Acum, DOM-ul generat arată astfel:

Exemplu de text 2

Exemplu de text 1

Aducerea anumitor copii

Există mai multe moduri diferite de a selecta un anumit element. După cum s-a arătat mai devreme, pot începe folosind colecția pentru copii sau proprietatea childNodes. Dar să aruncăm o privire la alte opțiuni:

Proprietățile firstElementChild și lastElementChild fac exact ceea ce numele lor s-ar putea aștepta să facă: selectează primul și ultimul element secundar. Să revenim la marcajul nostru:

• Exemplul unu
• Exemplul doi
• Exemplul trei
• Exemplul patru
• Exemplul cinci
• Exemplul șase

Pot selecta primul și ultimul element folosind aceste proprietăți:

Var myList \u003d document.getElementById ("lista mea"); console.log (myList.firstElementChild.innerHTML); // „Exemplul unu” console.log (myList.lastElementChild.innerHTML); // „Exemplul șase”

De asemenea, pot folosi proprietățile previousElementSibling și nextElementSibling dacă doresc să selectez alte elemente copil decât primul sau ultimul. Acest lucru se realizează prin combinarea proprietăților firstElementChild și lastElementChild:

Var myList \u003d document.getElementById ("lista mea"); console.log (myList.firstElementChild.nextElementSibling.innerHTML); // „Exemplul doi” console.log (myList.lastElementChild.previousElementSibling.innerHTML); // „Exemplul cinci”

Există, de asemenea, proprietăți similare firstChild, lastChild, previousSibling și nextSibling, dar țin cont de toate tipurile de noduri, nu doar de elemente. De regulă, proprietățile care consideră doar nodurile elementelor sunt mai utile decât cele care selectează toate nodurile.

Inserarea conținutului în DOM

Am analizat deja modalități de a insera elemente în DOM. Să trecem la un subiect asociat și să aruncăm o privire asupra noilor opțiuni de inserare a conținutului.

În primul rând, există o metodă simplă insertBefore (), care este foarte asemănătoare cu replaceChild (), acceptă două argumente și, în același timp, funcționează atât cu elemente noi, cât și cu cele existente. Iată marcajul:

Observați paragraful, îl voi elimina mai întâi și apoi îl voi introduce înaintea listei, totul dintr-o dată:

Var myList \u003d document.getElementById ("lista mea"), container \u003d document.getElementBy ("c"), myPar \u003d document.getElementById ("par"); container.insertBefore (myPar, myList);

În HTML rezultat, paragraful va fi înaintea listei și acesta este un alt mod de a înfășura elementul.

La fel ca replaceChild (), insertBefore () ia două argumente: elementul de adăugat și elementul înaintea căruia dorim să îl inserăm.

Această metodă este simplă. Să încercăm acum un mod mai puternic de inserare: metoda insertAdjacentHTML ().

De obicei, dezvoltatorii folosesc jQuery atunci când trebuie să facă ceva cu DOM. Cu toate acestea, aproape orice manipulare DOM poate fi făcută în JavaScript pur folosind API-ul DOM.

Să aruncăm o privire mai atentă la acest API:

La final, veți scrie propria bibliotecă DOM simplă pe care o puteți folosi în orice proiect.

Solicitări DOM

Interogările DOM sunt făcute utilizând metoda .querySelector (), care ia ca argument un selector CSS arbitrar.

Const myElement \u003d document.querySelector ("# foo\u003e div.bar")

Se va returna primul articol care se potrivește. Alternativ, puteți verifica dacă un element se potrivește cu un selector:

MyElement.matches ("div.bar") \u003d\u003d\u003d adevărat

Dacă doriți să obțineți toate elementele care se potrivesc cu un selector, utilizați următoarea construcție:

Const myElements \u003d document.querySelectorAll (". Bar")

Dacă știți ce părinte să faceți referință, puteți căuta pur și simplu printre copiii săi, în loc să căutați peste tot codul:

Const myChildElemet \u003d myElement.querySelector ("input") // În loc de: // document.querySelector ("# foo\u003e div.bar input")

Se pune întrebarea: de ce să folosim apoi alte metode mai puțin convenabile precum .getElementsByTagName ()? Există o mică problemă - ieșirea ieșirii .querySelector () nu este actualizată, iar când adăugăm un element nou (vezi) nu se modifică.

Const elements1 \u003d document.querySelectorAll ("div") const elements2 \u003d document.getElementsByTagName ("div") const newElement \u003d document.createElement ("div") document.body.appendChild (newElement) elements1.length \u003d\u003d\u003d elements2.length // fals

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

Cum lucrez cu listele?

În plus, .querySelectorAll () are două mici nuanțe. Nu puteți apela doar la metode pentru rezultate și așteptați ca acestea să se aplice fiecăruia dintre ele (așa cum s-ar putea să vă obișnuiți cu jQuery). În orice caz, va trebui să iterați pe toate elementele din buclă. În al doilea rând, obiectul returnat este o listă de elemente, nu o matrice. Prin urmare, metodele matrice nu vor funcționa. Desigur, există metode pentru liste, ceva de genul .forEach (), dar, din păcate, nu sunt potrivite pentru toate cazurile. Deci, este mai bine să convertiți lista într-o matrice:

// Utilizarea Array.from () Array.from (myElements) .forEach (doSomethingWithEachElement) // Sau prototip Array (pre ES6) Array.prototype.forEach.call (myElements, doSomethingWithEachElement) // Mai simplu: .forEach.call (myElements) , faceSomethingWithEachElement)

Fiecare element are câteva proprietăți care se referă la „familie”.

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Deoarece interfața Element este moștenită de la interfața Node, sunt prezente și următoarele proprietăți:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

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

MyElement.firstChild.nodeType \u003d\u003d\u003d 3 // acest element va fi un nod text

Adăugarea de clase și atribute

Adăugarea unei clase noi este foarte simplă:

MyElement.classList.add ("foo") myElement.classList.remove ("bar") myElement.classList.toggle ("baz")

Adăugarea unei proprietăți unui element este exact la fel ca pentru orice obiect:

// Obțineți valoarea atributului const value \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 metodele .getAttibute (), .setAttribute () și .removeAttribute (). Acestea vor schimba imediat atributele HTML ale elementului (spre deosebire de proprietățile DOM), ceea ce va face ca browserul să fie redesenat (puteți vedea toate modificările examinând elementul utilizând instrumentele de dezvoltare ale browserului). Astfel de redesenări nu numai că necesită mai multe resurse decât setarea proprietăților DOM, dar pot duce și la erori neașteptate.

De obicei, acestea sunt utilizate 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 proprietățile HTML în moștenire (vezi).

Adăugarea stilurilor CSS

Acestea sunt adăugate î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 valorile după unele calcule, este mai bine să utilizați window.getComputedStyle (). Această metodă ia un element și returnează o declarație CSSStyleDeclaration care conține stilurile atât ale elementului în sine, cât și ale părintelui său:

Window.getComputedStyle (myElement) .getPropertyValue („margin-left”)

Schimbarea DOM

Puteți muta elemente:

// Adăugați element1 ca ultimul element al elementului2 element1.appendChild (element2) // Introduceți elementul2 ca element secundar al elementului 1 înainte de elementul3 element1.insertBefore (element2, element3)

Dacă nu doriți să vă mutați, dar trebuie să inserați o copie, utilizați:

// Creați o clonă const myElementClone \u003d myElement.cloneNode () myParentElement.appendChild (myElementClone)

Metoda .cloneNode () ia ca argument o valoare booleană, dacă este adevărată, sunt clonate și elementele copil.

Desigur, puteți crea elemente noi:

Const myNewElement \u003d document.createElement ("div") const myNewTextNode \u003d document.createTextNode ("ceva text")

Și apoi introduceți-le așa cum se arată mai sus. Nu veți putea șterge un element direct, dar îl puteți face prin elementul părinte:

MyParentElement.removeChild (myElement)

De asemenea, puteți aplica indirect:

MyElement.parentNode.removeChild (myElement)

Metode pentru elemente

Fiecare element are proprietăți precum .innerHTML și .textContent, conțin codul HTML și, în consecință, textul în sine. Următorul exemplu schimbă conținutul unui element:

// Schimbă HTML myElement.innerHTML \u003d `

Schimbarea HTML este de fapt o idee proastă, deoarece pierde orice modificare făcută anterior și, de asemenea, suprasolicită gestionarele de evenimente. Este mai bine să utilizați această metodă numai aruncând complet HTML și înlocuindu-l cu o copie de pe server. Asa:

Const link \u003d document.createElement ("a") const text \u003d document.createTextNode ("continuați să citiți ...") const hr \u003d document.createElement ("hr") link.href \u003d "foo.html" link.appendChild ( text) myElement.appendChild (link) myElement.appendChild (hr)

Cu toate acestea, acest lucru va implica două redesenări în browser, în timp ce .innerHTML va avea ca rezultat doar unul. Puteți rezolva acest lucru adăugând mai întâi totul la DocumentFragment, apoi adăugând fragmentul dorit:

Fragment const \u003d document.createDocumentFragment () fragment.appendChild (text) fragment.appendChild (hr) myElement.appendChild (fragment)

Manipulatori de evenimente

Unul dintre cei mai simpli manipulatori:

MyElement.onclick \u003d funcție onclick (eveniment) (console.log (event.type + "a fost concediat"))

Dar, de regulă, ar trebui evitată. Aici .onclick este o proprietate a unui element și, teoretic, îl puteți schimba, dar nu puteți adăuga alți manipulatori folosind o altă funcție care se referă la cea veche.

Este mai bine să utilizați .addEventListener () pentru a adăuga handlers. Este nevoie de trei argumente: tipul evenimentului, o funcție care va fi apelată ori de câte ori este declanșată și un obiect de configurare (vom reveni la aceasta mai târziu).

MyElement.addEventListener ("clic", funcție (eveniment) (console.log (event.type + "a fost concediat"))) myElement.addEventListener ("clic", funcție (eveniment) (console.log (event.type + ") am fost concediat din nou ")))

Proprietatea event.target se referă la elementul la care este atașat evenimentul.

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

// Proprietatea `forms` este o matrice care conține referințe la toate formularele const myForm \u003d document.forms const myInputElements \u003d myForm.querySelectorAll (" input ") Array.from (myInputElements) .forEach (el \u003d\u003e (el.addEventListener (" schimbare ", funcție (eveniment) (console.log (event.target.value)))))

Prevenirea acțiunilor implicite

Pentru aceasta, se utilizează metoda .preventDefault (), care blochează acțiunile standard. De exemplu, va bloca trimiterile de formulare dacă autorizarea de la client nu a avut succes:

MyForm.addEventListener ("trimiteți", funcție (eveniment) (const name \u003d this.querySelector ("# name") if (name.value \u003d\u003d\u003d "(! LANG: Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Metoda .stopPropagation () vă va ajuta dacă aveți un anumit handler de eveniment atașat la elementul copil și un al doilea handler pentru același eveniment atașat la părinte.

După cum sa menționat mai devreme, metoda .addEventListener () ia un al treilea argument opțional, un obiect de configurare. Acest obiect trebuie să conțină oricare dintre următoarele proprietăți booleene (în mod implicit, toate false):

• captură: evenimentul va fi atașat acestui element înainte de orice alt element de mai jos în DOM;
• o dată: evenimentul poate fi fixat o singură dată;
• pasiv: event.preventDefault () va fi ignorat (excepție în momentul erorii).

Cea mai comună proprietate este .capture și este atât de obișnuită încât există o cale scurtă de a o nota: în loc să o treceți într-un obiect de configurare, trebuie doar să specificați valoarea acesteia aici:

MyElement.addEventListener (tip, ascultător, adevărat)

Handlerele sunt eliminate folosind metoda .removeEventListener (), care ia două argumente: tipul evenimentului și o referință la handler de eliminat. De exemplu, proprietatea odată poate fi implementată astfel:

MyElement.addEventListener ("modificare", funcție de ascultare (eveniment) (console.log (event.type + "a fost declanșat pe" + aceasta) this.removeEventListener ("modificare", ascultător)))

Moştenire

Să presupunem că aveți un element și doriți să adăugați un gestionar de evenimente pentru toți copiii acestuia. Apoi, va trebui să le parcurgeți folosind metoda myForm.querySelectorAll („input”) așa cum se arată mai sus. Cu toate acestea, puteți adăuga elemente la formular și puteți verifica conținutul acestora folosind event.target.

MyForm.addEventListener ("schimbare", funcție (eveniment) (const target \u003d event.target if (target.matches ("input")) (console.log (target.value))))

Și încă un avantaj al acestei metode este că gestionarul se va lega automat de elementele copil noi.

Animaţie

Cel mai simplu mod de a adăuga animație este utilizarea CSS cu proprietatea de tranziție. Dar pentru mai multă flexibilitate (cum ar fi jocul) JavaScript este mai potrivit.

Apelarea metodei window.setTimeout () până la finalizarea animației nu este o idee bună, deoarece aplicația dvs. poate îngheța, în special pe dispozitivele mobile. Mai bine să utilizați window.requestAnimationFrame () pentru a salva toate modificările până la următoarea redesenare. Are o funcție ca argument, care, la rândul său, primește un timestamp:

Const start \u003d window.performance.now () const duration \u003d 2000 window.requestAnimationFrame (function fadeIn (now)) (const progress \u003d now - start myElement.style.opacity \u003d progres / durata if (progres< duration) { window.requestAnimationFrame(fadeIn) } }

Se realizează astfel o animație foarte lină. În articolul său, Mark Brown discută acest subiect.

Scrierea bibliotecii

Faptul că în DOM trebuie să iterați elemente tot timpul pentru a efectua orice operații pe ele poate părea destul de plictisitor în comparație cu sintaxa jQuery $ (". Foo"). Css ((culoare: "roșie")). Dar de ce nu scrieți câteva dintre propriile metode pentru a ușura această sarcină?

Const $ \u003d funcție $ (selector, context \u003d document) (const elements \u003d Array.from (context.querySelectorAll (selector)) return (elements, html (newHtml) (this.elements.forEach (element \u003d\u003e (element.innerHTML \u003d newHtml)) returnează acest lucru), css (newCss) (this.elements.forEach (element \u003d\u003e (Object.assign (element.style, newCss))) returnează acest lucru), pe (eveniment, handler, opțiuni) (this.elements .forEach (element \u003d\u003e (element.addEventListener (eveniment, handler, opțiuni))) returnează acest lucru)))

Pre