Mājas lapa » Kodēšana » 15 JavaScript metodes DOM manipulācijai tīmekļa izstrādātājiem

    15 JavaScript metodes DOM manipulācijai tīmekļa izstrādātājiem

    Kā tīmekļa izstrādātājs jums bieži ir jārīkojas ar DOM, objekta modelis, ko pārlūkprogrammas izmanto norādiet loģisko struktūru tīmekļa lapām un balstoties uz šo struktūru padarīt HTML elementus ekrānā.

    HTML definē noklusējuma DOM struktūra. Tomēr daudzos gadījumos jūs varat manipulēt ar JavaScript, parasti, lai pievienot papildu funkcijas uz vietni.

    IMAGE: Google izstrādātāji

    Šajā ziņojumā jūs atradīsiet sarakstu ar 15 pamata JavaScript metodes to atbalsts DOM manipulācijām. Iespējams, ka šīs metodes bieži izmantojat savā kodā, un jūs arī iesakņosiet mūsu JavaScript konsultācijās.

    1. querySelector ()

    The querySelector () metodi atgriež pirmo elementu, kas atbilst vienam vai vairākiem CSS selektoriem. Ja neatbilstība nav atrasta, tā atgriežas null.

    Pirms tam querySelector () tika ieviests, izstrādātāji plaši izmantoja getElementById () metode, kas ielādē elementu ar norādīto ID vērtību.

    Lai gan getElementById () joprojām ir noderīga metode, bet ar jaunāko querySelector () un querySelectorAll () metodes, kuras mēs varam brīvi mērķa elementi, pamatojoties uz jebkuru CSS selektoru, tādējādi mums ir lielāka elastība.

    Sintakse
    var ele = document.querySelector (selektors);
    • ele - Pirmais atbilstības elements vai null (ja neviens elements neatbilst atlasītājiem)
    • selektoru - viens vai vairāki CSS selektori, piemēram, "#fooId", ".fooClassName", ".class1.class2", vai ".class1, .class2"
    Kods Piemērs

    Šajā piemērā pirmais

    tiek izvēlēts ar querySelector () metode un tās krāsa tiek mainīta uz sarkanu.

     
    1. punktā
     
    2. punkts
     
    div vienu
     
    3. punkts
     
    div divi
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red';
    Interaktīva demonstrācija

    Pārbaudiet querySelector () metodi nākamajā interaktīvajā demonstrācijā. Vienkārši ievadiet selektoru, kas atbilst tiem, kurus var atrast zilās kastes iekšpusē (piem.,. #three) un noklikšķiniet uz pogas Atlasīt. Ņemiet vērā, ka, ievadot .bloķēt, tikai tā pirmā instancē tiks izvēlēts.

    2. querySelectorAll ()

    Atšķirībā no querySelector () kas atgriež tikai pirmo atbilstošo elementu, querySelectorAll () atgriež visus elementus, kas atbilst norādītajam CSS selektoram.

    Atbilstības elementi tiek atgriezti kā a NodeList objekts, kas būs tukšs objekts, ja netiks atrasts atbilstošs elements.

    Sintakse
    var eles = document.querySelectorAll (selektors);
    • eles - A NodeList objekts ar visiem atbilstošajiem elementiem kā īpašuma vērtībām. Objekts ir tukšs, ja nav atrastas atbilstības.
    • selektoru - viens vai vairāki CSS selektori, piemēram, "#fooId", ".fooClassName", ".class1.class2", vai ".class1, .class2"
    Kods Piemērs

    Tālāk redzamais piemērs izmanto to pašu HTML kā iepriekšējo. Tomēr šajā piemērā ir atlasīti visi punkti querySelectorAll (), un ir zilā krāsā.

     
    1. punktā
     
    2. punkts
     
    div vienu
     
    3. punkts
     
    div divi
     
     var pastraipas = document.querySelectorAll ('p'); par (rindkopu var p) p.style.color = 'blue';

    3. addEventListener ()

    Notikumi atsaukties uz to, kas notiek ar HTML elementu, piemēram, klikšķināšana, fokusēšana vai ielāde, uz kuru mēs varam reaģēt ar JavaScript. Mēs varam piešķirt JS funkcijas klausieties par šiem notikumiem elementos un darīt kaut ko, kad notikums notika.

    Ir trīs veidi, kā jūs varat piešķirt funkciju noteiktam notikumam.

    Ja foo () ir pielāgota funkcija, jūs varat to reģistrēt kā klikšķa notikuma klausītājs (izsauciet to, kad pogas elements ir noklikšķināts) trīs veidos:

    1.  
    2.  var btn = document.querySelector ('poga'); btn.onclick = foo;
    3.  var btn = document.querySelector ('poga'); btn.addEventListener ('klikšķi', foo);

    Metode addEventListener () (trešais risinājums) daži plusi; tas ir jaunākais standarts - ļaujot vienam notikumam piešķirt vairāk nekā vienas funkcijas kā notikuma klausītāju funkcijas - un tam ir noderīgs iespēju kopums.

    Sintakse
    ele.addEventListener (evt, klausītājs, [iespējas]);
    • ele - HTML elements, ko klausītājs klausīsies.
    • evt - Mērķtiecīgs pasākums.
    • klausītājs - Parasti JavaScript funkcija.
    • iespējas - (pēc izvēles) Objekts ar būla rekvizītu kopumu (uzskaitīts zemāk).
    Iespējas Kas notiek, kad tā ir iestatīta taisnība?
    sagūstīt

    Pārtrauc notikumu burbuļošanu, t. I., Neļauj jebkura notikuma klausītājam izsaukt to pašu notikuma veidu elementa priekštečos.

    Lai izmantotu šo funkciju, varat izmantot 2 sintakses:

    1. ele.addEventListener (evt, klausītājs, patiess)
    2. ele.addEventListener (evt, klausītājs, capture: true);
    vienreiz

    Klausītājs tiek saukts tikai pirmo reizi, kad notikums notiek, tad tas tiek automātiski atdalīts no notikuma, un tas vairs netiks aktivizēts..
    pasīva

    Notikuma noklusējuma darbību nevar apturēt ar metodi PrevDefault ().
    Kods Piemērs

    Šajā piemērā mēs pievienojam klikšķa notikuma klausītāju foo, uz 

     var btn = document.querySelector ('poga'); btn.addEventListener ('klikšķi', foo); funkcija foo () alarm ('hello');
    Interaktīva demonstrācija

    Piešķirt foo () pielāgota funkcija kā notikumu klausītājs jebkurā no šiem trim notikumiem: ievadi, klikšķis vai mouseover un aktivizējiet izvēlēto notikumu apakšējā ievades laukā, pievelkot, noklikšķinot vai ierakstot tajā.

    4. removeEventListener ()

    The removeEventListener () metodi atdala notikuma klausītāju iepriekš pievienots addEventListener () metodi no notikuma, ko tas klausās.

    Sintakse
    ele.removeEventListener (evt, klausītājs, [opcijas]);

    Izmanto to pašu sintaksi kā iepriekš addEventListener () metode (izņemot vienreiz opcija, kas ir izslēgta). Iespējas ir ļoti specifiskas, lai identificētu klausītāju, kas ir atdalāms.

    Kods Piemērs

    Ievērojot koda piemēru, kuru mēs izmantojām addEventListener (), šeit mēs noņemam klikšķa notikuma klausītāju foo no