Úvodná » kódovanie » 15 metód JavaScript pre manipuláciu DOM pre vývojárov webu

    15 metód JavaScript pre manipuláciu DOM pre vývojárov webu

    Ako webový vývojár musíte často manipulovať DOM, objektový model, ktorý používajú prehliadače špecifikujte logickú štruktúru webových stránok a na základe tejto štruktúry vykresliť prvky HTML na obrazovke.

    HTML definuje predvolená štruktúra DOM. Avšak v mnohých prípadoch možno budete chcieť manipulovať s JavaScript, zvyčajne za účelom pridať ďalšie funkcie na miesto.

    IMAGE: vývojári spoločnosti Google

    V tomto príspevku nájdete zoznam 15 základných metód JavaScript že manipulácia DOM pomoci. Pravdepodobne by ste často používali tieto metódy vo svojom kóde a takisto ich narazíte do našich tutoriálov v jazyku JavaScript.

    1. querySelector ()

    querySelector () metóda vráti prvý prvok, ktorý sa zhoduje s jedným alebo viacerými selektormi CSS. Ak sa nenájde žiadna zhoda, vráti sa nulový.

    pred querySelector () bol predstavený, vývojári široko používajú getElementById () metóda, ktorá načíta prvok s určeným id hodnota.

    Hoci getElementById () je stále užitočnou metódou, ale s novším querySelector () a querySelectorAll () metódy, ktoré sme slobodní cieľové prvky založené na ľubovoľnom prepínači CSS, preto máme väčšiu flexibilitu.

    syntax
    var ele = dokument.querySelektor (volič);
    • ele - Prvý zodpovedajúci prvok alebo nulový (ak sa žiadny prvok nezhoduje s voličmi)
    • volič - jeden alebo viac voličov CSS, ako napr "#FooId", ".FooClassName", ".Class1.class2", alebo ".class1, .class2"
    Príklad kódu

    V tomto príklade je prvý

    sa vyberie pomocou querySelector () a jeho farba sa zmení na červenú.

     
    prvý odsek
     
    druhý odsek
     
    div jedna
     
    odsek 3
     
    div dve
     
     var prvýDiv = document.querySelector ('div'); firstDiv.style.color = 'červená';
    Interaktívna demo

    Otestujte querySelector () v nasledujúcej interaktívnej demo. Jednoducho napíšte selektor, ktorý sa zhoduje s tými, ktoré nájdete v modrých poliach (napr. #three) a kliknite na tlačidlo Vybrať. Všimnite si, že keď píšete .blok, iba jeho prvej inštancie bude vybratá.

    2. querySelectorAll ()

    na rozdiel od querySelector () ktorý vráti iba prvú inštanciu všetkých zodpovedajúcich prvkov, querySelectorAll () vráti všetky prvky, ktoré zodpovedajú zadanému prepínaču CSS.

    Súvisiace prvky sa vrátia ako NodeList objekt, ktorý bude prázdny objekt, ak sa nenájdu žiadne zodpovedajúce prvky.

    syntax
    var eles = document.querySelectorAll (selektor);
    • ELES - NodeList objekt so všetkými zodpovedajúcimi prvkami ako hodnotami vlastností. Objekt je prázdny, ak sa nenájdu žiadne zhody.
    • volič - jeden alebo viac voličov CSS, ako napr "#FooId", ".FooClassName", ".Class1.class2", alebo ".class1, .class2"
    Príklad kódu

    Nižšie uvedený príklad používa rovnaký kód HTML ako predošlý. V tomto príklade sú však všetky odstavce vybraté pomocou querySelectorAll (), a sú modrej farby.

     
    prvý odsek
     
    druhý odsek
     
    div jedna
     
    odsek 3
     
    div dve
     
     var odseky = document.querySelectorAll ('p'); pre (var p odsekov) p.style.color = 'modrá';

    3. addEventListener ()

    Diania pozrite sa na to, čo sa stane s prvkom HTML, ako je kliknutie, zaostrovanie alebo načítanie, s ktorým môžeme reagovať pomocou jazyka JavaScript. Môžeme priradiť funkcie JS počúvať pre tieto udalosti v prvkoch a urobte niečo, keď sa udalosť vyskytla.

    Existujú tri spôsoby, ako môžete priradiť určitú udalosť.

    ak foo () je vlastná funkcia, môžete ju zaregistrovať ako poslucháč kliknutia (volajte ho po kliknutí na prvok tlačidla) tromi spôsobmi:

    1.  
    2.  var btn = dokument.querySelektor ('tlačidlo'); btn.onclick = foo;
    3.  var btn = dokument.querySelektor ('tlačidlo'); btn.addEventListener ('kliknite', foo);

    Metóda addEventListener () (tretie riešenie) niektorí profesionáli; je to najnovší štandard - umožňuje priradiť viac ako jednu funkciu ako poslucháči udalosti jednej udalosti - a prichádza s užitočnou sadou možností.

    syntax
    ele.addEventListener (evt, poslucháč, [možnosti]);
    • ele - Prvok HTML, ktorému bude počúvať poslucháč, bude počúvať.
    • evt - Cieľová udalosť.
    • poslucháč - Typicky je to funkcia JavaScript.
    • možnosti - (voliteľné) Objekt s množinou booleovských vlastností (uvedené nižšie).
    možnosti Čo sa stane, keď je nastavené pravdivý?
    zajatí

    Zastaví prebublávanie udalostí, t. J. Zabraňuje volať žiadnym poslucháčom udalostí pre ten istý typ udalosti v predkoch prvku.

    Ak chcete použiť túto funkciu, môžete použiť 2 syntaxy:

    1. ele.addEventListener (evt, listener, true)
    2. ele.addEventListener (evt, poslucháč, capture: true);
    akonáhle

    Listener sa volá iba pri prvom podaní udalosti, potom sa automaticky oddelí od udalosti a už ho nebude spúšťať.
    pasívny

    Predvolenú akciu udalosti nemožno zastaviť metódou preventDefault ().
    Príklad kódu

    V tomto príklade pridáme poslucháč pre udalosť kliknutia s názvom foo, na 

     var btn = dokument.querySelektor ('tlačidlo'); btn.addEventListener ( 'cvaknutie', foo); funkcia foo () alert ('hello');
    Interaktívna demo

    Priraďte foo () vlastná funkcia ako poslucháč udalostí ktorejkoľvek z nasledujúcich troch udalostí: vstup, cvaknutie alebo mouseover & spúšťať zvolenú udalosť v spodnom vstupnom poli posunutím, kliknutím alebo napísaním.

    4. removeEventListener ()

    removeEventListener () metóda oddeľuje poslucháča udalosti predtým pridané s addEventListener () metóda z udalosti, ktorú počúva.

    syntax
    ele.removeEventListener (evt, poslucháč, [možnosti]);

    Používa rovnakú syntax ako vyššie uvedené addEventListener () metóda (okrem akonáhle možnosť, ktorá je vylúčená). Možnosti slúžia na to, aby boli veľmi špecifické, pokiaľ ide o identifikáciu odpojeného poslucháča.

    Príklad kódu

    Po príklade kódu sme použili reťazec addEventListener (), tu odstránime poslucháča udalosti kliknutia nazvaného foo z