W tym samouczku omówimy podstawy pracy ze zdarzeniami, atrybutami i getElementById w JavaScript.

Na poprzednich lekcjach poznawaliśmy podstawowe cechy języka JavaScript. Zaczynając od tej lekcji, zrobimy to, do czego przeznaczony jest sam JavaScript - zmienimy elementy HTML strony i reagować na działania użytkownika. Nasze skrypty staną się bardziej efektowne i użyteczne.

Zaczniemy od nauczenia naszego kodu reagowania na działaniach użytkownika strona. Na przykład użytkownik klika gdzieś myszką, a nasz kod w odpowiedzi będzie musiał przetworzyć to kliknięcie i wyświetlić na ekranie pewne informacje.

Działania użytkownika, które możemy śledzić za pomocą JavaScript, nazywają się wydarzenia. Wydarzenia mogą być: płakać mysz na elemencie strony, przewodnictwo myszką na elemencie strony lub odwrotnie - opieka kursor myszy poza elementem i tak dalej. Ponadto istnieją zdarzenia, które nie zależą od działań użytkownika, na przykład zdarzenie, gdy strona HTML jest ładowana do przeglądarki.

W JavaScript jest kilka sposobów pracować z wydarzeniami. Zaczniemy od najprostszego z nich.

Podstawy wydarzeń

Najłatwiejszym sposobem ustawienia odpowiedzi elementu na określone zdarzenie jest określenie go za pomocą atrybutu w określonym znaczniku. Na przykład wydarzenie "kliknięcie myszką" pasuje do atrybutu na kliknięcie, wydarzenie "najechanie myszką"- atrybut po najechaniu myszą, a wydarzenie "element opuszczający kursor"- atrybut onmouseout.

Wartość atrybutu ze zdarzeniem to Kod JavaScript. W poniższym przykładzie klikając na przycisk funkcja zostanie wykonana alarm:

I teraz przez kliknięcie funkcja zostanie wykonana na elemencie funkcjonować:

func() ( alert("!"); )

Można to zrobić więcej niż jedna funkcja, ale kilka:

funkcja func1() ( alert("1"); ) funkcja func2() ( alert("2"); )

Pamiętaj, że jeśli w atrybucie potrzebujesz podwójne cudzysłowy(np. dla ciągu znaków), a zewnętrzne cudzysłowy atrybutu są również podwójne - onclick="alert("!")"- ten kod nie zadziała.

Możesz sobie z tym poradzić na kilka sposobów: możesz zmienić zewnętrzne cudzysłowy na pojedyncze onclick="alert("!")", możesz także pominąć wewnętrzne cudzysłowy, używając odwrotnego ukośnika onclick="alert(\"!\")" lub po prostu przenieś kod JavaScript z atrybutu do funkcji i zostaw tylko nazwę funkcji w atrybucie onclick="funkcja()".

To samo stanie się, jeśli zewnętrzny ustaw cudzysłowy atrybutów na pojedyncze cudzysłowy i użyj pojedynczych cudzysłowów dla ciągu: onclick="alert("!")"- tutaj też wszystko jest rozwiązywane w podobny sposób.

Tabela atrybutów wydarzeń

Praca z getElementById

Teraz dowiemy się, jak odbierać elementy HTML strony i przeprowadzać różne manipulacja(będziemy mogli zmienić np. ich tekst i kolor oraz wiele innych przydatnych rzeczy).

Załóżmy, że na stronie mamy tag z atrybutem ID w znaczeniu test. Napiszmy link do tego tagu w zmiennej element. Aby to zrobić, musimy użyć metody getElementById, który pobiera element przez jego ID.

Ten wpis się wydarzy przez kliknięcie na przycisku, któremu ustawiamy atrybut na kliknięcie. Po kliknięciu tego przycisku funkcja będzie działać funkcjonować, który znajdziecie na HTML element strony z ID równy test i zapisz link do tego w zmienną element:

Teraz w zmiennej element mamy link do elementu z atrybutem ID w znaczeniu test. Sama zmienna element jest obiekt.

Ten obiekt i Znacznik HTML strony są ze sobą połączone - możemy zmieniać dowolne właściwości obiektu element a jednocześnie zobaczymy zmiany na Strona HTML, co stanie się z otrzymanym przez nas elementem.

Zobaczmy, jak to się dzieje w praktyce.

Podstawy pracy z atrybutami HTML poprzez JavaScript

Teraz będziemy czytać i zmieniać atrybuty tagów. Dajmy się ponownie Wejście z id równym test i przycisk, klikając na którą funkcja zostanie uruchomiona funkcjonować:

Wewnątrz funkcji funkcjonować otrzymujemy nasz wkład po jego id i zapisz odwołanie do niego w zmiennej element:

function func() ( var elem = document.getElementById("test"); )

Wyświetlmy teraz zawartość atrybutów naszego wejścia. Aby uzyskać dostęp na przykład do atrybutu value, napisz: el.wartość, gdzie elem jest zmienną, w której ustawiamy referencję do naszego elementu za pomocą getElementById , a value jest atrybutem interesującego nas tagu.

Możemy wyświetlić zawartość atrybutu za pomocą alertu w ten sposób - alert(element.wartość)- lub napisz do jakiejś zmiennej. Zróbmy to:

function func() ( var elem = document.getElementById("test"); alert(elem.value); //wypisuje "!" )

W ten sam sposób możemy odczytać wartości innych atrybutów, na przykład tak - elem.id- bierzemy pod uwagę wartość atrybutu id, a więc - element.typ- wartość atrybutu type. Zobacz przykład:

function func() ( var elem = document.getElementById("test"); alert(elem.value); //wydrukuje "!" alert(elem.id); //wydrukuje "test" alert(elem.type); //wypisuje "tekst" )

Możesz nie tylko czytać wartości atrybutów, ale także zmiana ich. Na przykład, aby zmienić wartość atrybutu wartość, wystarczy przypisać jego konstrukcje el.wartość:

function func() ( var elem = document.getElementById("test"); elem.value = "(!LANG:www"; //присвоим новое значение атрибуту value } !}

Kod HTML będzie wyglądał tak (wartość atrybutu wartości stanie się www):

Cóż, teraz najtrudniejsza rzecz - możesz nie wchodź zmienny element, i buduj łańcuch z takich punktów:

function func() ( alert(document.getElementById("test").value); //wydrukowuje "!" )

W ten sam sposób (łańcuchowo) można wyprodukować nadpisywanie atrybutów:

function func() ( document.getElementById("test").value = "(!LANG:www"; }!}

Jednak w większości przypadków wprowadzenie zmiennej bardziej wygodny. Porównaj dwa przykłady - teraz wprowadziłem zmienną element i może odczytać dowolną liczbę atrybutów, podczas gdy getElementById nazywa tylko raz:

function func() ( var elem = document.getElementById("test"); elem.value = "(!LANG:www"; elem.type = "submit"; }!}

A teraz nie wprowadzam nowej zmiennej i tak muszę zadzwonić getElementById dwa razy:

function func() ( document.getElementById("test").value = "(!LANG:www"; document.getElementById("test").type = "submit"; }!}

Moim zdaniem ten kod stał się trudniejsze, chociaż zajmuje jedną linię mniej. Również, jeśli chcę zmienić wartość ID od testu do np. www, muszę to robić w wielu miejscach, co nie jest zbyt wygodne.

do przeglądarki. Szukaj elementów na stronie, co sprawia, że ​​metoda getElementById, jest ładny wolny operacja ( i ogólnie każda praca z elementami strony jest powolną operacją- Pamiętaj to).

W naszym przypadku, jeśli używamy za każdym razem getElementById, to przeglądarka będzie każdorazowo przetwarzać stronę HTML i szukać elementu o podanym id kilka razy (nie ma znaczenia, że ​​identyfikatory są takie same - przeglądarka wykona wszystkie czynności kilka razy), wykonując bezużyteczne operacje, które mogą spowolnić przeglądarkę.

Jeśli użyjemy zmiennej element- na stronie nie następuje wyszukiwanie (element został już znaleziony, a link do niego znajduje się w zmiennej) element).

Wyjątki: klasa i dla atrybutów

Nauczyłeś się już pracować z atrybutami poprzez JavaScript, a teraz pora powiedzieć Ci, co nie takie proste- podczas pracy z atrybutami jest wyjątek - to jest atrybut klasa.

To słowo jest specjalny w JavaScript, więc nie możemy tak po prostu pisać klasa elem odczytać wartość atrybutu klasa. Zamiast tego powinieneś napisać element.nazwaklasy.

Poniższy przykład wyświetla wartość atrybutu klasa:

function func() ( var elem = document.getElementById("test"); alert(elem.className); )

Nawiasem mówiąc, istnieją inne atrybuty, które są nazywane inaczej niż właściwość. Na przykład atrybut dla (

Praca z tym

Teraz będziemy pracować z obiektem specjalnym ten A, który wskazuje na bieżący element (element, na którym wystąpiło zdarzenie). Ponadto wskazuje, że ten element został już odebrany przez metodę getElementById.

Zobaczmy, jak pracować z ten i jakie są korzyści z tego podejścia.

Miejmy za zadanie kliknąć na wejściu, aby wyświetlić na ekranie zawartość jego wartości.

Na razie wiesz tylko, jak zrobić coś takiego:

function func() ( var elem = document.getElementById("test"); alert(elem.value); )

W zasadzie to rozwiązanie jest dobre, ale teraz wyobraź sobie, że mamy wiele wejść i klikając na każdy musimy wyświetlić jego wartość.

W takim przypadku otrzymamy coś takiego:

function func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) function func2() ( var elem = document.getElementById("test2"); alert(elem.value); ) function func3() ( var elem = document.getElementById("test3"); alert(elem.value); )

Teraz wada naszego podejścia jest wyraźnie widoczna - dla każdego wejścia musimy stworzyć własną funkcję przetwarzania kliknięć, a te funkcje robią prawie to samo.

Jeśli mamy 10 wejść, to będziemy musieli wykonać 10 funkcji, co nie jest wygodne.

Uprośćmy nasze zadanie: przekażemy id bieżącego elementu jako parametr do funkcji. I zamiast dużej liczby funkcji wszystko zostanie zredukowane do jednej funkcji:

funkcja func(id) ( var elem = document.getElementById(id); alert(elem.value); )

Jednak to rozwiązanie wciąż ma wadę – każdy element będzie musiał wpisać inny identyfikator, co też jest nieco niewygodne.

Zastanówmy się więc w końcu nad rozwiązaniem problemu poprzez ten.

Zróbmy to tak, aby każde wejście wyświetlało swoją zawartość po kliknięciu. W tym celu przekazujemy obiekt jako parametr funkcji ten, lubię to: funkcja(to).

Nasze this jest przekazywane jako parametr funkcji i kończy się w zmiennej element. Ten elem zachowuje się tak, jakby został odebrany w ten sposób: var elem = document.getElementById(...), ale nie musisz go w ten sposób odbierać, wszystko jest już gotowe i możesz z niego korzystać. Na przykład, el.wartość wskazuje na wartość naszego wkładu i tak dalej.

Oto najprostsze rozwiązanie naszego problemu:

funkcja func(elem) ( alert(elem.value); )

Podstawy CSS

W JavaScript pracować z Właściwości CSS dzieje się to poprzez zmianę wartości atrybutu stylu elementu. Na przykład, aby zmienić kolor musisz zbudować następujący łańcuch - elem.styl.kolor- i przypisz mu żądaną wartość koloru:

function func() ( var elem = document.getElementById("test"); elem.style.color = "czerwony"; )

Możesz również pominąć zmienną element, i buduj bardzo długi łańcuch.

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, które element nadrzędny trzeba się odwoływać, możesz po prostu przeszukiwać jego dzieci 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, 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 = `

Nowa treść

bip bup bip bup

` // Powoduje 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ż wszystkie zmiany, które zostały wprowadzone wcześniej, zostaną utracone, a programy obsługi zdarzeń są przeciążone. 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 ) ) )


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 superzadania, aby „malować” tak strawnie, jak to możliwe, ale też nie do końca 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 Obiektowy model dokumentu(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 stylów CSS jako 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. Te modele nie są formalnie specyfikacjami. DOM opublikowany W3C. Reprezentują raczej informacje o tym, co istniało przed rozpoczęciem procesu normalizacji.

Poziom 1(1997) zawierał również podstawową funkcjonalność przetwarzania dokumentów XML: wiele sposobów pracy z poszczególnymi węzłami, pracę z instrukcjami przetwarzania XML i tak dalej.

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 samo jak inne aplikacje komputerowe. Interpretują HTML, XML, CSS, JavaScript, PHP, Perl i tak dalej na zera i jedynki. 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, które identyfikują format nieprzeanalizowanych sekcji, format elementów, które mają atrybut notation lub aplikację, do której adresowana 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 mają inne węzły. 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 , <h1>oraz <p>Zawierają się w sobie <b>tekst</b>. To są ich dzieci <b>węzły tekstowe</b>. W żywiole <h1>Istnieje również <b>atrybut</b>: wyrównaj="środek" . <b>Węzły atrybutów</b> są również węzłami podrzędnymi elementów, które je zawierają.</p> <p>Podczas pracy z węzłami drzewa DOM używane są ich właściwości i metody.</p> <h4>Niektóre właściwości węzła</h4> <p>Małe wprowadzenie</p> <p>Powtarzam raz jeszcze: gdy w skryptach uzyskujemy dostęp do elementów strony, mamy do czynienia nie tylko z językiem Javascript, ale także z osadzonym w nim interfejsem <b>DOM</b>. Czasami trzeba być tego świadomym, czasami można zapomnieć „co mówimy w prozie”.</p> <p>Niektóre właściwości i metody z modelu obiektowego <b>DOM</b> już go wykorzystaliśmy w ten sposób. Dlatego od czasu do czasu podam linki do poprzednich lekcji.</p> <p>W tej lekcji nie pójdziemy drogą „akademicką”, biorąc pod uwagę wszystkie właściwości wszystkich węzłów we wszystkich przeglądarkach. Na początek zapoznajmy się z najbardziej praktycznym i „bezkonfliktowym” z nich.</p> <p>Dlatego <b>Nie będziemy</b> zacznij jak zwykle od „podstawowych właściwości”: <b>Nazwa węzła</b> oraz <b>nodeValue</b>.</p> <p>Nazwa znacznika</p> <p>Zwraca ciąg z nazwą znacznika elementu. Wszystkie wartości tagName zawierają tylko wielkie litery.</p> <p><b>Składnia</b></p> <i>element</i>.<b>Nazwa znacznika</b> <p><b>Przykład</b></p> <span><!-- Вставим <span>, чтобы имя было не из одной буквы. --> </span> <p><span id= "testTagName" >Testowanie właściwości tagName</p> <p> </span> <span><script type="text/javascript"> </span> document.<b>write </b>(document.<b>getElementById </b>(<i>"testTagName" </i>).tagName) </script> </p> <p><b>Wynik</b></p> <p>Testowanie właściwości tagName</p> <p>wewnętrznyHTML</p> <p>Spotkaliśmy się już z tą właściwością (patrz lekcja 10). A teraz rozumiemy, skąd się to wzięło: „z domu”.</p> <p>Daje dostęp do zawartości elementu. Określa nie tylko treść tekstową, ale także wszystkie znaczniki HTML, które znajdują się wewnątrz elementu.</p> <p>Ta właściwość służy nie tylko do czytania, ale także do zmiany treści.</p> <p>Notatka</p> <p>W IE dla szeregu elementów <b>wewnętrznyHTML</b> działa tylko do odczytu: są to wszystkie elementy tabeli, z wyjątkiem <td>oraz <th>, jak również <title>oraz <frameset> .</p> <p>Na przykład stworzyliśmy pustą tabelę bez elementu <td>i chcesz programowo wstawić go do <tr>poprzez <b>wewnętrznyHTML</b>:</p> <p><html><br> <head></head><br> <body onload= </span><span>"document.getElementById("test").innerHTML = " <td>ciąg testowy</td>"" </span>> <br><table><br> <tr id= "test" ></tr><br> </table> <br></body><br> </html> </p> <p>IE zgłosi „nieznany błąd w czasie wykonywania”, a inne przeglądarki wkleją.</p> <p>Jednocześnie, jeśli zażądamy istniejącej zawartości elementu <tr>, na przykład przez <span>alert(document.getElementById("id").innerHTML)</span>, wtedy będzie działać w IE.</p> <p><b>Składnia</b></p> <i>element</i>.<b>wewnętrznyHTML</b> = <i>„przypisany tekst”</i> <p><b>Przykład</b></p> <table class="code"><tr><td><span><!-- читаем текст отсюда<br> (исходный элемент делаем невидимым) --> </span><br><p style= "display: none;" id= "testInnerHTML" ><b style= "color: red;" >Testowanie właściwości innerHTML</b></p> <br><span><!-- вставляем его сюда --> </span><br><p id= "target" >Akapit do wstawienia</p> <br><span><script type="text/javascript"> </span><br><span>// Эта функция читает текст и вставляет его в заданный абзац. </span><br>function testRead() { <br> document.<b>getElementById </b>(<i>"target" </i>).innerHTML = document.<b>getElementById </b>(<i>"testInnerHTML" </i>).innerHTML<br><span>}<br><span>// Эта функция изменяет текст заданного абзаца. </span><br> function </span> testChange() { <br> document.<b>getElementById </b>(<i>"target" </i>).innerHTML = <i>"<span style="color: blue;">Перекрашиваем и меняем текст</span>" </i><br><span>}<br><span>// Эта функция возвращает свойство в исходное положение. </span><br> function </span> testReset() { <br> document.<b>getElementById </b>(<i>"target" </i>).innerHTML = <i>"Абзац для вставки" </i><br>} <br></script> <br><form><br> <input type= "button" value= <span>"odczytaj wewnętrzny HTML"</span> onClick="testRead();" > <br> <input type= "button" value= "zmień wewnętrzny HTML" onClick= "testChange();" ><br> <input type= "button" value= "Resetowanie" onClick= "testReset();" ><br> </form> </td> </tr></table><p><b>Testowanie właściwości innerHTML</b></p> <p>Akapit do wstawienia</p> <p>Ta sekcja zawiera krótkie wprowadzenie do Document Object Model (DOM) - czym jest DOM, w jaki sposób dostarczane są struktury dokumentów HTML i XML oraz jak z nimi współdziałać. Ta sekcja zawiera podstawowe informacje i przykłady.</p> <h2>Co to jest obiektowy model dokumentu (DOM)?</h2> <p>Document Object Model (DOM) to interfejs programowania (API) dla dokumentów HTML i XML. DOM zapewnia ustrukturyzowaną reprezentację dokumentu i określa, w jaki sposób można uzyskać dostęp do tej struktury z programów, które mogą zmieniać zawartość, styl i strukturę dokumentu. Reprezentacja DOM składa się ze zorganizowanej grupy węzłów i obiektów, które mają właściwości i metody. Zasadniczo DOM łączy stronę internetową z językami skryptowymi lub językami programowania.</p><p>Strona internetowa to dokument. Dokument może być prezentowany zarówno w oknie przeglądarki, jak iw samym kodzie HTML. Tak czy inaczej, to ten sam dokument. DOM zapewnia inny sposób reprezentowania, przechowywania i zarządzania tym dokumentem. DOM w pełni obsługuje obiektową reprezentację strony internetowej, umożliwiając jej zmianę za pomocą języka skryptowego, takiego jak JavaScript.</p> <h2>Jak dostępny jest DOM?</h2> <p>Nie musisz robić nic specjalnego, aby pracować z DOM. <a href="https://bar812.ru/pl/ustanovka-skriptov-v-razlichnye-brauzery-ustanovka-skriptov-v.html">Różne przeglądarki</a> mają różne implementacje DOM, te implementacje wykazują różny stopień zgodności z rzeczywistym standardem DOM (jest to temat, którego staraliśmy się nie omawiać w tej dokumentacji), ale każda przeglądarka używa własnego DOM, aby udostępnić strony internetowe dla języków skryptowych.</p> <p>Podczas tworzenia skryptu za pomocą elementu<script>, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы или для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. <a href="https://bar812.ru/pl/svoistvo-znachenie-opacity-otvechaet-za-prozrachnost-s-pomoshchyu-css-prozrachnost.html">различных элементов</a> на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции объекта , или использовать более <a href="https://bar812.ru/pl/ploho-lovit-dzhipies-na-telefone-yandeks-navigator-slabyi-gps.html">сложные методы</a> DOM, которые создают новое содержимое, как показанно в следующем примере:</p><p> <body onload="window.alert("добро пожаловать на мою домашнюю страницу!");"> </p><p>В следующем примере внутри элемента <script> определен код JavaScript, <a href="https://bar812.ru/pl/oshibka-polucheniya-dannyh-servera-401-kody-oshibok-http-rasshifrovka.html">данный код</a> устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создает новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:</p> <span>< html </span>> </span> <span>< head </span>> </span> <span>< script </span>> </span> <span> // запуск данной функции при загрузке документа </span> window. onload = function () { <span> // создание нескольких элементов </span> <span> // в пустой HTML странице </span> heading = document. createElement<span>( </span>"h1" ) ; heading_text = document. createTextNode<span>( </span>"Big Head!" ) ; heading. appendChild<span>( </span> heading_text) ; document. body. appendChild<span>( </span> heading) ; } <span></ script </span>> </span> <span></ head </span>> </span> <span>< body </span>> </span> <span></ body </span>> </span> <span></ html </span>> </span> <h2>Важные типы данных</h2> <p>Данный раздел предназначен для краткого описания <a href="https://bar812.ru/pl/konstrukcii-antenn-dlya-razlichnyh-diapazonov-radiovoln.html">различных типов</a> и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в <a href="https://bar812.ru/pl/kakaya-karta-nuzhna-dlya-razrabotchikov-gugl-plei-kak-dobavlyat-igry-v.html">данном разделе</a> обычно ссылается на узлы как на element s, на массивы узлов как на nodeList s (либо просто element s) и на атрибуты узла, просто как на attribute s.</p> <p>Ниже таблица с <a href="https://bar812.ru/pl/osnovnye-harakteristiki-cms-luchshie-besplatnye-cms---ih-kratkaya-harakteristika.html">кратким описанием</a> этих типов данных.</p> <table class="standard-table"><tbody><tr><td>document </td> <td>Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document.<br> element </td> </tr><tr><td>element </td> <td>обозначает элемент или узел типа element, возвращаемый членом DOM API. Вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку на node, мы просто скажем, что этот элемент возвращает element, который просто был создан в DOM. Объекты element реализуют DOM element интерфейс и также более общий Node интерфейс. Оба интерфейса включены в эту справку.<br> nodeList </td> </tr><tr><td>NodeList </td> <td> <p>массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами:</p> <ul><li>list.item(1)</li> </ul><p>Эти способы эквивалентны. В первом способе item() - единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке.</p> </td> </tr><tr><td>attribute </td> <td>Когда attribute возвращается членом API (например, метод createAttribute()) - это будет ссылка на объект, который предоставляет специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты - это узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком виде. </td> </tr><tr><td>namedNodeMap </td> <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap </td> </tr></tbody></table><h2>DOM-интерфейсы (DOM interfaces)</h2> <p>Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий HTML form элемент, берет своё свойство <b>name </b> из интерфейса HTMLFormElement, а свойство <b>className - </b> из интерфейса HTMLElement. В обоих случаях свойство, которое вы хотите, находится в этом объекте формы.</p> <p>Кроме того, отношение между объектами и интерфейсами, которые они реализуют в DOM может быть удивительным и этот раздел пытается рассказать немного о существующих интерфейсах в DOM и о том, как они могут быть доступны.</p> <h3>Интерфейсы и объекты (Interfaces and objects)</h3> <p>Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный , который включает такие методы как createCaption и insertRow . Но так как это таблица - это ещё и HTML-элемент, table реализует интерфейс Element , описанный в разделе . Наконец, так как HTML-элемент (в смысле DOM) - это узел (node) в дереве, которое составляет <a href="https://bar812.ru/pl/osnovy-raboty-s-dom-v-javascript-rabota-s-dom-modelyu-obektnaya-model-dom.html">объектную модель</a> для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс Node , из которого происходит Element .</p> <p>Var table = document.getElementById("table"); var tableAttrs = table.attributes; // Node/Element interface for (var i = 0; i < tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border"; </p><h3>Основные интерфейсы в DOM (Core interfaces in the DOM)</h3> <p>Этот раздел перечисляет несколько самых распространенных интерфейсов в DOM. Идея не в том чтобы описать, что делают эти <a href="https://bar812.ru/pl/metod-api-chto-chto-takoe-api-api-kak-sposob-obsluzhivaniya-klientov.html">методы API</a>, но в том чтобы дать вам несколько мыслей насчет видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространенные части API использованы в большинстве примеров раздела в конце этой справки.</p> <p>Document, window - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект window представляет что-то вроде браузера, а объект document - корень самого документа. Element наследуется от общего интерфейса Node , и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом table в предыдущем случае.</p> <p>Ниже представлен краткий список распространненых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p> <ul><li>parentNode.appendChild (node)</li> </ul><h2>Тестирование DOM API</h2> <p>Этот документ содержит примеры для каждого интерфейса, который вы можете использовать в своей разработке. В некоторых случаях примеры - полноценные веб-страницы с доступом к DOM в элементе <script>, также перечислены элементы, необходимые чтобы запустить скрипт в форме, и HTML-элементы, над которыми будут производиться операции DOM. Когда встречается такой случай, можно просто копировать и вставить пример в новый HTML-документ, сохранить и запустить его в браузере.</p> <p>Есть случаи, однако, где примеры более лаконичные. Чтобы запустить примеры, которые лишь демонстрируют основы взаимодействия интерфейсов с HTML-элементами, вы можете подготовить тестовую страницу, в которую будете помещать функции внутрь скриптов. Следующая очень простая веб-страница содержит элемент <script> в заголовке, в который вы можете поместить функции, чтобы протестировать интерфейс. Страница содержит несколько элементов с атрибутами, которые можно возвращать, устанавливать или, другими словами, манипулировать и содержит <a href="https://bar812.ru/pl/metody-i-sredstva-razrabotki-polzovatelskogo-interfeisa.html">пользовательский интерфейс</a>, необходимый, чтобы вызывать <a href="https://bar812.ru/pl/zachem-nuzhny-funkcii-v-programmirovanii-funkcii-v-yazyke.html">нужные функции</a> из браузера.</p> <p>Вы можете использовать эту тестовую страницу или похожую для проверки интерфейсов DOM, которые вас интересуют и просмотра того, как они работают в браузерах. Вы можете обновить содержмое функции test() при необходимости, создать <a href="https://bar812.ru/pl/telefon-s-bolshimi-knopkami-i-knopkoi-sos-mobilnye-telefony-dlya-pozhilyh.html">больше кнопок</a> или добавить элементы при необходимости.</p> <span>< html </span>> </span> <span>< head </span>> </span> <span>< title </span>> </span> DOM Tests<span></ title </span>> </span> <span>< script </span> type <span>= " application/javascript" </span>> </span> <span>function setBodyAttr (attr, value) { if (document. body) eval ("document.body." + attr+ "="" + value+ """ ) ; else notSupported () ; } </span><span></ script </span>> </span> <span></ head </span>> </span> <span>< body </span>> </span> <span>< div </span><span>style </span>=" <span>margin : .5 in; height : 400 ; </span>" </span>> </span> <span>< p </span>> </span><span>< b </span>> </span><span>< tt </span>> </span> text<span></ tt </span>> </span><span></ b </span>> </span><span></ p </span>> </span> <span>< form </span>> </span> <span>< select </span> onChange <span>= " setBodyAttr(" text" , this.options.value);" </span>> </span> <span>< option </span> value <span>= " black" </span>> </span> black <span>< option </span> value <span>= " darkblue" </span>> </span> darkblue <span></ select </span>> </span> <span>< p </span>> </span><span>< b </span>> </span><span>< tt </span>> </span> bgColor<span></ tt </span>> </span><span></ b </span>> </span><span></ p </span>> </span> <span>< select </span> onChange <span>= " setBodyAttr(" bgColor" , this.options.value);" </span>> </span> <span>< option </span> value <span>= " white" </span>> </span> white <span>< option </span> value <span>= " lightgrey" </span>> </span> gray <span></ select </span>> </span> <span>< p </span>> </span><span>< b </span>> </span><span>< tt </span>> </span> link<span></ tt </span>> </span><span></ b </span>> </span><span></ p </span>> </span> <span>< select </span> onChange <span>= " setBodyAttr(" link" , this.options.value);" </span>> </span> <span>< option </span> value <span>= " blue" </span>> </span> blue <span>< option </span> value <span>= " green" </span>> </span> green <span></ select </span>> </span> <span>< small </span>> </span> <span>< a </span> href <span>= " http://www.brownhen.com/dom_api_top.html" </span> id <span>= " sample" </span>> </span> (sample link)<span></ a </span>> </span><span></ small </span>> </span><span>< br </span>> </span> <span></ form </span>> </span> <span>< form </span>> </span> <span>< input </span> type <span>= " button" </span> value <span>= " version" </span> onclick <span>= " ver()" </span> /> </span> <span></ form </span>> </span> <span></ div </span>> </span> <span></ body </span>> </span> <span></ html </span>> </span> <p>Чтобы протестировать много интерфейсов на одной странице, набор свойств, которые изменяют цвета веб-страницы, можно создать похожую веб-страницу с целой "консолью" кнопок, текстовых полей и других элементов. Следующий скриншот даёт идею, как интерфейсы могут быть сгруппированы вместе для тестирования</p> <p>В этом примере выпадающее меню динамически обновляет доступные из DOM части веб-страницы (например, фоновый цвет, цвет ссылок и цвет текста). Однако при разработке тестовых страниц, тестирование интерфейсов, как вы об этом прочитали, важная часть изучения эффективной работы с DOM.</p> <p>Модель DOM часто называют деревом DOM, поскольку она состоит из дерева объектов, называемых узлами. В вы узнали, что такое Document Object Model (DOM), как получить доступ к объекту document и изменить его свойства с помощью консоли, также мы разницу между исходным кодом HTML и DOM.</p> <p>В этом мануале вы найдете терминологию HTML, которая необходима для работы с JavaScript и DOM, узнаете, что такое дерево и <a href="https://bar812.ru/pl/sozdanie-dom-uzlov-s-pomoshchyu-js-udalit---kak-vstavit-element-posle-drugogo.html">узлы DOM</a>, и научитесь определять наиболее распространенные типы узлов. Также вы сможете создать программу JavaScript в консоли для интерактивного изменения DOM.</p> <h2>Терминология HTML</h2> <p>Понимание <a href="https://bar812.ru/pl/dlya-sozdaniya-zagolovka-veb-stranicy-ispolzuetsya-teg-kak.html">терминов HTML</a> и JavaScript критически необходимо для работы с DOM. Давайте вкратце рассмотрим основные термины.</p> <p>Посмотрите на этот элемент HTML:</p> <p>Home</p> <p>В нем присутствует анкор, который является ссылкой на index.html.</p> <ul><li>a – тег</li> <li>href – атрибут</li> <li>html – значение атрибута</li> <li>Home – текст.</li> </ul><p>Все, что находится между открывающимся и закрывающимся тегами, составляет HTML-элемент.</p> <p>Вернемся к файлу index.html из предыдущего мануала:</p> <p><!DOCTYPE html><br> <html lang="en"><br> <head><br> <title>Learning the DOM


Document Object Model



Самый простой способ доступа к элементу с JavaScript – это атрибут id. Давайте добавим указанную выше ссылку в файл index.html с id=»nav».

...

Document Object Model


Home

...

Загрузите (или обновите) страницу в окне браузера и посмотрите на DOM, чтобы убедиться, что код был обновлен.

Затем используйте метод getElementById() для доступа ко всему элементу. В консоли введите следующее:

document.getElementById("nav");
Home

Метод getElementById() извлечет весь элемент. Теперь вместо того, чтобы вводить этот объект и метод каждый раз, когда вам нужно получить доступ к ссылке nav, вы можете поместить элемент в переменную, чтобы с ним было проще работать.

let navLink = document.getElementById("nav");

Переменная navLink содержит анкор. Здесь можно легко изменять атрибуты и значения. Например, чтобы изменить место ссылки, измените атрибут href:

navLink.href = "https://www.wikipedia.org";

Также можно изменить текст, переназначив свойство textContent:

navLink.textContent = "Navigate to Wikipedia";

Теперь, просмотрев этот элемент в консоли или проверив тег Elements, вы увидите, как он обновился.

navLink;
Navigate to Wikipedia

Изменения отобразятся и на фронт-энде.

Обновление страницы вернет все исходные значения.

На этом этапе вы должны понимать, как использовать метод document для доступа к элементу, как присвоить элемент переменной и как изменить свойства и значения в элементе.

Дерево и узлы DOM

Все элементы в DOM определяются как узлы. Существует множество типов узлов, но есть три основных, с которыми вы будете работать чаще всего:

  1. Узел элемента
  2. Текстовый узел
  3. Узел комментария

Когда элемент HTML является элементом в DOM, он называется узлом элемента. Любой одиночный текст вне элемента является текстовым узлом, а комментарий HTML – узлом комментария. Помимо этих трех типов узлов, сам объект document – это узел документа, который является корневым узлом всех остальных узлов.

DOM состоит из древовидной структуры вложенных узлов, которая часто называется деревом DOM. Вы наверняка знаете, что собой представляет генеалогическое дерево – это схематичное представление родственных связей, которое состоит из родителей, детей и ближайших родственников. Узлы в DOM также называются родительскими и дочерними в зависимости от их отношения к другим узлам.

Для примера создайте файл nodes.html. добавьте в него текстовый узел, а также узлы комментария и элемента.




Learning About Nodes


An element node



A text node.

Узел элемента html является родительским. head и body – дочерние узлы html. body содержит три дочерних узла, и все они находятся на одном уровне – тип узла не влияет на уровень вложения.

Примечание : При работе с DOM, сгенерированным HTML, отступы исходного кода HTML создают много пустых текстовых узлов, которые не будут видны во вкладке DevTools Elements. Больше об этом по ссылке .

Определение типа узла

Каждый узел в документе имеет тип, доступ к которому осуществляется через свойство nodeType. В Mozilla Developer Network имеется обновленный список всех констант типов узлов. Ниже приведена таблица наиболее распространенных типов узлов.

Во вкладке Elements в Developer Tools вы можете заметить, что всякий раз, когда вы нажимаете и выделяете любую строку в DOM, рядом с ней появляется значение == $0. Это очень удобный способ получить доступ к текущему активному элементу.

В консоли node.html нажмите на первый элемент в body (h1).

С помощью консоли узнайте тип выбранного узла с помощью свойства nodeType.

$0.nodeType;
1

Выбрав элемент h1, вы увидите 1 как вывод, который относится к ELEMENT_NODE. Сделайте то же самое с другими узлами, и они вернут 3 и 8 соответственно.

Зная, как получить доступ к элементу, вы можете увидеть тип узла, не выделяя элементы в DOM.

document.body.nodeType;
1

В дополнение к nodeType вы также можете использовать свойство nodeValue, чтобы узнать значение текстового узла или узла комментария, а nodeName – для получения тега элемента.

Изменение DOM с помощью событий

До сих пор вы видели, как изменять DOM в консоли, а такие изменения, как известно, временные; каждый раз, когда страница обновляется, все изменения теряются. В вы обновляли цвет фона страницы в консоли. Попробуйте объединить то, чему вы научились в этом мануале, с тем, что вы уже знаете, чтобы создать интерактивную кнопку, которая будет менять цвет фона.

Вернитесь в файл index.html и добавьте элемент button с id. Также нужно добавить ссылку на новый файл в новый js-каталог js/scripts.js.




Learning the DOM


Document Object Model





Zdarzenie w JavaScript to czynność wykonywana przez użytkownika. Użytkownik najeżdża kursorem na element, klika na niego lub naciska określony klawisz na klawiaturze – to wszystko są zdarzenia. W tym konkretnym przypadku przycisk musi wykonać akcję, gdy użytkownik go kliknie. Aby to zrobić, musisz dodać detektor zdarzeń. Utwórz plik scripts.js i zapisz go w nowym katalogu js. Musisz zdefiniować element przycisku w pliku i przypisać go do zmiennej.

Korzystając z metody addEventListener(), przycisk będzie nasłuchiwał kliknięć i wykonywał swoją funkcję po kliknięciu.

...
button.addEventListener("kliknij", () => (
// akcja trafi tutaj
});

Wewnątrz funkcji należy umieścić kod z poprzedniej instrukcji, aby zmienić kolor tła na fuksja.

...

Tak wygląda skrypt:

let button = document.getElementById("changeBackground");
button.addEventListener("kliknij", () => (
document.body.style.backgroundColor = "fuksja";
});

Zapisz i zamknij plik. Odśwież stronę index.html w przeglądarce. Kliknij nowy przycisk, a zmieni się kolor tła strony.

Tagi: ,