Homepage » Coding » 15 JavaScript módszerek a webes fejlesztők számára a DOM manipulálásához

    15 JavaScript módszerek a webes fejlesztők számára a DOM manipulálásához

    Mint webfejlesztő, gyakran kell manipulálni a DOM, a böngészők által használt objektummodell adja meg a logikai struktúrát weblapok, és a struktúra alapján megjelenítheti a HTML elemeket a képernyőn.

    A HTML meghatározza a alapértelmezett DOM struktúra. Sok esetben azonban ezt JavaScript-szel manipulálhatja, általában azért, hogy további funkciók hozzáadása egy webhelyre.

    KÉP: Google fejlesztők

    Ebben a bejegyzésben talál egy listát 15 alapvető JavaScript-módszer hogy DOM-manipuláció támogatása. Valószínűleg ezeket a módszereket gyakran használná a kódodban, és a JavaScript bemutatóinkban is behatolnak.

    1. querySelector ()

    A querySelector () eljárás visszaadja az első elemet, amely egy vagy több CSS szelektorhoz illeszkedik. Ha nincs találat, visszatér nulla.

    Előtt querySelector () bevezetésre került, a fejlesztők széles körben használták getElementById () módszer, amely egy adott elemet egy megadott módon szerez id érték.

    Habár getElementById () még mindig hasznos módszer, de az újabb querySelector () és querySelectorAll () módszerek, amiket szabadon tudunk CSS-selektoron alapuló célelemek, így nagyobb rugalmasságunk van.

    Szintaxis
    var ele = document.querySelector (választó);
    • ele - Első egyező elem vagy nulla (ha egyetlen elem sem felel meg a választóknak)
    • választó - egy vagy több CSS szelektor, például "#FooId", ".FooClassName", ”.Class1.class2", vagy ".class1, .class2"
    Kódpélda

    Ebben a példában az első

    lesz kiválasztva a querySelector () módja és színe pirosra vált.

     
    az első bekezdés
     
    második bekezdés
     
    div egy
     
    3. bekezdés
     
    kettő
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'piros';
    Interaktív bemutató

    Tesztelje a querySelector () metódus a következő interaktív demóban. Csak írjon be egy olyan választót, amely megfelel a kék dobozokban találhatóaknak (pl. #három), majd kattintson a Kiválasztás gombra. Ne feledje, hogy ha beírja .Blokk, csak az első példánya kiválasztásra kerül.

    2. querySelectorAll ()

    nem úgy mint querySelector () amely csak az összes megfelelő elem első példányát adja vissza, querySelectorAll () visszaadja az összes olyan elemet, amely megfelel a megadott CSS választónak.

    A megfelelő elemek visszaadhatók a NodeList objektum, amely üres objektum lesz, ha nem találnak megfelelő elemeket.

    Szintaxis
    var eles = document.querySelectorAll (választó);
    • ELES - A NodeList objektum, amelynek minden megfelelő elemét tulajdonságértékekként használjuk. Az objektum üres, ha nincs találat.
    • választó - egy vagy több CSS szelektor, például "#FooId", ".FooClassName", ”.Class1.class2", vagy ".class1, .class2"
    Kódpélda

    Az alábbi példa ugyanazt a HTML-t használja, mint az előző. Ebben a példában azonban az összes bekezdés kerül kiválasztásra querySelectorAll (), és kék színűek.

     
    az első bekezdés
     
    második bekezdés
     
    div egy
     
    3. bekezdés
     
    kettő
     
     var numbers = document.querySelectorAll ('p'); a (var p) bekezdésben p.style.color = 'blue';

    3. addEventListener ()

    Események utaljon arra, hogy mi történik egy HTML elemgel, például kattintással, fókuszálással vagy betöltéssel, amelyre JavaScript segítségével reagálhatunk. A JS funkciókat hozzárendelhetjük hallgat ezeknek az eseményeknek az elemeihez, és tegyen valamit, amikor az esemény bekövetkezett.

    Háromféleképpen lehet hozzárendel egy függvényt egy adott eseményhez.

    Ha ize () egy egyéni funkció, regisztrálhatod mint egy kattintáses esemény hallgató (hívja meg, amikor a gombelemre kattint):

    1.  
    2.  var btn = document.querySelector ('gomb'); btn.onclick = ize;
    3.  var btn = document.querySelector ('gomb'); btn.addEventListener ('click', foo);

    A módszer addEventListener () (a harmadik megoldás) néhány profi; ez a legfrissebb szabvány, amely lehetővé teszi, hogy egy eseményhez egynél több funkciót rendelhessünk eseményfigyelőkhöz, és hasznos opciókkal rendelkezik.

    Szintaxis
    ele.addEventListener (evt, hallgató, [opciók]);
    • ele - A HTML elem, amelyet az eseményfigyelő fog hallgatni.
    • EVT - A célzott esemény.
    • hallgató - Jellemzően a JavaScript funkció.
    • opciók - (opcionális) Egy objektum, melynek logikai tulajdonságai vannak (az alábbiakban felsorolva).
    Opciók Mi történik, ha be van állítva igaz?
    elfog

    Megállítja az eseménybuborékolást, vagyis megakadályozza, hogy az esemény előfutárai azonos eseménytípusra hívjanak az elem őseiben.

    A szolgáltatás használatához 2 szintaxist használhat:

    1. ele.addEventListener (evt, hallgató, igaz)
    2. ele.addEventListener (evt, hallgató, capture: true);
    egyszer

    A hallgató csak az első alkalommal történik, amikor az esemény megtörténik, majd automatikusan elválik az eseménytől, és többé nem indítja el..
    passzív

    Az esemény alapértelmezett művelete nem állítható le az PrevDefault () módszerrel.
    Kódpélda

    Ebben a példában egy kattintáses esemény figyelőt hívunk ize, hoz 

     var btn = document.querySelector ('gomb'); btn.addEventListener ( 'click', foo); foo () alarm ('hello') funkció;
    Interaktív bemutató

    Adja meg a ize () Egyéni funkció eseményfigyelőként a következő három esemény bármelyikéhez: bemenet, kettyenés vagy egérráhelyezés és az alsó beviteli mezőben kiválaszthatja a kiválasztott eseményt azáltal, hogy belenyomja, rákattint vagy gépel be.

    4. removeEventListener ()

    A removeEventListener () eljárás leválaszt egy eseményfigyelőt korábban hozzáadva a addEventListener () eljárás az eseménytől, amit hallgat.

    Szintaxis
    ele.removeEventListener (evt, hallgató, [opciók]);

    Ugyanezt a szintaxist használja, mint a fentiek addEventListener () módszer (kivéve a. \ t egyszer opció, amely kizárt). A választási lehetőségek nagyon specifikusak a leválasztandó hallgatók azonosítására.

    Kódpélda

    Az általunk használt kódpéldányt követve addEventListener (), itt eltávolítjuk a hívott kattintási esemény hallgatóját ize tól