Kotisivu » Coding » 15 JavaScript-menetelmät DOM-manipulointia varten Web-kehittäjille

    15 JavaScript-menetelmät DOM-manipulointia varten Web-kehittäjille

    Web-kehittäjänä sinun täytyy usein manipuloida DOM, objektin malli, jota selaimet käyttävät määritä looginen rakenne verkkosivujen ja tämän rakenteen perusteella tehdä HTML-elementtejä näytöllä.

    HTML määrittelee oletuksena DOM-rakenne. Monissa tapauksissa saatat kuitenkin haluta manipuloida tätä JavaScriptin avulla lisää lisätoimintoja sivustoon.

    KUVA: Google-kehittäjät

    Tässä viestissä on luettelo 15 perustavaa JavaScript-menetelmää että DOM: n manipulointi. Voit todennäköisesti käyttää näitä menetelmiä usein koodissasi, ja voit myös törmätä niihin JavaScript-opetusohjelmissamme.

    1. querySelector ()

    querySelector () menetelmä palauttaa ensimmäisen elementin, joka vastaa yhtä tai useampaa CSS-valitsinta. Jos vastausta ei löydy, se palaa tyhjä.

    Ennen querySelector () otettiin käyttöön, kehittäjät käyttivät niitä laajasti getElementById () menetelmä noutaa elementin, jolla on määrätty id arvo.

    Siitä huolimatta getElementById () on edelleen hyödyllinen menetelmä, mutta uudempi querySelector () ja querySelectorAll () me olemme vapaita Kohde-elementit perustuvat mihin tahansa CSS-valitsimeen, näin ollen meillä on enemmän joustavuutta.

    Syntaksi
    var ele = document.querySelector (valitsin);
    • ele - Ensimmäinen sovituselementti tai tyhjä (jos mikään elementti ei vastaa valintoja)
    • valitsin - yksi tai useampi CSS-valitsin, kuten "#FooId", ".FooClassName", " .Class1.class2", tai ".class1, .class2"
    Koodin esimerkki

    Tässä esimerkissä ensimmäinen

    valitaan querySelector () ja sen väri muuttuu punaiseksi.

     
    1 kohta
     
    Kaksi kappaletta
     
    div yksi
     
    3 kohta
     
    div kaksi
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'punainen';
    Interaktiivinen demo

    Testaa querySelector () seuraavassa interaktiivisessa demossa. Kirjoita vain sininen laatikko sisälle löytyvä valitsin (esim. #kolme) ja napsauta Valitse-painiketta. Huomaa, että jos kirjoitat .lohko, vain sen ensimmäinen oikeusaste valitaan.

    2. querySelectorAll ()

    Toisin kuin querySelector () joka palauttaa vain ensimmäisen kerran kaikki vastaavat elementit, querySelectorAll () palauttaa kaikki elementit, jotka vastaavat määritettyä CSS-valitsinta.

    Vastaavat elementit palautetaan a nodelist objekti, joka on tyhjä objekti, jos vastaavia elementtejä ei löydy.

    Syntaksi
    var eles = document.querySelectorAll (valitsin);
    • eles - nodelist objekti, jolla on kaikki vastaavat elementit ominaisuusarvoina. Objekti on tyhjä, jos vastauksia ei löydy.
    • valitsin - yksi tai useampi CSS-valitsin, kuten "#FooId", ".FooClassName", " .Class1.class2", tai ".class1, .class2"
    Koodin esimerkki

    Alla oleva esimerkki käyttää samaa HTML-koodia kuin edellinen. Tässä esimerkissä kaikki kohdat valitaan querySelectorAll (), ja ovat sinisiä.

     
    1 kohta
     
    Kaksi kappaletta
     
    div yksi
     
    3 kohta
     
    div kaksi
     
     var numbers = document.querySelectorAll ('p'); ((p p) -kohdassa) p.style.color = 'blue';

    3. addEventListener ()

    Tapahtumat viittaa siihen, mitä tapahtuu HTML-elementillä, kuten napsautuksella, tarkennuksella tai latauksella, johon voimme reagoida JavaScriptin avulla. Voimme määrittää JS-toiminnot kuunnella Näitä tapahtumia elementteissä ja tehdä jotain tapahtuman tapahtuessa.

    Voit olla kolme tapaa määritä toiminto tiettyyn tapahtumaan.

    Jos foo () on mukautettu toiminto, voit rekisteröidä sen klikkaustapahtuman kuuntelijana (kutsutaan sitä, kun painike painetaan) kolmella tavalla:

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

    Menetelmä addEventListener () (kolmas ratkaisu) on joitakin ammattilaisia; se on uusin standardi - mahdollistaa useamman kuin yhden toiminnon osoittamisen tapahtumien kuuntelijoiksi yhteen tapahtumaan - ja siinä on hyödyllinen valikoima vaihtoehtoja.

    Syntaksi
    ele.addEventListener (evt, kuuntelija, [vaihtoehdot]);
    • ele - HTML-elementti, jota tapahtuman kuuntelija kuuntelee.
    • EVT - Kohdennettu tapahtuma.
    • kuuntelija - Tyypillisesti JavaScript-toiminto.
    • vaihtoehtoja - (valinnainen) Objekti, jossa on joukko boolean ominaisuuksia (lueteltu alla).
    vaihtoehdot Mitä tapahtuu, kun se on asetettu totta?
    kaapata

    Pysäyttää tapahtuman kuplittamisen, ts. Estää tapahtuman kuuntelijoiden kutsumisen saman tapahtuman tyypille elementin esi-isissä.

    Voit käyttää tätä ominaisuutta käyttämällä kahta syntaksi:

    1. ele.addEventListener (evt, kuuntelija, totta)
    2. ele.addEventListener (evt, kuuntelija, capture: true);
    kerran

    Kuuntelijaa kutsutaan vain ensimmäistä kertaa tapahtuman tapahtuessa, sitten se irrotetaan automaattisesti tapahtumasta ja sitä ei enää käynnistetä..
    passiivinen

    Tapahtuman oletustoimintoa ei voi pysäyttää estdefault () -menetelmällä.
    Koodin esimerkki

    Tässä esimerkissä lisätään klikkaustapahtuman kuuntelija foo, että 

     var btn = document.querySelector ('painike'); btn.addEventListener ( 'click', foo); toiminto foo () hälytys ('hello');
    Interaktiivinen demo

    Määritä foo () mukautettu toiminto tapahtuman kuuntelijana mihin tahansa seuraavista tapahtumista: panos, klikkaus tai mouseover & käynnistää valitun tapahtuman alhaalla olevalla syöttökentällä leijuttamalla, napsauttamalla tai kirjoittamalla siihen.

    4. removeEventListener ()

    removeEventListener () menetelmä irrottaa tapahtuman kuuntelijan aiemmin lisätty addEventListener () menetelmä siitä, mitä se kuuntelee.

    Syntaksi
    ele.removeEventListener (evt, kuuntelija, [vaihtoehdot]);

    Käyttää samaa syntaksi kuin edellä addEventListener () menetelmä (lukuun ottamatta. \ t kerran vaihtoehto, joka on poissuljettu). Vaihtoehtoja käytetään olemaan hyvin tarkkoja, kun tunnistetaan kuuntelija, joka on irrotettava.

    Koodin esimerkki

    Noudattamalla Code-koodia, jota käytimme addEventListener (), täällä poistamme klikkaustapahtuman kuulijan foo alkaen