Zazwyczaj programiści używają jQuery, gdy muszą coś zrobić z DOM. Jednak prawie każdą manipulację DOM można wykonać na czysty JavaScript za pomocą interfejsu 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 rodzica 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 działania output.querySelector() nie jest aktualizowany, a gdy dodamy nowy element(patrz ), to się nie zmieni.

const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.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

Dodanie nowej klasy jest bardzo proste:

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 spowoduje ponowne narysowanie przeglądarki (będziesz mógł 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 niektóre 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 , klonuje i elementy potomne.

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 = `

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 , która jest tak powszechna, że ​​można ją zastosować w skrócie: zamiast przekazywać ją w obiekcie konfiguracyjnym, po prostu podaj jej 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 jeszcze jednym plusem tej metody jest to, że handler będzie automatycznie dołączany do nowych elementów potomnych.

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ływanie metody window.setTimeout() do momentu zakończenia animacji nie jest dobrym pomysłem, ponieważ aplikacja może się zawiesić, zwłaszcza na urządzeniach mobilnych. 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ć po elementach, aby coś z nimi zrobić, może wydawać się dość nudny w porównaniu do składni jQuery $(".foo").css((color: "red")). 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 ) ) )

Przed

Jak widać, wyniki są takie same, chociaż stosowane techniki są inne. W pierwszym przypadku korzystam z własności dzieci. Jest to właściwość tylko do odczytu i zwraca kolekcję elementy HTML, znajdujący się wewnątrz żądanego elementu; aby policzyć ich liczbę, używam właściwości length tej kolekcji.

W drugim przykładzie używam metody childElementCount, którą uważam za bardziej przejrzysty i potencjalnie łatwiejszy w utrzymaniu sposób (więcej o tym później, nie sądzę, że będziesz miał problem ze zrozumieniem, co robi).

Mógłbym spróbować użyć childNodes.length (zamiast children.length), ale spójrz na wynik:

Var mojaLista = document.getElementById("mojaLista"); console.log(myList.childNodes.length); // 13

Zwraca 13, ponieważ childNodes jest zbiorem wszystkich węzłów, w tym spacji — pamiętaj o tym, jeśli zależy Ci na różnicy między węzłami podrzędnymi a węzłami elementów podrzędnych.

Sprawdzanie istnienia węzłów podrzędnych

Aby sprawdzić, czy element ma węzły podrzędne, mogę użyć metody hasChildNodes(). Metoda zwraca logiczne wskazanie ich obecności lub nieobecności:

Var mojaLista = document.getElementById("mojaLista"); console.log(mojaLista.hasChildNodes()); // PRAWDA

Wiem, że moja lista zawiera węzły podrzędne, ale mogę zmienić kod HTML, aby ich nie było; teraz znacznik wygląda tak:

A oto wynik ponownego uruchomienia hasChildNodes():

Console.log(mojaLista.hasChildNodes()); // PRAWDA

Metoda nadal zwraca true . Chociaż lista nie zawiera żadnych elementów, zawiera spację, która jest prawidłowym typem węzła. Ta metoda uwzględnia wszystkie węzły, a nie tylko węzły elementów. Aby hasChildNodes() zwróciło wartość false, musimy ponownie zmienić znacznik:

A teraz oczekiwany wynik wyświetla się w konsoli:

Console.log(mojaLista.hasChildNodes()); // fałszywy

Oczywiście, jeśli wiem, że mogę napotkać spację, najpierw sprawdzam, czy istnieją węzły podrzędne, a następnie używam właściwości nodeType, aby określić, czy są wśród nich węzły elementów.

Dodawanie i usuwanie elementów podrzędnych

Istnieją techniki, które można wykorzystać do dodawania i usuwania elementów z DOM. Najsłynniejsza z nich opiera się na połączeniu metod createElement() i appendChild().

VarmyEl = document.createElement("div"); document.body.appendChild(myEl);

W tym przypadku tworzę