Pagrindinis » Kodavimas » 15 „JavaScript“ metodai DOM manipuliavimui žiniatinklio kūrėjams

    15 „JavaScript“ metodai DOM manipuliavimui žiniatinklio kūrėjams

    Kaip žiniatinklio kūrėjas dažnai turite manipuliuoti DOM, objekto modelis, kurį naudoja naršyklės nurodyti loginę struktūrą tinklalapių ir pagal šią struktūrą atvaizduoti HTML elementus ekrane.

    HTML apibrėžia numatytoji DOM struktūra. Tačiau daugeliu atvejų galbūt norėsite tai manipuliuoti naudodami „JavaScript“, paprastai norėdami pridėti papildomų funkcijų į svetainę.

    IMAGE: „Google“ kūrėjai

    Šiame pranešime rasite sąrašą 15 pagrindinių „JavaScript“ metodų kad pagalba DOM manipuliavimui. Tikėtina, kad šiuos metodus dažnai naudosite savo kode, ir jūs taip pat pateksite į mūsų „JavaScript“ vadovus.

    1. querySelector ()

    The querySelector () metodas grąžina pirmąjį elementą, kuris atitinka vieną ar daugiau CSS parinkčių. Jei nerastas atitikimas, jis grįžta null.

    Prieš querySelector () buvo įdiegta, kūrėjai plačiai naudojasi getElementById () metodas atsiunčia elementą su nurodytu ID vertė.

    Nors getElementById () vis dar yra naudingas metodas, bet su naujesniu querySelector () ir querySelectorAll () metodai, kuriuos mes galime laisvai tiksliniai elementai pagal bet kurį CSS selektorių, todėl turime daugiau lankstumo.

    Sintaksė
    var ele = document.querySelector (selektorius);
    • ele - Pirmasis atitikimo elementas arba null (jei elementai neatitinka selektorių)
    • selektorių - vienas ar daugiau CSS selektorių, pvz "#fooId", ".fooClassName", ".class1.class2", arba ".class1, .class2"
    Kodo pavyzdys

    Šiame pavyzdyje pirmasis

    pasirenkamas su querySelector () metodas ir jo spalva pasikeičia į raudoną.

     
    pirmos pastraipos
     
    2 dalis
     
    div vienas
     
    trečias
     
    du du
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'raudona';
    Interaktyvi demonstracija

    Patikrinkite querySelector () metodą šiame interaktyviame demonstracijoje. Tiesiog įveskite selektorių, atitinkantį tuos, kuriuos galite rasti mėlynųjų dėžių viduje (pvz.,. #three) ir spustelėkite mygtuką Pasirinkti. Atkreipkite dėmesį, kad įvesdami .blokuoti, tik jo pirmoji instancija bus pasirinktas.

    2. querySelectorAll ()

    Skirtingai querySelector () kuri grąžina tik pirmuosius visų atitinkamų elementų, querySelectorAll () grąžina visus elementus, kurie atitinka nurodytą CSS selektorių.

    Atitikimo elementai grąžinami kaip a „NodeList“ objektas, kuris bus tuščias objektas, jei nebus surastų atitinkamų elementų.

    Sintaksė
    var eles = document.querySelectorAll (selektorius);
    • eles - A „NodeList“ objektas su visais suderinamais elementais kaip turto vertės. Objektas tuščias, jei nerastas atitikimas.
    • selektorių - vienas ar daugiau CSS selektorių, pvz "#fooId", ".fooClassName", ".class1.class2", arba ".class1, .class2"
    Kodo pavyzdys

    Toliau pateiktas pavyzdys naudoja tą patį HTML kaip ir ankstesnis. Tačiau šiame pavyzdyje visos pastraipos yra pasirinktos su querySelectorAll (), ir yra mėlynos spalvos.

     
    pirmos pastraipos
     
    2 dalis
     
    div vienas
     
    trečias
     
    du du
     
     var pastraipos = document.querySelectorAll ('p'); už (dalių p) p.style.color = 'blue';

    3. addEventListener ()

    Renginiai kreipkitės į tai, kas vyksta su HTML elementu, pvz., paspaudimu, fokusavimu ar įkėlimu, į kuriuos galime reaguoti su „JavaScript“. Mes galime priskirti JS funkcijas klausykitės už šiuos įvykius elementuose ir kažką daryti, kai įvyko įvykis.

    Yra trys būdai priskirti tam tikro įvykio funkciją.

    Jei foo () yra pasirinktinė funkcija, galite ją užregistruoti kaip paspaudimo įvykio klausytojas (skambinkite, kai paspaudžiamas mygtuko elementas) trimis būdais:

    1.  
    2.  var btn = document.querySelector ('mygtukas'); btn.onclick = foo;
    3.  var btn = document.querySelector ('mygtukas'); btn.addEventListener („spustelėkite“, „foo“);

    Metodas addEventListener () (trečiasis sprendimas) kai kurie privalumai; tai yra naujausias standartas, leidžiantis vienam įvykiui priskirti daugiau nei vieną funkciją kaip renginio klausytojus - ir yra naudingas parinkčių rinkinys.

    Sintaksė
    ele.addEventListener (evt, klausytojas, [parinktys]);
    • ele - HTML elementas, kurio klausytojas klausysis.
    • evt - Tikslinis įvykis.
    • klausytojas - Paprastai „JavaScript“ funkcija.
    • galimybės - (pasirinktinai) Objektas, turintis loginių savybių rinkinį (išvardytas žemiau).
    Galimybės Kas atsitinka, kai ji yra nustatyta tiesa?
    sugauti

    Sustabdo įvykių burbulavimą, t. Y. Neleidžia bet kurio įvykio klausytojui skambinti to paties įvykio tipui elemento protėviuose.

    Jei norite naudoti šią funkciją, galite naudoti 2 sintakses:

    1. ele.addEventListener (evt, klausytojas, tiesa)
    2. ele.addEventListener (evt, klausytojas, capture: true);
    kartą

    Klausytojas vadinamas tik pirmą kartą, kai įvykis įvyksta, tada jis automatiškai atjungiamas nuo įvykio ir jo nebebus paleistas.
    pasyvus

    Numatytasis įvykio veiksmas negali būti sustabdytas naudojant prevDefault () metodą.
    Kodo pavyzdys

    Šiame pavyzdyje pridedame paspaudimo įvykio klausytoją foo, į 

     var btn = document.querySelector ('mygtukas'); btn.addEventListener („spustelėkite“, „foo“); funkcija foo () alarm („hello“);
    Interaktyvi demonstracija

    Priskirti foo () pritaikytas kaip įvykių klausytojas bet kuriam iš šių trijų įvykių: įvesties, spustelėkite arba mouseover & suaktyvinkite pasirinktą įvykį apačioje esančiame įvesties lauke, paspaudę, spustelėdami arba įvesdami jį.

    4. removeEventListener ()

    The removeEventListener () metodas atsiima įvykio klausytoją anksčiau pridėta addEventListener () metodas nuo įvykio, kurį jis klausosi.

    Sintaksė
    ele.removeEventListener (evt, klausytojas, [parinktys]);

    Naudoja tą pačią sintaksę kaip ir anksčiau addEventListener () metodas (išskyrus kartą neįtraukta parinktis). Pasirinkimo galimybės yra labai specifinės, kad atpažintų klausytoją.

    Kodo pavyzdys

    Vadovaudamiesi kodo pavyzdžiu, kurį naudojome addEventListener (), čia pašaliname paspaudimo įvykio klausytoją foo nuo