Hemsida » Kodning » 15 JavaScript-metoder för DOM-manipulation för webbutvecklare

    15 JavaScript-metoder för DOM-manipulation för webbutvecklare

    Som webbutvecklare behöver du ofta manipulera DOM, objektmodellen som används av webbläsare till Ange den logiska strukturen av webbsidor, och baserat på denna struktur till gör HTML-element på skärmen.

    HTML definierar standard DOM-struktur. Men i många fall kanske du vill manipulera detta med JavaScript, vanligtvis för att lägg till extra funktioner till en webbplats.

    IMAGE: Google Developers

    I det här inlägget hittar du en lista över 15 grundläggande JavaScript-metoder den där hjälp DOM manipulation. Du brukar använda dessa metoder ofta i din kod, och du kommer också att stöta på dem i våra JavaScript-handledning.

    1. querySelector ()

    De querySelector () metod returnerar det första elementet som matchar en eller flera CSS-väljare. Om ingen matchning hittas returneras den null.

    Innan querySelector () introducerades, använde utvecklarna allmänt getElementById () metod som hämtar ett element med en specificerad id värde.

    Fastän getElementById () är fortfarande en användbar metod, men med de nyare querySelector () och querySelectorAll () metoder vi är lediga till målelement baserade på någon CSS-väljare, Vi har därmed större flexibilitet.

    Syntax
    var ele = document.querySelector (selector);
    • ele - Första matchande element eller null (om inget element matchar selektorerna)
    • väljare - en eller flera CSS-selektorer, såsom "#FooId", ".FooClassName", " .Class1.class2", eller ".class1, .class2"
    Kod Exempel

    I det här exemplet är den första

    får väljas med querySelector () Metoden och dess färg ändras till rött.

     
    stycke ett
     
    stycke två
     
    div en
     
    stycke tre
     
    div två
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red';
    Interaktiv demo

    Testa querySelector () metod i följande interaktiva demo. Skriv bara en väljare som matchar de som du hittar inom de blå rutorna (t.ex.. #tre) och klicka på knappen Välj. Observera att om du skriver .blockera, bara sin första instans kommer att väljas.

    2. querySelectorAll ()

    Till skillnad från querySelector () som returnerar endast första instans av alla matchande element, querySelectorAll () returnerar alla element som matchar den angivna CSS-väljaren.

    De matchande elementen returneras som en nodelist objekt som kommer att bli ett tomt objekt om inga matchande element hittas.

    Syntax
    var eles = document.querySelectorAll (selector);
    • eles - en nodelist objekt med alla matchande element som egenskapsvärden. Objektet är tomt om inga träffar hittades.
    • väljare - en eller flera CSS-selektorer, såsom "#FooId", ".FooClassName", " .Class1.class2", eller ".class1, .class2"
    Kod Exempel

    Exemplet nedan använder samma HTML som den föregående. I det här exemplet väljs alla stycken med querySelectorAll (), och är färgade blåa.

     
    stycke ett
     
    stycke två
     
    div en
     
    stycke tre
     
    div två
     
     var stycken = document.querySelectorAll ('p'); för (var p av stycken) p.style.color = 'blue';

    3. addeventlistener ()

    evenemang hänvisa till vad som händer med ett HTML-element, till exempel att klicka, fokusera eller ladda, som vi kan reagera med JavaScript. Vi kan tilldela JS-funktioner till lyssna för dessa händelser i element och gör något när händelsen hade inträffat.

    Det finns tre sätt du kan Tilldela en funktion till en viss händelse.

    Om foo () är en anpassad funktion, du kan registrera den som en klickhändelse lyssnare (kalla det när knappelementet är klickat) på tre sätt:

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

    Metoden addeventlistener () (den tredje lösningen) har några proffs; det är den senaste standarden - tillåter överlåtelse av mer än en funktion som händelsehörare till ett evenemang - och levereras med en användbar uppsättning alternativ.

    Syntax
    ele.addEventListener (evt, lyssnare, [alternativ]);
    • ele - Det HTML-element som händelseläsenaren lyssnar på.
    • evt - Den riktade händelsen.
    • lyssnare - Vanligtvis en JavaScript-funktion.
    • alternativ - (valfritt) Ett objekt med en uppsättning boolesiska egenskaper (listad nedan).
    alternativ Vad händer när det är inställt på Sann?
    fånga

    Stoppar händelsebubblingen, det vill säga förhindrar att någon händelsehörare kallas för samma händelse typ i elementets förfäder.

    För att använda den här funktionen kan du använda 2 syntaxer:

    1. ele.addEventListener (evt, lyssnare, sant)
    2. ele.addEventListener (evt, lyssnare, capture: true);
    en gång

    Listener kallas bara första gången händelsen inträffar, då avlägsnas den automatiskt från händelsen och kommer inte att utlösas av den längre.
    passiv

    Standardåtgärden för händelsen kan inte stoppas med metoden preventDefault ().
    Kod Exempel

    I det här exemplet lägger vi till en klickhändelselysare som heter foo, till 

     var btn = document.querySelector ('button'); btn.addEventListener ( 'klick', foo); funktion foo () alert ('hej');
    Interaktiv demo

    Tilldela foo () anpassad funktion som händelse lyssnare till någon av de tre följande händelserna: inmatning, klick eller mouseover & aktivera den valda händelsen i det nedre inmatningsfältet genom att sväva, klicka eller skriva in det.

    4. removeEventListener ()

    De removeEventListener () metod avlyssnar en händelse lyssnare tidigare tillsatt med addeventlistener () metod från det evenemang den lyssnar på.

    Syntax
    ele.removeEventListener (evt, lyssnare, [alternativ]);

    Använder samma syntax som ovan nämnda addeventlistener () metod (med undantag för en gång alternativ som är uteslutet). Alternativen brukar vara mycket specifika för att identifiera lyssnaren för att vara fristående.

    Kod Exempel

    Följande kodexempel vi använde vid addeventlistener (), här avlägsnar vi klickhändelsesläraren som heter foo från