Domovská » Kódování » 15 JavaScript metody pro DOM Manipulation pro webové vývojáře

    15 JavaScript metody pro DOM Manipulation pro webové vývojáře

    Jako webový vývojář často potřebujete manipulovat s DOM, objektový model, který prohlížeče používají specifikujte logickou strukturu webových stránek, a na této struktuře vykreslení HTML prvků na obrazovce.

    HTML definuje výchozí struktura DOM. V mnoha případech však budete chtít s tímto jazykem manipulovat pomocí JavaScriptu, obvykle tak, aby to bylo možné přidejte další funkce na stránky.

    IMAGE: Vývojáři Google

    V tomto příspěvku najdete seznam 15 základních metod JavaScriptu že pomoc DOM manipulace. Pravděpodobně používáte tyto metody často ve vašem kódu, a budete také narazit do nich v našich cvičeních JavaScript.

    1. querySelector ()

    querySelector () metoda Vrací první prvek, který odpovídá jednomu nebo více selektorům CSS. Pokud není nalezena žádná shoda, vrátí se nula.

    Před querySelector () byla zavedena, vývojáři široce používali getElementById () metoda, která vyvolá prvek se zadaným id hodnota.

    Ačkoli getElementById () je stále užitečná metoda, ale s novější querySelector () a querySelectorAll () metody, které máme cílové prvky založené na libovolném voliči CSS, máme tedy větší flexibilitu.

    Syntax
    var ele = document.querySelector (selector);
    • ele - První odpovídající prvek nebo nula (pokud žádný prvek neodpovídá selektorům)
    • volič - jeden nebo více CSS selektorů, jako je například "#fooId", ".fooClassName", ".class1.class2", nebo ".class1, .class2"
    Příklad kódu

    V tomto příkladu první

    se vybere pomocí querySelector () a jeho barva se změní na červenou.

     
    odstavce 1
     
    odstavce 2
     
    div jeden
     
    odstavce 3
     
    div dva
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red';
    Interaktivní ukázka

    Otestujte querySelector () v následující interaktivní ukázce. Stačí zadat selektor odpovídající těm, které najdete uvnitř modrých políček (např. #tři) a klepněte na tlačítko Vybrat. Všimněte si, že pokud zadáte .blok, pouze jeho první instanci bude vybráno.

    2. querySelectorAll ()

    Na rozdíl od querySelector () vrátí pouze první instanci všech odpovídajících prvků, querySelectorAll () vrátí všechny prvky, které odpovídají zadanému voliči CSS.

    Odpovídající prvky jsou vráceny jako Seznam uzlů objekt, který bude prázdný objekt, pokud nebudou nalezeny žádné odpovídající prvky.

    Syntax
    var eles = document.querySelectorAll (selector);
    • eles - A Seznam uzlů objekt se všemi odpovídajícími prvky jako hodnotami vlastností. Objekt není prázdný, pokud nejsou nalezeny žádné shody.
    • volič - jeden nebo více CSS selektorů, jako je například "#fooId", ".fooClassName", ".class1.class2", nebo ".class1, .class2"
    Příklad kódu

    Níže uvedený příklad používá stejný HTML jako předchozí. V tomto příkladu jsou však vybrány všechny odstavce querySelectorAll (), a jsou zbarveny modře.

     
    odstavce 1
     
    odstavce 2
     
    div jeden
     
    odstavce 3
     
    div dva
     
     var odstavce = document.querySelectorAll ('p'); for (var p odstavců) p.style.color = 'blue';

    3. addEventListener ()

    Události odkazují na to, co se stane s elementem HTML, jako je kliknutí, zaostření nebo načítání, na které můžeme reagovat s JavaScriptem. Můžeme přiřadit JS funkce poslouchat pro tyto události v elementech a udělají něco, co se stalo.

    Existují tři způsoby, jak můžete přiřazení funkce určité události.

    Li foo () je vlastní funkce, můžete ji zaregistrovat jako posluchač události kliknutí (zavolejte na něj, když kliknete na prvek tlačítka) třemi způsoby:

    1.  
    2.  var btn = document.querySelector ('tlačítko'); btn.onclick = foo;
    3.  var btn = document.querySelector ('tlačítko'); btn.addEventListener ('click', foo);

    Metoda addEventListener () (třetí řešení) někteří profesionálové; je to nejnovější standard - umožňuje přiřazení více než jedné funkce jako posluchače událostí jedné události - a přichází s užitečnou sadou možností.

    Syntax
    ele.addEventListener (evt, posluchač, [možnosti]);
    • ele - Element HTML posluchač události bude poslouchat.
    • evt - Cílová událost.
    • posluchač - Obvykle funkce JavaScript.
    • možností - (nepovinné) Objekt se sadou booleovských vlastností (uveden níže).
    Možnosti Co se stane, když je nastaven skutečný?
    zachycení

    Zastaví probublávání událostí, tj. Zabrání volání všech posluchačů událostí pro stejný typ události v předcích elementu.

    Chcete-li tuto funkci použít, můžete použít 2 syntaxe:

    1. ele.addEventListener (evt, posluchač, true)
    2. ele.addEventListener (evt, posluchač, capture: true);
    jednou

    Posluchač se nazývá pouze jednou, když se událost stane, pak se automaticky odpojí od události a už ji nebude spouštět.
    pasivní

    Výchozí akci události nelze zastavit metodou preventDefault ().
    Příklad kódu

    V tomto příkladu přidáme posluchače události kliknutí foo, na 

     var btn = document.querySelector ('tlačítko'); btn.addEventListener ('click', foo); function foo () alert ('hello');
    Interaktivní ukázka

    Přiřaďte foo () vlastní funkci jako posluchače událostí na kteroukoli ze tří následujících událostí: vstup, klikněte nebo přejet myší & spusťte zvolenou událost v dolním vstupním poli vznášením, klepnutím nebo zadáním.

    4. removeEventListener ()

    removeEventListener () metoda odpojí posluchače událostí dříve přidané addEventListener () metoda z události, kterou poslouchá.

    Syntax
    ele.removeEventListener (evt, posluchač, [možnosti]);

    Používá stejnou syntaxi jako výše uvedené addEventListener () metoda (s výjimkou jednou možnost, která je vyloučena). Možnosti jsou velmi specifické, pokud jde o identifikaci posluchače, který má být odpojen.

    Příklad kódu

    Podle příkladu kódu jsme použili addEventListener (), zde odstraníme posluchače události Click Click foo od