Główna » Kodowanie » 15 metod JavaScript do manipulacji DOM dla programistów WWW

    15 metod JavaScript do manipulacji DOM dla programistów WWW

    Jako programista internetowy często musisz manipulować DOM, model obiektu używany przez przeglądarki określ strukturę logiczną stron internetowych i na podstawie tej struktury renderuj elementy HTML na ekranie.

    HTML definiuje domyślna struktura DOM. Jednak w wielu przypadkach możesz chcieć manipulować tym za pomocą JavaScript, zazwyczaj w celu dodaj dodatkowe funkcje na stronę.

    IMAGE: Google Developers

    W tym poście znajdziesz listę 15 podstawowych metod JavaScript że pomoc w manipulacji DOM. Najprawdopodobniej będziesz często używać tych metod w swoim kodzie, a także wpadniesz na nie w naszych samouczkach JavaScript.

    1. querySelector ()

    The querySelector () metoda zwraca pierwszy element, który pasuje do jednego lub więcej selektorów CSS. Jeśli nie zostanie znalezione żadne dopasowanie, wraca zero.

    Przed querySelector () został wprowadzony, programiści powszechnie używali getElementById () metoda, która pobiera element z określonym ID wartość.

    Mimo że getElementById () jest wciąż użyteczną metodą, ale z nowszą querySelector () i querySelectorAll () metody, do których mamy prawo elementy docelowe oparte na dowolnym selektorze CSS, dzięki temu mamy większą elastyczność.

    Składnia
    var ele = document.querySelector (selektor);
    • ele - Pierwszy pasujący element lub zero (jeśli żaden element nie pasuje do selektorów)
    • selektor - jeden lub więcej selektorów CSS, takich jak „#fooId”, „.fooClassName”, „.class1.class2”, lub „.class1, .class2”
    Przykład kodu

    W tym przykładzie pierwszy

    zostaje wybrany za pomocą querySelector () metoda i jej kolor zmienia się na czerwony.

     
    akapit pierwszy
     
    paragraf drugi
     
    div jeden
     
    ustęp trzeci
     
    div two
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red';
    Interaktywne demo

    Przetestuj querySelector () metoda w poniższej interaktywnej wersji demonstracyjnej. Po prostu wpisz selektor pasujący do selektora znajdującego się w niebieskich polach (np. #trzy) i kliknij przycisk Wybierz. Zauważ, że jeśli wpiszesz .blok, tylko jego pierwsza instancja zostanie wybrany.

    2. querySelectorAll ()

    w odróżnieniu querySelector () zwraca tylko pierwszą instancję wszystkich pasujących elementów, querySelectorAll () zwraca wszystkie elementy, które pasują do określonego selektora CSS.

    Pasujące elementy są zwracane jako Lista węzłów obiekt, który będzie pustym obiektem, jeśli nie znaleziono pasujących elementów.

    Składnia
    var eles = document.querySelectorAll (selektor);
    • eles - ZA Lista węzłów obiekt ze wszystkimi pasującymi elementami jako wartości właściwości. Obiekt jest pusty, jeśli nie znaleziono żadnych dopasowań.
    • selektor - jeden lub więcej selektorów CSS, takich jak „#fooId”, „.fooClassName”, „.class1.class2”, lub „.class1, .class2”
    Przykład kodu

    Poniższy przykład używa tego samego HTML co poprzedni. Jednak w tym przykładzie wszystkie akapity są zaznaczone za pomocą querySelectorAll (), i są niebieskie.

     
    akapit pierwszy
     
    paragraf drugi
     
    div jeden
     
    ustęp trzeci
     
    div two
     
     var paragraphs = document.querySelectorAll ('p'); for (var p akapitów) p.style.color = 'niebieski';

    3. addEventListener ()

    Wydarzenia odnoszą się do tego, co dzieje się z elementem HTML, takim jak kliknięcie, ogniskowanie lub ładowanie, na które możemy reagować za pomocą JavaScript. Możemy przypisać funkcje JS do słuchać dla tych wydarzeń w elementach i zrób coś, gdy wydarzenie miało miejsce.

    Istnieją trzy sposoby przypisz funkcję do określonego zdarzenia.

    Jeśli bla() jest funkcją niestandardową, możesz ją zarejestrować jako odbiorca zdarzenia kliknięcia (zadzwoń po kliknięciu elementu przycisku) na trzy sposoby:

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

    Metoda addEventListener () (trzecie rozwiązanie) ma kilku profesjonalistów; jest to najnowszy standard - umożliwiający przypisanie więcej niż jednej funkcji jako detektorów zdarzeń do jednego zdarzenia - i zawiera przydatny zestaw opcji.

    Składnia
    ele.addEventListener (evt, listener, [opcje]);
    • ele - Element HTML, którego słuchacz zdarzeń będzie nasłuchiwał.
    • evt - Celowane wydarzenie.
    • słuchacz - Zazwyczaj funkcja JavaScript.
    • opcje - (opcjonalnie) Obiekt z zestawem właściwości boolowskich (wymienionych poniżej).
    Opcje Co się dzieje, gdy jest ustawione prawdziwe?
    zdobyć

    Zatrzymuje propagowanie zdarzeń, tzn. Zapobiega wywoływaniu detektorów zdarzeń dla tego samego typu zdarzenia w przodkach elementu.

    Aby użyć tej funkcji, możesz użyć 2 składni:

    1. ele.addEventListener (evt, listener, true)
    2. ele.addEventListener (evt, listener, capture: true);
    pewnego razu

    Słuchacz jest wywoływany tylko przy pierwszym zdarzeniu, a następnie jest automatycznie odłączany od zdarzenia i nie będzie już przez niego uruchamiany.
    bierny

    Domyślnej akcji zdarzenia nie można zatrzymać za pomocą metody preventDefault ().
    Przykład kodu

    W tym przykładzie dodajemy detektor zdarzenia click o nazwie bla, do 

     var btn = document.querySelector ('button'); btn.addEventListener („kliknij”, foo); function foo () alert ('hello');
    Interaktywne demo

    Przypisz bla() niestandardowa funkcja jako odbiorca zdarzeń w jednym z trzech następujących zdarzeń: wkład, Kliknij lub myszy & wyzwalaj wybrane wydarzenie w dolnym polu wprowadzania, najeżdżając, klikając lub wpisując je.

    4. removeEventListener ()

    The removeEventListener () metoda odłącza detektor zdarzeń wcześniej dodane za pomocą addEventListener () metoda z wydarzenia, którego słucha.

    Składnia
    ele.removeEventListener (evt, listener, [opcje]);

    Używa tej samej składni, co powyżej addEventListener () metoda (z wyjątkiem pewnego razu opcja, która jest wykluczona). Opcje są używane do określenia specyficznego detektora do odłączenia.

    Przykład kodu

    Podążając za przykładem kodu, którego używaliśmy w addEventListener (), tutaj usuwamy detektor zdarzenia click o nazwie bla od