W3C
Twórcy DOM

Zanim zaczniesz uczyć się technologii DOM, powinieneś już znać podstawy Języki HTML, CSS i , poza tym musisz przeczytać artykuły o formularzach HTML (umieć tworzyć przyciski, pola tekstowe itp.).

DOM (model obiektu dokumentu) Document Object Model stworzony przez World Wide Web Consortium (W3C).

DOM to technologia internetowa, która umożliwia zarządzanie tagami HTML strony za pomocą języka JavaScript. DOM reprezentuje znaczniki HTML jako obiekty z właściwościami i metodami. Każdy tag (obiekt) HTML na stronie HTML, dzięki DOM, ma swój unikalny adres. Uzyskując dostęp do tego adresu, JavaScript może zarządzać Znacznik HTML.

Adresy w DOM są generowane automatycznie, ale są zbyt długie i złożone. Dlatego twórcy DOM umożliwili programistom webowym samodzielne pisanie krótkich adresów, poprzez selektor id (unique Identification).

Jak działa DOM

Przeglądarka, otwierając stronę HTML, tworzy strukturę DOM na podstawie swoich znaczników, gdzie każdy znacznik HTML pojawia się jako obiekt z własnym unikalnym adresem. Struktura DOM jest również nazywana drzewo DOM, to drzewo składa się z węzłów, które są znacznikami HTML, atrybutami, tekstem.

Historia DOM

Początkowo DOM nie był ustandaryzowany, a dwie przeglądarki, które istniały w tym czasie, Netscape Navigator i Internet Explorer, samodzielnie stworzył DOM. W tamtym czasie programiści WWW musieli nauczyć się dwóch wersji DOM.

Na ten moment, W3C ustandaryzowało DOM i wszystkie przeglądarki starają się przestrzegać tego standardu.

Temat jest naprawdę złożony. Ale, jak mówią, diabeł nie jest taki straszny, jak go malują. W tym miejscu dostaję najtrudniejszy orzech: rodzaj super zadania polegającego na „malowaniu” tak strawnie, jak to możliwe, ale też nie całkiem prymitywne. Jak dotąd wszystkie materiały, które przeczytałem, wydają się być albo zaumi, albo prymitywne.

Co to jest DOM

Skrót DOM oznacza dokument Model obiektowy (model obiektu dokumentu).

DOM jest interfejsem programistycznym umożliwiającym dostęp do zawartości dokumentów HTML, XHTML i XML, czyli reprezentacji znaczników i atrybutów HTML, XHTML i XML, a także style css w postaci obiektów programistycznych. Z tym modelem współpracują zarówno JavaScript, jak i inne języki programowania internetowego.

Trochę historii

Istnieją 4 poziomy DOM(0, 1, 2 i 3).

Poziom 0(1996) obejmował modele DOM, które istniały przed nastaniem poziomu 1. Zasadniczo są to kolekcje: document.images, document.forms, document.layers i document.all. Modele te nie są formalnie specyfikacjami. DOM opublikowany W3C. Reprezentują raczej informacje o tym, co istniało przed rozpoczęciem procesu normalizacji.

Poziom 1(1997) obejmował również podstawowe funkcjonalność o przetwarzaniu dokumentów XML: liczne sposoby pracy z poszczególnymi węzłami, praca z instrukcjami Przetwarzanie XML itp.

Oprócz, DOM Poziom 1 zawiera szereg specjalnych interfejsów, które mogą obsługiwać poszczególne elementy HTML. Na przykład możesz pracować z tabelami HTML, formularzami, listami wyboru i tak dalej.

W DOM poziom 2(2002) dodał kilka nowych funkcji.

Jeśli w DOM poziom 1 nie wspierał przestrzeni nazw, interfejsów DOM Poziom 2 zawiera metody zarządzania przestrzeniami nazw związane z wymaganiami dotyczącymi konstrukcji i przetwarzania dokumentów XML.

Oprócz, DOM poziom 2 obsługuje wydarzenia.

Poziom 2 to obecny poziom specyfikacji DOM, ale W3C zaleca również niektóre sekcje specyfikacji poziomu 3.

DOM poziom 3 to robocza specyfikacja robocza, która rozszerza funkcjonalność DOM poziom 2. Jedną z najważniejszych cech tej wersji specyfikacji jest możliwość pracy z wieloma rozszerzeniami DOM.

Co oznacza „interfejs oprogramowania”?

angielskie słowo interfejs można przetłumaczyć jako „obszar kontaktu”. Komputer, z grubsza mówiąc, rozumie tylko dwie rzeczy: pusty bit i wypełniony bit. Język, którym „mówi” komputer, można traktować jako niekończący się ciąg zer i jedynek, dający nieskończoną liczbę różnych kombinacji.

Każdy kod programu jest zrozumiałą dla programisty interpretacją tych „zer i jedynek”, z którymi współpracuje komputer. Tak więc każdy język programowania jest interfejsem człowiek-maszyna.

Przeglądarki działają tak jak inne aplikacje komputerowe. Interpretują w „zerach i jedynkach” Kody HTML, XML, CSS, JavaScript, PHP, Perl itp. Aby pracować z tą wielojęzycznością, potrzebna jest wspólna platforma. Ta platforma jest DOM Specyfikacja niezależna od określonego języka programowania lub znaczników. Jest to interfejs, który może być używany w wielu popularnych językach programowania związanych z tworzeniem stron internetowych oraz potrafi rozumieć i interpretować obiekty. DOM.

DOM i przeglądarki

DOM i JavaScript

W JavaScript szczyt hierarchicznej drabiny obiektów DOM, swego rodzaju „przewodnikiem” do tego interfejsu jest obiekt dokument, a przedmioty DOM stają się jego właściwościami, właściwościami jego właściwości i tak dalej. Są również nazywane Węzły DOM.

Węzły DOM

W DOM poziom 2 jest 12 typów węzłów. Za każdym typem węzła DOM stała stała o unikalnej nazwie. Większość węzłów jest zaprojektowana do pracy z XML. W zestawie HTML - JavaScript, z którym mamy do czynienia, można zastosować tylko 5 rodzajów. Ale nawet ten „wierzchołek góry lodowej” jest bardzo „rozprzestrzeniającym się drzewem”, którego nie da się omówić w jednej czy dwóch lekcjach.

Kompletny zestaw stałych typu węzła zdefiniowanych w specyfikacji W3C DOM(podświetlone na niebiesko węzły dostępne dla HTML - JavaScript):

Stała nazwa	Oznaczający	Opis
Węzeł.ELEMENT_NODE		Węzeł elementu (zwraca element główny dokumentu, dla dokumentów HTML jest to element HTML)
Węzeł.ATTRIBUTE_NODE		Węzeł atrybutu (zwraca atrybut elementu dokumentu XML lub HTML)
		Węzeł tekstowy (#tekst)
Węzeł.CDATA_SECTION_NODE		Węzeł sekcji CDATA (XML: alternatywna składnia do wyświetlania danych znakowych)
Węzeł.ENTITY_REFERENCE_NODE
Węzeł.ENTITY_NODE		Węzeł sekcji
Węzeł.PROCESSING_INSTRUCTION_NODE		Węzeł dyrektywy XML
Węzeł.COMMENT_NODE		Węzeł komentarza
Węzeł.DOCUMENT_NODE		Węzeł Dokument (podstawa dostępu do treści dokumentu i tworzenia jego komponentów)
Węzeł.DOCUMENT_TYPE_NODE		Węzeł typu dokumentu (zwraca typ danego dokumentu, czyli wartość znacznika DOCTYPE)
Węzeł.DOCUMENT_FRAGMENT_NODE		Węzeł fragmentu dokumentu (pobieranie części drzewa dokumentu, tworzenie nowego fragmentu dokumentu, wstawianie fragmentu jako elementu potomnego jakiegoś węzła itp.)
Węzeł.NOTATION_NODE		Węzeł notacji*

* Notacje to nazwy identyfikujące format nieprzeanalizowanych sekcji, format elementów, które mają atrybut notacji lub program aplikacyjny Adresat, do którego skierowana jest dyrektywa.(Nie rozumiem? Wciąż też nie jestem zbyt dobry.)

Struktura dokumentu w DOM

Wszystkie obiekty dokumentu są węzłami DOM. Rozważ podstawowy dokument:

< title>DOM

"centrum" > Tytuł

Tekst akapitu

Oto schemat jego drzewa DOM:

Każdy węzeł może mieć węzły podrzędne (na diagramie prowadzą do nich strzałki). Obiekt dokumentu, podstawa drzewa dokumentu, jest również węzłem, ale nie ma węzła nadrzędnego i ma wiele właściwości i metod, których nie można znaleźć w innych węzłach. Ma jeden węzeł podrzędny: element .

W żywiole dwa węzły podrzędne: oraz , dla których wszystkie zawarte w nich elementy stają się dziećmi.

Uwaga!

„Element” i „tag” nie są synonimami. Znacznik jest znacznikiem: - są to dwa różne znaczniki. A element to obiekt oznaczony tymi tagami:

Tekst akapitu

.

Elementy

Witaj świecie!

Jak się masz?

Ten dokument może być reprezentowany jako następujące drzewo węzłów:

• html
  • głowa
    • tytuł
      • Moja pierwsza strona internetowa
  • ciało
    • h1
      • Witaj świecie!
    • p
      • Jak się masz?

Czym DOM nie jest?

W powyższym przykładzie wygląda na to, że DOM jest odwzorowaniem 1:1 oryginalnego dokumentu HTML. Jednak, jak powiedziałem, są różnice. Aby w pełni zrozumieć, czym jest DOM, musimy przyjrzeć się, czym nie jest.

DOM nie jest kopią oryginalnego kodu HTML

Chociaż DOM jest tworzony z dokumentu HTML, nie zawsze jest dokładnie taki sam. Istnieją dwa przypadki, w których DOM może różnić się od oryginalnego kodu HTML.

1. Gdy HTML zawiera błędy znaczników

DOM to interfejs umożliwiający dostęp do rzeczywistych (tj. już wyrenderowanych) elementów dokumentu HTML. W procesie tworzenia DOM sama przeglądarka może naprawić niektóre błędy w kodzie HTML.

Rozważ ten dokument HTML jako przykład:

Witaj świecie!

Brakujące elementy w dokumencie oraz , który jest wymagany dla HTML. Ale jeśli spojrzymy na powstałe drzewo DOM, widzimy, że zostało to naprawione:

• html
  • głowa
  • ciało
    • Witaj świecie!

  2. Kiedy DOM jest modyfikowany przez kod JavaScript

  Oprócz tego, że jest interfejsem do przeglądania zawartości dokumentu HTML, sam DOM może być również modyfikowany.

  Możemy na przykład stworzyć dodatkowe węzły dla DOM za pomocą Javascript.

  Var nowyParagraf = document.createElement("p"); var paragraphContent = document.createTextNode("Jestem nowy!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  Ten kod zmieni DOM, ale zmiany nie pojawią się w Dokument HTML.

  DOM nie jest tym, co widzisz w przeglądarce (tj. drzewo renderowania)

  W oknie przeglądarki widać drzewo renderowania, które, jak powiedziałem, jest kombinacją DOM i CSSOM. Tym, co odróżnia DOM od drzewa renderowania, jest to, że składa się ono tylko z tego, co ostatecznie zostanie wyrenderowane na ekranie.

  Ponieważ drzewo renderowania dotyczy tylko tego, co jest wyświetlane, wyklucza elementy, które są wizualnie ukryte. Na przykład elementy, które mają style z Nie wyświetla się.

  Witaj świecie!

  Jak się masz?

  DOM będzie zawierał element

  • html
    • głowa
    • ciało
      • h1
        • Witaj świecie!
      • p
        • Jak się masz?

  Jednak drzewo renderowania, a tym samym to, co jest widoczne w rzutni, nie zostanie uwzględnione w tym elemencie.

  • html
    • ciało
      • h1
        • Witaj świecie!

  DOM nie jest tym, co jest wyświetlane w DevTools

  Ta różnica jest nieco mniejsza, ponieważ DevTools Element Inspector zapewnia najbliższe przybliżenie DOM, który mamy w przeglądarce. Jednak inspektor DevTools zawiera: Dodatkowe informacje, którego nie ma w DOM.

  Najlepszym tego przykładem są pseudoelementy CSS. Pseudoelementy tworzone za pomocą selektorów ::zanim oraz ::po, są częścią CSSOM i drzewa renderowania, ale technicznie nie są częścią modelu DOM. Dzieje się tak dlatego, że DOM jest generowany tylko z oryginalnego dokumentu HTML, bez uwzględnienia stylów zastosowanych do elementu.

  Mimo że pseudoelementy nie są częścią DOM, znajdują się w naszym inspektorze elementów devtools.

  
  

  Streszczenie

  DOM to interfejs do dokumentu HTML. Jest używany przez przeglądarki jako pierwszy krok w określaniu, co należy renderować w oknie roboczym, oraz przez kod JavaScript do zmiany zawartości, struktury lub stylu strony.

Odniesienie zawiera opis wszystkich właściwości i metod standardowych wbudowanych obiektów JavaScript.

Obiektowy model dokumentu

Obiektowy model dokumentu(Document Object Model, DOM) to interfejs programowania aplikacji (API) dla XML, który został rozszerzony o pracę z HTML.

W DOM cała zawartość strony (elementy i tekst) jest reprezentowana jako hierarchia węzłów. Rozważ następujący kod:

Witaj świecie!

Ten kod można przedstawić za pomocą DOM jako hierarchii węzłów:

Reprezentując dokument jako drzewo węzłów, DOM API daje programistom pełną kontrolę nad zawartością i strukturą strony internetowej.

Opisując strukturę drzewa DOM, używa się terminologii zapożyczonej z drzew genealogicznych.

Zatem węzeł znajdujący się bezpośrednio nad danym węzłem nazywany jest węzłem nadrzędnym danego węzła. Węzły znajdujące się jeden poziom poniżej tego węzła nazywane są dziećmi tego węzła. Węzły znajdujące się na tym samym poziomie i mające tego samego rodzica nazywane są rodzeństwem lub rodzeństwem. Węzły znajdujące się o dowolną liczbę poziomów poniżej danego węzła nazywane są jego potomkami. Rodzice, dziadkowie i wszelkie inne węzły znajdujące się na dowolnej liczbie poziomów nad danym węzłem nazywani są jego przodkami.

Odwołanie DOM zawiera opis obiektów Document, Element, Event i NodeList, w tym opis ich metod i właściwości:

Katalog BOM

BOM (Browser Object Model w tłumaczeniu z języka angielskiego - Browser Object Model) zapewnia dostęp do okna przeglądarki i pozwala manipulować nim i jego elementami.

Obiekty BOM zapewniają dostęp do funkcjonalności przeglądarki niezależnie od zawartości strony internetowej. Temat BOM jest jednocześnie ciekawy i złożony, ponieważ ze względu na długi brak specyfikacji producenci przeglądarek swobodnie rozszerzali BOM według własnego uznania. Wiele elementów podobnych do różne przeglądarki, stały się de facto standardami przestrzeganymi do dziś ze względu na wzajemną kompatybilność. Aby ujednolicić te podstawowe aspekty JavaScript, W3C zdefiniowało podstawowe elementy BOM w specyfikacji HTML5.

Zazwyczaj programiści używają jQuery, gdy muszą coś zrobić z DOM. Jednak prawie każdą manipulację DOM można wykonać w czystym JavaScript przy użyciu jego API DOM.

Przyjrzyjmy się temu API bardziej szczegółowo:

Na koniec napiszesz własną prostą bibliotekę DOM, którą będzie można wykorzystać w dowolnym projekcie.

Zapytania DOM

Zapytania DOM są wykonywane przy użyciu metody .querySelector(), która jako argument przyjmuje dowolny selektor CSS.

Const myElement = document.querySelector("#foo > div.bar")

Zwróci pierwszy pasujący element. Możesz zrobić odwrotnie - sprawdź, czy element pasuje do selektora:

MójElement.matches("div.bar") === true

Jeśli chcesz pobrać wszystkie elementy pasujące do selektora, użyj następującej konstrukcji:

Const myElements = document.querySelectorAll(.bar")

Jeśli wiesz, do którego elementu nadrzędnego się odnosić, możesz po prostu przeszukać jego elementy potomne, zamiast przeszukiwać cały kod:

Const myChildElemet = myElement.querySelector("input") // Zamiast: // document.querySelector("#foo > div.bar input")

Powstaje pytanie: po co więc używać innych, mniej wygodnych metod, takich jak.getElementsByTagName() ? Jest mały problem - wynik wyjścia .querySelector() nie jest aktualizowany, a gdy dodamy nowy element (patrz ), nie ulegnie on zmianie.

const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length ===elementy2.length // fałszywy

Również querySelectorAll() zbiera wszystko w jedną listę, co czyni ją niezbyt wydajną.

Jak pracować z listami?

Co więcej, .querySelectorAll() ma dwa małe dziwactwa. Nie możesz po prostu wywoływać metod na wynikach i oczekiwać, że zostaną zastosowane do każdego z nich (jak możesz być przyzwyczajony do robienia z jQuery). W każdym razie będziesz musiał wykonać iterację po wszystkich elementach pętli. Po drugie, zwracany obiekt jest listą elementów, a nie tablicą. Dlatego metody tablicowe nie będą działać. Oczywiście istnieją metody dla list, takie jak .forEach() , ale niestety nie są one odpowiednie dla wszystkich przypadków. Lepiej więc przekonwertować listę na tablicę:

// Używanie Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Lub prototyp tablicy (przed ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Łatwiej: .forEach.call (mojeElementy , zróbCośZKażdymElementem)

Każdy element ma pewne właściwości, które odnoszą się do „rodziny”.

MójElement.dzieci mójElement.firstElementMoje dzieckoElement.lastElementMojElement.dziecko.previousElementRodzeństwo mójElement.nextElementRodzeństwo

Ponieważ interfejs Element jest dziedziczony z interfejsu węzła, obecne są również następujące właściwości:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

Pierwsze właściwości odnoszą się do elementu, a drugie (z wyjątkiem .parentElement) mogą być listami elementów dowolnego typu. W związku z tym możesz sprawdzić typ elementu:

MyElement.firstChild.nodeType === 3 // ten element będzie węzłem tekstowym

Dodawanie klas i atrybutów

Dodać nowa klasa bardzo prosta:

myElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Dodanie właściwości do elementu jest dokładnie takie samo, jak dodanie właściwości do dowolnego obiektu:

// Pobierz wartość atrybutu const value = myElement.value // Ustaw atrybut jako właściwość elementu myElement.value = "(!LANG:foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Możesz użyć metod .getAttibute() , .setAttribute() i .removeAttribute() . Natychmiast zmienią atrybuty HTML elementu (w przeciwieństwie do właściwości DOM), co uruchomi renderowanie przeglądarki (możesz zobaczyć wszelkie zmiany, sprawdzając element za pomocą narzędzi programistycznych w przeglądarce). Takie przerysowania nie tylko wymagają więcej zasobów niż ustawianie właściwości DOM, ale mogą również prowadzić do nieoczekiwanych błędów.

Są one zwykle używane w elementach, które nie mają odpowiednich właściwości DOM, takich jak colspan . Lub jeśli ich użycie jest naprawdę konieczne, na przykład dla właściwości HTML podczas dziedziczenia (patrz).

Dodawanie stylów CSS

Dodaje się je w taki sam sposób, jak inne właściwości:

MyElement.style.marginLeft = "2em"

Niektóre specyficzne właściwości można ustawić za pomocą .style , ale jeśli chcesz uzyskać wartości po pewnych obliczeniach, lepiej użyć window.getComputedStyle() . Ta metoda pobiera element i zwraca CSSStyleDeclaration zawierającą style zarówno samego elementu, jak i jego rodzica:

Window.getComputedStyle(myElement).getPropertyValue("pozostały margines")

Zmiana DOM

Możesz przenosić elementy:

// Dodanie elementu 1 jako ostatniego dziecka elementu 2 element1.appendChild(element2) // Wstawienie elementu 2 jako dziecka elementu 1 przed elementem 3 element1.insertBefore(element2, element3)

Jeśli nie chcesz się przenosić, ale chcesz wkleić kopię, użyj:

// Utwórz klon const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

Metoda .cloneNode() przyjmuje jako argument wartość logiczną, a jeśli true, elementy potomne są również klonowane.

Oczywiście możesz tworzyć nowe elementy:

const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("jakiś tekst")

A następnie wstaw je, jak pokazano powyżej. Nie możesz usunąć elementu bezpośrednio, ale możesz to zrobić poprzez element nadrzędny:

MyParentElement.removeChild(myElement)

Możesz również odwołać się pośrednio:

MyElement.parentNode.removeChild(myElement)

Metody na elementach

Każdy element ma właściwości takie jak .innerHTML i .textContent , zawierają kod HTML i odpowiednio sam tekst. Poniższy przykład zmienia zawartość elementu:

// Zmień kod HTML myElement.innerHTML = `

` // Spowoduje to usunięcie treści myElement.innerHTML = null // Dodaje do HTML myElement.innerHTML += ` kontynuuj czytanie...

---

W rzeczywistości zmiana kodu HTML jest złym pomysłem, ponieważ powoduje utratę wszystkich zmian, które zostały wprowadzone wcześniej, a także przeciąża obsługę zdarzeń. Lepiej jest używać tej metody tylko poprzez całkowite odrzucenie całego kodu HTML i zastąpienie go kopią z serwera. Lubię to:

const link = document.createElement("a") const text = document.createTextNode("kontynuuj czytanie...") const hr = document.createElement("hr") link.href = "foo.html" link.appendChild( tekst) myElement.appendChild(link) myElement.appendChild(hr)

Spowoduje to jednak dwa przerysowania przeglądarki, podczas gdy .innerHTML spowoduje tylko jedno. Możesz obejść ten problem, jeśli najpierw dodasz wszystko do DocumentFragment , a następnie dodasz potrzebny fragment:

Const fragment = document.createDocumentFragment() fragment.appendChild(tekst) fragment.appendChild(hr) myElement.appendChild(fragment)

Obsługa zdarzeń

Jeden z najprostszych handlerów:

MyElement.onclick = funkcja onclick (zdarzenie) ( console.log(event.type + " został zwolniony") )

Ale co do zasady należy tego unikać. Tutaj .onclick jest właściwością elementu i teoretycznie możesz ją zmienić, ale nie będziesz w stanie dodać innych funkcji obsługi za pomocą kolejnej funkcji, która odwołuje się do starej.

Lepiej jest użyć .addEventListener(), aby dodać moduły obsługi. Przyjmuje trzy argumenty: typ zdarzenia, funkcję, która będzie wywoływana przy każdym uruchomieniu, oraz obiekt konfiguracyjny (do tego dojdziemy później).

MyElement.addEventListener("klik", funkcja (zdarzenie) ( console.log(zdarzenie.type + " zostało uruchomione") )) myElement.addEventListener("klik", funkcja (zdarzenie) ( console.log(event.type + " został zwolniony") ))

Właściwość event.target odwołuje się do elementu, do którego jest dołączone zdarzenie.

Dzięki temu możesz uzyskać dostęp do wszystkich właściwości:

// Właściwość `forms` jest tablicą zawierającą łącza do wszystkich formularzy const myForm = document.forms const myInputElements = myForm.querySelectorAll("input") Array.from(myInputElements).forEach(el => ( el.addEventListener(") zmiana", funkcja (zdarzenie) ( console.log(event.target.value) )) ))

Zapobieganie domyślnym działaniom

W tym celu używana jest metoda .preventDefault(), która blokuje standardowe akcje. Na przykład zablokuje przesłanie formularza, jeśli autoryzacja po stronie klienta nie powiodła się:

MyForm.addEventListener("submit", function (event) ( const name = this.querySelector("#name") if (name.value === "(!LANG:Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Metoda .stopPropagation() pomoże, jeśli masz określoną procedurę obsługi zdarzeń dołączoną do elementu podrzędnego i drugą procedurę obsługi tego samego zdarzenia dołączoną do elementu nadrzędnego.

Jak wspomniano wcześniej, metoda .addEventListener() przyjmuje opcjonalny trzeci argument jako obiekt konfiguracyjny. Ten obiekt musi zawierać jedną z następujących właściwości logicznych (wszystkie domyślnie ustawione na false):

• przechwytywanie: zdarzenie zostanie dołączone do tego elementu przed jakimkolwiek innym elementem poniżej w DOM;
• raz: wydarzenie można przypiąć tylko raz.
• pasywny: event.preventDefault() zostanie zignorowany (wyjątek podczas błędu).

Najpopularniejszą właściwością jest .capture i jest tak powszechna, że ​​istnieje krótka droga wpisy: zamiast przekazywać go w obiekcie konfiguracyjnym, po prostu podaj jego wartość tutaj:

MyElement.addEventListener(typ, listener, true)

Programy obsługi są usuwane za pomocą metody .removeEventListener(), która przyjmuje dwa argumenty: typ zdarzenia i odwołanie do procedury obsługi do usunięcia. Na przykład właściwość Once można zaimplementować w następujący sposób:

MyElement.addEventListener("zmiana", funkcja listener (zdarzenie) ( console.log(event.type + " został wyzwolony na " + this) this.removeEventListener("change", listener) ))

Dziedzictwo

Załóżmy, że masz element i chcesz dodać obsługę zdarzeń dla wszystkich jego elementów podrzędnych. Następnie musiałbyś przejść przez nie za pomocą metody myForm.querySelectorAll("input"), jak pokazano powyżej. Możesz jednak po prostu dodać elementy do formularza i sprawdzić ich zawartość za pomocą event.target .

MyForm.addEventListener("change", function (event) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

I kolejny plus Ta metoda jest to, że handler zostanie automatycznie powiązany z nowymi elementami podrzędnymi.

Animacja

Najłatwiejszym sposobem dodania animacji jest użycie CSS z właściwością przejścia. Ale dla większej elastyczności (na przykład w przypadku gry) lepiej nadaje się JavaScript.

Wywołanie metody window.setTimeout() do momentu zakończenia animacji nie jest najlepszy pomysł, ponieważ aplikacja może się zawiesić, szczególnie na urządzenia mobilne. Lepiej jest użyć window.requestAnimationFrame(), aby zapisać wszystkie zmiany do następnego przerysowania. Jako argument przyjmuje funkcję, która z kolei otrzymuje znacznik czasu:

const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(funkcja fadeIn (now)) ( const progress = now - start myElement.style.opacity = postęp / czas trwania if (progress< duration) { window.requestAnimationFrame(fadeIn) } }

W ten sposób uzyskuje się bardzo płynną animację. W swoim artykule Mark Brown omawia ten temat.

Pisanie własnej biblioteki

Fakt, że w DOM musisz cały czas iterować elementy, aby coś z nimi zrobić, może wydawać się dość żmudny w porównaniu ze składnią $(".foo").css((color: "red")) jQuery. Ale dlaczego nie napisać kilku własnych metod, które ułatwią to zadanie?

Const $ = funkcja $(selector, context = document) ( const elements = Array.from(context.querySelectorAll(selector)) return ( elementy, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) zwróć to ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) zwróć to ), on (zdarzenie, handler, opcje) ( this.elements .forEach(element => ( element.addEventListener(zdarzenie, handler, opcje) )) zwróć to ) ) )