Koduleht » Kodeerimine » 15 JavaScript-meetodid veebiarendajate DOM-i manipuleerimiseks

    15 JavaScript-meetodid veebiarendajate DOM-i manipuleerimiseks

    Veebiarendajana peate tihtipeale manipuleerima DOM, objekti mudel, mida brauserid kasutavad täpsustage loogiline struktuur veebilehtede ja selle struktuuri alusel muuta HTML-elemendid ekraanil.

    HTML määratleb vaikimisi DOM struktuur. Paljudel juhtudel võite soovida seda JavaScriptiga manipuleerida, tavaliselt selleks, et lisada täiendavaid funktsioone saidile.

    IMAGE: Google'i arendajad

    Selles postituses leiate nimekirjast 15 põhilist JavaScript-meetodit seda abi DOMi manipuleerimisele. Tõenäoliselt kasutaksite neid meetodeid sageli oma koodis ja sattuksite need ka meie JavaScript-õpetustesse.

    1. querySelector ()

    The querySelector () meetod tagastab esimese elemendi, mis sobib ühe või mitme CSS-i valijaga. Kui vaste ei leita, naaseb see null.

    Enne seda querySelector () kasutusele, kasutasid arendajad laialdaselt getElementById () meetodit tõmbab määratud elemendiga elemendi id väärtus.

    Kuigi getElementById () on ikka veel kasulik meetod, kuid uuem querySelector () ja querySelectorAll () me oleme vabad mis tahes CSS-selektoril põhinevad sihtelemendid, seega on meil rohkem paindlikkust.

    Süntaksi
    var ele = document.querySelector (valija);
    • ele - Esimene sobitamise element või null (kui ükski element ei sobi valijatega)
    • valija - üks või mitu CSS-selektorit, näiteks "#fooId", ".fooClassName", ".class1.class2", või ".class1, .class2"
    Koodi näide

    Selles näites on esimene

    valitakse querySelector () meetod ja selle värvus muutub punaseks.

     
    lõikes 1
     
    lõik 2
     
    div üks
     
    lõik 3
     
    div kaks
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'punane';
    Interaktiivne demo

    Testige querySelector () meetodit järgmises interaktiivses demos. Sisestage lihtsalt valija, mis sobib siniste kastide sees olevate valijatega (nt. #three) ja klõpsake nuppu Vali. Pange tähele, et kui kirjutad .blokeeri, ainult selle esimeses astmes valitakse.

    2. querySelectorAll ()

    Erinevalt querySelector () mis tagastab ainult kõigi sobivate elementide esimese astme, querySelectorAll () tagastab kõik elemendid, mis vastavad määratud CSS-valijale.

    Sobivad elemendid tagastatakse kui a NodeList objekt, mis on tühi objekt, kui ühtegi sobivat elementi ei leita.

    Süntaksi
    var eles = document.querySelectorAll (valija);
    • eles - A NodeList objekt, mille kõik sobivad elemendid on vara väärtused. Objekt on tühi, kui vasteid ei leitud.
    • valija - üks või mitu CSS-selektorit, näiteks "#fooId", ".fooClassName", ".class1.class2", või ".class1, .class2"
    Koodi näide

    Järgnev näide kasutab sama HTML-i kui eelmine. Selles näites valitakse aga kõik lõiked koos querySelectorAll (), ja on sinine.

     
    lõikes 1
     
    lõik 2
     
    div üks
     
    lõik 3
     
    div kaks
     
     var cuts = document.querySelectorAll ('p'); (punktide var p kohta) p.style.color = 'blue';

    3. addEventListener ()

    Sündmused viidake sellele, mis juhtub HTML-elemendiga, nagu klõpsamine, fokuseerimine või laadimine, millele me JavaScriptiga reageerime. Saame määrata JS-i funktsioonid kuula nende sündmuste kohta elementides ja tehke midagi sündmuse toimumise ajal.

    Teil on kolm võimalust määrata teatud sündmusele funktsioon.

    Kui foo () on kohandatud funktsioon, saate selle registreerida klõpsuürituse kuulajana (nimetage seda nupu elemendi klõpsamisel) kolmel viisil:

    1.  
    2.  var btn = document.querySelector ('nupp'); btn.onclick = foo;
    3.  var btn = document.querySelector ('nupp'); btn.addEventListener ('kliki', foo);

    Meetod addEventListener () (kolmas lahendus) mõned plussid; see on uusim standard - võimaldab ühe ürituse puhul rohkem kui ühe funktsiooni määramist ürituse kuulajatena - ja see sisaldab kasulikku valikuvõimalust.

    Süntaksi
    ele.addEventListener (evt, kuulaja, [valikud]);
    • ele - HTML-element, mida ürituse kuulaja kuulab.
    • evt - Sihtmärk.
    • kuulaja - Tavaliselt on JavaScript-funktsioon.
    • võimalusi - (valikuline) Objekt, millel on loogiliste omaduste kogum (loetletud allpool).
    Valikud Mis juhtub, kui see on seatud tõsi?
    püüdmine

    Peatab sündmuse muljumise, st takistab iga sündmuse kuulaja kutsumist sama sündmuse tüübi jaoks elementide esivanemates.

    Selle funktsiooni kasutamiseks saate kasutada kahte süntaksit:

    1. ele.addEventListener (evt, kuulaja, tõsi)
    2. ele.addEventListener (evt, kuulaja, capture: true);
    üks kord

    Kuulajat nimetatakse ainult siis, kui sündmus esmakordselt toimub, siis see automaatselt sündmusest eemaldatakse ja seda enam ei käivitata.
    passiivne

    Sündmuse vaiketoimingut ei saa peatada meetodiga PrevDefault ().
    Koodi näide

    Selles näites lisame kutsutud kliki sündmuse kuulaja foo, Euroopa 

     var btn = document.querySelector ('nupp'); btn.addEventListener ('kliki', foo); funktsioon foo () alarm ('hello');
    Interaktiivne demo

    Määrake foo () kohandatud funktsioon sündmuste kuulajana mis tahes kolmest järgmistest sündmustest: sisend, klõpsa või mouseover & käivitab valitud sündmuse alt sisendväljal, libistades, klõpsates või kirjutades selles.

    4. removeEventListener ()

    The removeEventListener () meetod eemaldab sündmuse kuulaja varem lisatud addEventListener () meetod üritusest, mida ta kuulab.

    Süntaksi
    ele.removeEventListener (evt, kuulaja, [valikud]);

    Kasutab sama süntaksit nagu ülalnimetatud addEventListener () meetod (va üks kord välistatud valik). Valikuid kasutatakse harva kuulatava kuulaja tuvastamiseks.

    Koodi näide

    Järgides koodi näiteid, mida me kasutasime addEventListener (), siin eemaldame klikitud sündmuse kuulaja foo alates