Ta lekcja dotyczy odczytywania i zmieniania atrybutów elementów w jQuery.

Atrybuty to para nazwa/wartość przypisana do elementów w znaczniku. Przykłady atrybutów ( href, tytuł, src, klasa):

• atr() do czytania, dodawania i zmiany atrybutów
• usuńAttr() usunąć atrybuty

Ta lekcja dotyczy metod attr() i removeAttr().

Do pracy z klasami CSS są specjalne jQuery metody, które są opisane w innej lekcji . Pracując nad projektem w jQuery, często trzeba manipulować klasami CSS i atrybut klasy może zawierać kilka nazw klas, co znacznie utrudnia pracę z innymi atrybutami.

Jeśli zamierzasz pracować z wartościami pól wejściowych, lepiej skorzystać z metody val(), która nie tylko udostępnia uproszczoną wersję atrybutu value, ale także może odczytywać i ustawiać wartości w wybranych elementach wybierz listę.

Odczytywanie wartości atrybutu

Odczytanie wartości atrybutu elementu jest proste. Wszystko, co musisz zrobić, to wywołać metodę attr() na obiekcie jQuery, który zawiera element, przekazując mu nazwę atrybutu do odczytu. Metoda zwraca wartość atrybutu:

// Wyświetl wartość atrybutu "href" alertu elementu #myLink ($("a#myLink").attr("href"));

Jeśli Twój obiekt jQuery zawiera wiele elementów, metoda attr() odczytuje tylko wartości atrybutów dla pierwszego elementu w zestawie.

Ustawianie wartości atrybutów

Metodę attr() można również wykorzystać do dodawania lub zmiany wartości atrybutów:

• Jeśli atrybut nie istnieje w żywiole, będzie dodany i zostanie mu przypisana podana wartość.
• Jeśli atrybut już istnieje, jego wartość będzie zaktualizowany ustalić wartość.

Istnieją trzy sposoby użycia metody attr() w celu dodania lub zmiany atrybutów:

1. Możesz dodać/zmienić atrybuty dla dowolnego elementu (lub zestawu elementów).
2. Możesz dodać/zmienić wiele atrybutów jednocześnie dla elementu (lub elementów), określając mapę nazw i wartości atrybutów.
3. możliwe jest dynamiczne dodawanie/zmiana pojedynczego atrybutu dla wielu elementów za pomocą funkcji zwrotnej.

Ustaw jeden atrybut

Aby ustawić lub zmienić atrybut elementu, wywołaj metodę attr() z nazwą i wartością atrybutu. Na przykład:

// Zmień wartość atrybutu „href” elementu #myLink na „http://www.example.com/” // (jeśli atrybut „href” nie istnieje, zostanie utworzony automatycznie) $( "a#myLink"). attr("href", "http://www.example.com/");

Możliwe jest również ustawienie tego samego atrybutu na wielu elementach:

Ustawianie wielu atrybutów za pomocą mapy

Korzystając z mapy, możesz ustawić wiele atrybutów jednocześnie dla jednego lub większej liczby elementów. Jest to lista par nazwa/wartość, która wygląda tak:

( nazwa1: wartość1, nazwa2: wartość2, ... )

Poniższy przykład ustawia jednocześnie dwa atrybuty elementu img:

// Ustaw atrybuty "src" i "alt" dla elementu img #myPhoto $("img#myPhoto").attr(("src": "mypic.jpg", "alt": "My Photo" )) ;

Możesz także ustawić atrybuty dla wielu elementów:

// Ustaw atrybuty "src" i "alt" dla wszystkich elementów img $("img").attr(("src": "mypic.jpg", "alt": "Moje zdjęcie" ));

Ustawianie atrybutów za pomocą funkcji zwrotnej

Zamiast przekazywać wartości atrybutów do metody attr(), możesz przekazać nazwę funkcji zwrotnej. W ten sposób możesz dynamicznie ustawiać wartości atrybutów dla wielu elementów zgodnie z pozycją elementu, istniejącą wartością atrybutu lub innymi właściwościami.

Funkcja return musi przyjmować dwa argumenty:

• Indeks pozycji aktualnie wybranego elementu w zestawie (od zera)
• stara wartość atrybutu dla aktualnie wybranego elementu

Wartość zwracana przez funkcję służy do zastąpienia wartości atrybutu.

Oprócz bieżącej pozycji elementu i starej wartości atrybutu, Twoja funkcja może uzyskać dostęp do samego elementu za pomocą słowa kluczowego this. W ten sposób możesz uzyskać dostęp do dowolnej właściwości lub metody elementu z funkcji zwrotnej.

W przykładzie użyto wywołania zwrotnego, aby dodać atrybut alt do każdego obrazu na stronie na podstawie pozycji obrazu i jego atrybutu src:

Po wykonaniu kodu, pierwszy obrazek będzie miał atrybut alt o wartości "Obraz 1: myphoto.jpg" , a drugi obrazek będzie miał atrybut alt o wartości "Obraz 2: twojezdjęcie.jpg" .

Usuwanie atrybutu

Aby usunąć atrybut z elementu, wywołaj metodę removeAttr(), przekazując jej nazwę atrybutu do usunięcia. Na przykład:

// Usuń atrybut „title” z elementu #myLink $("a#myLink").removeAttr("title");

Możesz również wywołać metodę removeAttr() na obiekcie jQuery, który zawiera wiele elementów. Metoda removeAttr() usunie dany atrybut ze wszystkich elementów:

// Usuń atrybut "title" ze wszystkich linków $("a").removeAttr("title");

Streszczenie

W tym tutorialu omówiliśmy zagadnienia pracy z atrybutami elementów w jQuery:

• Odczytywanie wartości atrybutów
• Ustawienie jednego atrybutu
• Ustawianie wielu różnych atrybutów w tym samym czasie
• Wykorzystanie funkcji zwrotnej do dynamicznego ustawiania wartości atrybutów w zestawie elementów
• Usuwanie atrybutów z elementu

Lekcja obejmie początek tematu: obiektowy model dokumentu (javaScript DOM) jest podstawą dynamicznego HTML, poznamy metody dostępu do obiektów i rozważymy sposoby obsługi zdarzeń javascript

• Ogólnie obiekt to złożony typ danych, który łączy wiele wartości we wspólny moduł i pozwala na zapisywanie i pobieranie wartości na żądanie po ich nazwach.

Wcześniej zaczęliśmy już zapoznawać się z koncepcją w javascript.

• W javascript jest coś takiego jak DOM - Obiektowy model dokumentu- model obiektowy strony internetowej (strona html).
• Jego obiektami są znaczniki dokumentu lub, jak mówią, węzły dokumentu.

Spójrzmy na schemat hierarchia obiektów w JavaScript oraz gdzie w hierarchii znajduje się dany obiekt dokumentu.

Element script posiada atrybuty:

odroczyć (poczekaj na pełne załadowanie strony).

Przykład:

Właściwości i atrybuty obiektu dokumentu w javaScript

Obiekt dokumentu reprezentuje stronę internetową.

Ważny: Aby uzyskać dostęp do właściwości i metod obiektu w JavaScript, tak jak w przypadku innych obiektów, używana jest notacja kropkowa:

tych. najpierw zapisywany jest sam obiekt, następnie jego właściwość, atrybut lub metoda jest wskazywana kropką i bez spacji

object.property object.attribute object.method()

Rozważ przykład:

Przykład: niech dokument html będzie miał znacznik

i specyficzne dla niego styl css(nawet dwa style, drugi przydaje się do zadania):

Niezbędny:

1. ustaw nową właściwość obiektu, przypisz mu wartość i wyślij tę wartość;
2. wyświetlić wartość atrybutu obiektu;
3. zmienić wartość atrybutu obiektu.

Zróbmy zadanie w kolejności:
✍ Rozwiązanie:

Ponieważ to język javascript, obiekt można wymyślić i ustawić dowolną właściwość o dowolnej wartości. Ale najpierw zdobądźmy dostęp do obiektu (dostęp do obiektu zostanie szczegółowo omówiony w dalszej części tej lekcji):

// uzyskaj dostęp do obiektu przez jego id var element = document.getElementById("MyElem"); element.mojaWłaściwość = 5; // przypisz właściwość alert(element.myProperty); // wyświetl w oknie dialogowym

Kolejne zadanie dotyczy atrybutu obiektu. Atrybut obiektu są atrybutami tagów. Tych. w naszym przypadku są dwa: atrybut class o wartości small oraz atrybut id. Będziemy pracować z atrybutem class.

Teraz dodajmy trochę kodu JavaScript, aby wyświetlić wartość atrybutu naszego obiektu. Kod musi być po główne tagi:

// uzyskaj dostęp do obiektu przez jego id var element = document.getElementById("MyElem"); alert(element.getAttribute("klasa")); // wyświetl w oknie dialogowym

I ostatnie zadanie: zmień wartość atrybutu. Do tego przygotowaliśmy styl duża. Zmień wartość atrybutu klasy na ten styl:

// uzyskaj dostęp do obiektu przez jego id var element = document.getElementById("MyElem"); element.setAttribute("klasa","duży");

W efekcie nasz element powiększy się i zmieni kolor na niebieski (klasa duża).

Przyjrzyjmy się teraz bliżej metodom użytym w przykładzie do pracy z atrybutami.

Metody manipulowania atrybutami w JavaScript

Atrybuty można dodawać, usuwać i modyfikować. Są na to specjalne metody:

• Dodanie atrybutu (ustawienie dla niego nowej wartości):

pobierzAtrybut(atrybut)

• Sprawdzanie obecności tego atrybutu:

usuńAtrybut(atrybut)

Różne sposoby pracy z atrybutami

Przykład: Wydrukuj wartość atrybutu wartości bloku tekstowego.

✍ Rozwiązanie:

• Niech będzie blok tekstowy:

varelem = document.getElementById("MyElem"); zmienna x = "wartość";

• Rozważ kilka sposobów uzyskania wartości atrybutu (dla wyjścia użyj metoda ostrzegania()):

element.getAttribute("wartość" )

element.getAttribute("wartość")

2. notacja kropkowa:

elem.atrybuty .wartość

elem.atrybuty.wartość

3. notacja nawiasowa:


Ustaw wartości atrybutów Możesz to również zrobić na kilka sposobów:

var x = "klucz"; // key - nazwa atrybutu, val - wartość atrybutu // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" key "] = "wartość" // 4. elem.setAttribute(x, "wartość")

właściwości elementu ciała

Poprzez obiekt dokumentu można uzyskać dostęp do treści dokumentu — tagu body — z niektórymi jego przydatnymi właściwościami.

Na przykład tag body ma dwie właściwości: szerokość i wysokość okna klienta:

document.body.clientHeight - wysokość okna klienta
document.body.clientWidth - szerokość okna klienta


Ale najważniejszą rzeczą, jak już się dowiedzieliśmy, jest to, że poprzez obiekt dokumentu, za pomocą specjalnych metod, uzyskuje się dostęp do wszystkich elementów strony, czyli tagów.

Ważny: Przy dostępie do tagów strony w ten sposób, skrypt musi znajdować się na końcu drzewa elementów, przed treścią zamykającą ! Ponieważ do czasu wykonania skryptu wszystkie elementy powinny być już „narysowane” przez przeglądarkę na ekranie

Praca js8_1. Wydrukuj komunikat o rozmiarze okna przeglądarki: na przykład "wymiary okna przeglądarki 600 x 400"

Dostęp do elementów dokumentu w javaScript

Istnieje kilka opcji dostępu do obiektów lub wyszukiwania obiektów:

1. Szukaj według identyfikatora(lub metoda getElementById), zwraca określony element
2. Szukaj według nazwy tagu(lub metoda getElementsByTagName), zwraca tablicę elementów
3. Szukaj według atrybutu nazwy(lub metoda getElementsByName), zwraca tablicę elementów
4. Poprzez elementy rodzicielskie(uzyskanie wszystkich potomków)

Rozważmy każdą z opcji bardziej szczegółowo.

1. Dostęp do elementu poprzez jego atrybut id

Składnia: document.getElementById(id)

Metoda getElementById() zwraca sam element, który może być następnie użyty do uzyskania dostępu do danych

Przykład: Strona posiada pole tekstowe z atrybutem id="cake" :

...

Niezbędny



✍ Rozwiązanie:

alert(document.getElementById("ciasto").value); // zwraca "liczbę ciastek"

Możesz zrobić to samo, implementując wywołanie obiektu przez zmienną:

var a=document.getElementById("ciasto"); alert(a.wartość); // wypisz wartość atrybutu wartości, tj. tekst „liczba ciast”

Ważny: Skrypt należy umieścić po tagu!

Dostęp do tablicy elementów poprzez nazwę znacznika i poprzez indeks tablicy

Składnia:
document.getElementsByTagName(nazwa);

Przykład: Strona posiada pole tekstowe (znacznik wejściowy) z atrybutem wartości:

...

Niezbędny: wypisz wartość atrybutu wartości

Metoda getElementsByTagName organizuje dostęp do wszystkich elementów wejściowych poprzez zmienną (tj. do tablicy elementów input), nawet jeśli ten element jest jedynym na stronie. Aby odwołać się do konkretnego elementu, na przykład do pierwszego, podajemy jego indeks (tablica zaczyna się od indeksu zerowego).

✍ Rozwiązanie:

Odwołując się do określonego elementu za pomocą indeksu:

var a =document.getElementsByTagName("wejście"); alert(a.wartość); // zwraca "liczbę ciastek"

Dostęp do tablicy elementów według wartości atrybutu name

Składnia:
document.getElementsByName(nazwa);

Zwraca metoda getElementsByName("...") tablica obiektów, którego atrybut name jest równy wartości określonej jako parametr metody. Jeśli na stronie znajduje się tylko jeden taki element, to metoda nadal zwraca tablicę (z tylko jednym elementem).

Przykład: Załóżmy, że w dokumencie znajduje się element:

var element = document.getElementsByName("MyElem"); alert(element.wartość);

W ten przykład jest tylko jeden element, ale odwołanie dotyczy zerowego elementu tablicy.

Ważny: Metoda działa tylko z tymi elementami, dla których atrybut name jest wyraźnie podany w specyfikacji: są to tagi form , input , a , select , textarea i wiele innych rzadszych tagów.

Metoda document.getElementsByName nie będzie działać na innych elementach, takich jak div , p , itp.

Dostęp do dzieci elementu rodzicielskiego

Dostęp do dzieci w javascript dzieje się za pośrednictwem właściwości childNodes. Właściwość należy do obiektu nadrzędnego.

document.getElementById (rodzic) .childNodes ;

document.getElementById(rodzic).childNodes;

Rozważmy przykład, w którym tagi obrazu są zapakowane w kontener, tag div. Tak więc tag div jest rodzicem tych obrazów, a same tagi img są odpowiednio dziećmi tagu div:

<div id = "div_for_img" > <img src="pic1.jpg" /> <img src="pic2.jpg" /> <img src="pic3.jpg" /> <img src="pic4.jpg" /> </div>

Teraz przejdźmy do okno modalne wartości elementów tablicy z potomkami, tj. tagi img:

var myDiv=document.getElementById("div_for_img"); // dostęp do kontenera nadrzędnego var childMas=myDiv.childNodes; // tablica dzieci dla (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Zauważ, że wygodnie jest używać pętli do iteracji po elementach tablicy dzieci. Tych. w naszym przykładzie otrzymujemy cykl:

... for (var a in childMas) ( alert(childMas[ a] .src ) ; )

For (var a in childMas)( alert(childMas[a].src); )

Inne sposoby uzyskiwania dostępu do elementów

Rozważ inne sposoby Na przykład:

<ciało> <formname="f"> <input type="tekst" id="t"> <typ wejścia = „przycisk” id = „b” wartość = „(!LANG:przycisk" > !} <wybierz id="s" name="ss"> <id opcji = "o1" > 1</opcja> <id opcji = "o2" > 3</opcja> <id opcji = "o3" > 4</opcja> </wybierz> </formularz>

1 3 4

Dostęp:

... // niechciane i przestarzałe metody dostępu do elementów: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // tekst alert(document.forms [ 0 ] .elements [ 2 ] .options [1] .id ) ; // alert o2(document.f .b .type ) ; // przycisk alert(document.f .s .name ) ; // ss alert(document.f .s .opcje [1] .id ); // o2 // preferowane akcesory do elementów alert(document.getElementById("t" ) .type ) ; // tekst alert(document.getElementById("s" ) .name ) ; // ss alert(document.getElementById ("s" ) .options [1] .id ) ; // 02 alert(document.getElementById("o3" ) .text ) ; // cztery ...

... // niechciane i przestarzałe metody dostępu do elementów: alert(document.forms.name); // f alert(document.forms.elements.type); // alert tekstowy(document.forms.elements.options.id); // alert o2(typ.dokumentu.f.b.); // przycisk alert(nazwa.f.s.dokumentu); // ss alert(document.f.s.options.id); // o2 // preferowane metody dostępu do elementów alert(document.getElementById("t").type); // tekst alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // cztery ...

Przykład: Utwórz przycisk i pole tekstowe w dokumencie html. Używając skryptu, pokoloruj tło przycisku (właściwość style.backgroundColor przycisku) i wyświetl napis "Cześć!" w polu tekstowym (atrybut wartości).

Kod HTML:

document.getElementById("t1").value = "(!LANG:Witaj!"; document.getElementById("b1").style.backgroundColor = "red";!}

Opcja 2:

document.getElementById ("t1" ) .setAttribute ("wartość" , ​​"Cześć!") ; document.getElementById("b1" ) .style .backgroundColor = "czerwony" ;

document.getElementById("t1").setAttribute("wartość","Hello!"); document.getElementById("b1").style.backgroundColor = "czerwony";

Zadanie Js8_2. Utwórz znaczniki pól tekstowych zgodnie z obrazem na rysunku. Podaj im odpowiednie (pokazane na rysunku) wartości atrybutów id. Za pomocą skryptu dodaj wartość " 0 " do wszystkich pól liczbowych (zakładając wartości liczbowe)

Sprawdzenie poprawności wpisanych danych do formularza

Czy pole jest puste?

Nie można ufać danym dostarczonym przez użytkownika. Nierozsądne jest zakładanie, że użytkownicy będą je sprawdzać podczas wprowadzania danych. Musisz więc użyć do tego javascript.

W celu sprawdzenia czy pole tekstowe jest puste?(np. po wypełnieniu przez użytkownika danych kwestionariusza) należy odwołać się do właściwości value. Jeśli wartość właściwości jest pustym ciągiem (""), musisz w jakiś sposób powiadomić o tym użytkownika.

if(document.getElementById("nazwa").value=="") ( jakaś akcja, np. wyświetlenie komunikatu z wymogiem wypełnienia pola );

Ponadto możesz obejść się bez skryptu. Etykietka Wprowadzanie tekstu pola mają atrybut wzorca. jak jego wartość jest wskazana Wyrażenie regularne aby sprawdzić poprawność danych w podanym polu tekstowym formularza. Jeśli atrybut jest obecny wzorzec, formularz nie zostanie wysłany, dopóki to pole tekstowe nie zostanie poprawnie wypełnione.
Na przykład, aby sprawdzić, czy pole jest puste:

Tekst zamiast wartości liczbowej: funkcja isNaN

Jeśli pole jest wprowadzanie wartości liczbowej, a zamiast tego użytkownik wprowadza tekst, konieczne jest użycie funkcji isNaN (z angielskiego. "Czy to nie liczba?"), który sprawdza typ danych wejściowych i zwraca prawdę, jeśli dane wejściowe są tekstowe, a nie liczbowe.

To. jeśli zwrócona zostanie wartość true, to użytkownik powinien zostać poproszony o podanie poprawnego formatu, tj. numer.

if(isNaN(document.getElementById("minuty").value))( Alert z prośbą o wprowadzenie danych liczbowych );

Dana strona z elementami do wypełnienia:


Fragment Kod HTML:

1 2 3 4 5 6 7 8 9 10 11 12

<formularz > Nazwa:<input type="tekst" id="nazwa"> Liczba pączków:<input type="tekst" id="pączki" > Minuty:<input type="tekst" id="minuty"> Suma częściowa:<input type="tekst" id="subitog" > Podatek:<input type="tekst" id="podatek"> Wynik:<input type="tekst" id="total"> <typ wejścia = "prześlij" wartość = "(!LANG:prześlij" onclick = "placeOrder();" > !} </formularz> <script type="tekst/javascript"> ... </skrypt>

Nazwa:
Liczba pączków:
Minuty:
Suma częściowa:
Podatek:
Wynik:

Niezbędny:
Wypełnij puste pola w poniższym fragmencie kodu, który sprawdza, czy dwa pola tekstowe są wypełnione poprawnie: Nazwa(id="nazwa") i minuty(id="minuty"). Użyj czeku do pozostawienia pola pustego ("") i prawidłowego formatu do wypełnienia pola numerycznego (isNaN).

* Wykonaj pracę również z atrybutem wzorca pól tekstowych za pomocą .

Fragment skryptu:

Używany w kodzie do budowania trudne warunki minęło wcześniej.

Nową koncepcją dla Ciebie jest wywołanie funkcji jako obsługi zdarzeń przycisku:
onclick="złóżZamówienie();"
Po kliknięciu przycisku zostanie wywołana funkcja placeOrder().

W tym artykule zapoznamy się z właściwościami i atrybutami DOM, zastanowimy się, czym się różnią i jak prawidłowo z nimi pracować. Zobaczmy, jakie metody ma JavaScript do wykonywania operacji na atrybutach.

Czym różni się atrybut od właściwości DOM?

Atrybuty to encje HTML, za pomocą których możemy dodać określone dane do elementów w kodzie HTML.

Gdy przeglądarka żąda strony, otrzymuje jej źródłowy kod HTML. Następnie analizuje ten kod i buduje na jego podstawie DOM. Podczas tego procesu Atrybuty elementów HTML są tłumaczone na ich odpowiednie właściwości DOM.

Na przykład przeglądarka, czytając następujący wiersz kodu HTML, utworzy dla tego elementu następujące właściwości DOM: id , className , src i alt .

Te właściwości są dostępne w kodzie JavaScript jako właściwości obiektu. Obiekt tutaj jest węzłem DOM (elementem).

Przykład, w którym otrzymujemy wartości właściwości DOM dla powyższego elementu i wypisujemy ich wartości do konsoli:

// pobierz element var brandImg = document.querySelector("#brand"); // wyświetl wartości właściwości DOM elementu console.log(brandImg.id); // "marka" console.log(brandImg.className); // "marka" console.log(brandImg.src); // "/logo.svg?2" console.log(brandImg.alt); // "logo witryny"

Niektóre nazwy właściwości DOM nie pasują do nazw atrybutów. Jednym z nich jest atrybut class. Ten atrybut odpowiada właściwości DOM className . Ta różnica wynika z faktu, że klasa jest słowo kluczowe w JavaScript jest zarezerwowany i nie może być używany. Z tego powodu twórcy standardu postanowili użyć innej nazwy do dopasowania, która została wybrana jako className .

Kolejny niuans związany jest z faktem, że tłumaczenie atrybutów HTML określonych w kod źródłowy dokumentu, właściwości DOM nie zawsze są implementowane jeden-do-jednego.

Jeśli element ma niestandardowy atrybut HTML, nie jest tworzona żadna odpowiadająca mu właściwość w DOM.

Kolejną różnicą jest to, że wartości niektórych atrybutów HTML i odpowiadających im właściwości DOM mogą być różne. Tych. atrybut może mieć jedną wartość, a stworzona z niego właściwość DOM może mieć inną wartość.

Jeden z takich atrybutów jest sprawdzany.

Wartość sprawdzonego atrybutu HTML w tym przypadku jest pustym ciągiem. Ale właściwość odpowiadająca temu atrybutowi w DOM zostanie ustawiona na true . Dlatego zgodnie z zasadami standardu, aby ustawić true, wystarczy wspomnieć o tym atrybucie w kodzie HTML i nie ma znaczenia jaką wartość będzie on miał.

W takim przypadku, nawet jeśli nie określimy atrybutu check w kodzie HTML dla elementu input z typem checkbox, to nadal zostanie dla niego utworzona właściwość check w DOM, ale będzie ona równa false .

Ponadto JavaScript umożliwia również pracę z atrybutami. W DOM API są do tego specjalne metody. Ale wskazane jest, aby używać ich tylko wtedy, gdy naprawdę musisz pracować z danymi w ten sposób.

W takim przypadku musisz wiedzieć, że gdy zmieniamy właściwość DOM elementu, zmienia się również odpowiadający mu atrybut i na odwrót. Ale ten proces w przeglądarkach nie zawsze jest wykonywany jeden do jednego.

Główne różnice między właściwościami i atrybutami DOM to:

• wartość atrybutu jest zawsze ciągiem, a wartością właściwości DOM jest określony typ danych (niekoniecznie ciąg);
• w nazwie atrybutu nie jest rozróżniana wielkość liter, a właściwości DOM rozróżniają wielkość liter. Tych. w kodzie HTML możemy np. wpisać id atrybutu HTML jako Id , ID , itp. To samo dotyczy nazwy atrybutu, którą podajemy w special Metody JavaScript pracować z nim. Ale możemy uzyskać dostęp do odpowiedniej właściwości DOM tylko przez id i nic więcej.

Praca z właściwościami DOM elementu

Jak wspomniano powyżej, praca z właściwościami elementów w JavaScript odbywa się tak samo, jak z właściwościami obiektów.

Aby jednak odwołać się do właściwości jakiegoś elementu, należy go najpierw uzyskać. Możesz uzyskać element DOM w JavaScript, na przykład za pomocą ogólnej metody querySelector , a kolekcję elementów DOM, na przykład za pomocą querySelectorAll .

Jako pierwszy przykład rozważ następujący element HTML:

Na jej podstawie przeanalizujemy, jak pozyskiwane są, zmieniane i dodawane nowe właściwości DOM.

Odczytywanie wartości właściwości DOM:

// pobierz wartość DOM właściwości id var alertId = alert.id; // "alert" // pobierz wartość właściwości DOM className var alertClass = alert.className; // "alert alert-info" // pobierz wartość DOM właściwości title var alertId = alert.title; // "Tekst podpowiedzi..."

Zmiana wartości właściwości DOM:

// aby zmienić wartość właściwości DOM, wystarczy przypisać do niej nową wartość alert.title = "(!LANG:Nowy tekst podpowiedzi"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Dodawanie właściwości DOM:

Alert.lang = "ru"; // ustaw właściwość lang na "ru" alert.dir = "ltr"; // ustaw właściwość dir na "ltr"

Przykład, w którym wyprowadzamy do konsoli wszystkie wartości klas, które mają elementy p na stronie:

Paragrafy Var = document.querySelectorAll("p"); for (var i = 0, length = akapity. length ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Przykład, w którym ustawiamy właściwość lang wszystkich elementów z klasą zawartości na „ru”:

Zawartość zmiennej = document.querySelectorAll(.content"); for (var i = 0, length = content.length; i< length; i++) { contents[i].lang = "ru"; }

Atrybuty elementów i metody pracy z nimi

Atrybuty są początkowo ustawiane w kodzie HTML. Chociaż są one w jakiś sposób związane z właściwościami, nie są tym samym. W większości przypadków powinieneś pracować z właściwościami i uzyskiwać dostęp do atrybutów tylko wtedy, gdy naprawdę tego potrzebujesz.

Wartości atrybutów, w przeciwieństwie do właściwości DOM, jak wspomniano powyżej, są zawsze łańcuchami.

JavaScript ma cztery metody wykonywania operacji związanych z atrybutami:

• .hasAttribute("nazwa_atrybutu") – sprawdza, czy element ma określony atrybut. Jeśli sprawdzany atrybut znajduje się na elemencie, to Ta metoda zwraca true , w przeciwnym razie false .
• .getAttribute("attribute_name") — pobiera wartość atrybutu. Jeśli element nie ma określonego atrybutu, ta metoda zwraca pusty ciąg ("") lub null .
• .setAttribute("nazwa_atrybutu", "wartość_atrybutu") – ustawia określony atrybut z określoną wartością na element. Jeśli element ma określony atrybut, ta metoda po prostu zmieni jego wartość.
• .removeAttribute("attribute_name") - usuwa określony atrybut z elementu.

Rozważ przykłady.

Wysoko ciekawy przykład z atrybutem value.

Przykład z atrybutem wartości

Pobierz wartość atrybutu value i właściwości DOM value:

// pobierz wartość atrybutu wartości elementu nazwa.getAttribute("wartość"); // "Bob" // pobierz wartość wartości właściwości DOM name.value; // "Bob" // zaktualizuj wartość atrybutu value, ustaw ją na nową wartość name.setAttribute("value", "Tom"); // "Tomek" // pobierz wartość DOM wartości właściwości name.value; // "Tomek"

Ten przykład pokazuje, że gdy zmienia się atrybut value, przeglądarka automatycznie zmienia odpowiednio właściwość value DOM.

Teraz zróbmy coś odwrotnego, a mianowicie zmień wartość właściwości DOM i sprawdź, czy zmienia się wartość atrybutu:

// ustaw nową wartość na wartość właściwości DOM name.value = "(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Ten przykład pokazuje, że zmiana właściwości DOM nie zawsze skutkuje odpowiednią zmianą w atrybucie. Tych. w tym przypadku zmiana wartości właściwości DOM nie zmienia odpowiadającego jej atrybutu.

To samo stanie się, gdy użytkownik wprowadzi tekst w tym polu. Właściwość DOM value będzie zawierała rzeczywistą wartość, a odpowiadający jej atrybut będzie zawierał wartość oryginalną lub tę, którą ustawiliśmy np. za pomocą metody setAttribute.

Ten przykład pokazuje, że lepiej jest zawsze pracować z właściwościami DOM, a dostęp do atrybutu jest potrzebny tylko wtedy, gdy jest to naprawdę konieczne.

Nawet w przypadku, gdy potrzebujesz pobrać wartość początkową, którą ustawiliśmy w kodzie HTML, możesz użyć właściwości. Właściwość zawierająca początkową wartość atrybutu value nosi nazwę defaultValue .

Nazwa.DomyślnaWartość; // Tomek

Kolejny bardzo interesujący przykład, ale teraz z atrybutem href.

Przykład z href

Przykład, w którym musimy uzyskać wartość linku tak, jak została ustawiona w kodzie HTML.

W tym przykładzie atrybut href i właściwość href DOM zawierają różne znaczenia. Atrybut href jest tym, co ustawiamy w kodzie, a właściwość DOM to pełny adres URL. To rozróżnienie jest podyktowane standardem, zgodnie z którym przeglądarka musi rzutować wartość href na pełny adres URL.

Dlatego jeśli potrzebujemy uzyskać to, co jest w atrybucie, to w tym przypadku nie możemy obejść się bez metody getAttribute.

Na koniec spójrzmy na wybrany atrybut.

Wybrany przykład

Przykład pokazujący, jak uzyskać wartość wybranej opcji wyboru:

brak oceny 1 2 3 4 5

Przykład pokazujący jak uzyskać wybrane wartości opcji w wybranym elemencie:

brak oceny 1 2 3 4 5

Inny sposób pracy z atrybutami (właściwość atrybutów)

W JavaScript każdy element ma właściwość atrybutów, której można użyć do pobrania wszystkich jego atrybutów jako obiektu NamedNodeMap.

Ta metoda może być używany, gdy trzeba, na przykład iterować po wszystkich atrybutach elementu.

Dostęp do atrybutu w tej kolekcji uzyskuje się poprzez jego indeks lub przy użyciu metody item. Atrybuty w tej kolekcji są liczone od 0.

Na przykład wyświetlmy wszystkie atrybuty jakiegoś elementu w konsoli:

KOCHAM JAVASCRIPT

Oprócz, Możesz również pracować z tą kolekcją, korzystając z następujących metod:

• .getNamedItem("nazwa_atrybutu") – pobiera wartość określonego atrybutu (jeśli określony atrybut nie istnieje na elemencie, wynik będzie null).
• .setNamedItem("item attribute") – dodaje nowy atrybut do elementu lub aktualizuje wartość już istniejącego. Aby utworzyć atrybut, należy użyć metody document.createAttribute(), do której należy przekazać nazwę atrybutu jako parametr. Następnie do utworzonego atrybutu należy przypisać wartość za pomocą właściwości value.
• .removeNamedItem("nazwa_atrybutu") – usuwa określony atrybut z elementu (w wyniku zwraca usunięty atrybut).

Przykład pracy z atrybutami za pomocą metod getNamedItem, setNamedItem i removeNamedItem:

KOCHAM JAVASCRIPT

Zadania

• Wydrukuj w konsoli wszystkie elementy dokumentu, które mają atrybut id.
• Dodaj atrybut tytułu do wszystkich obrazów na stronie, jeśli nie mają tego atrybutu. Zestaw wartości atrybutu równa wartości atrybut alt.

Możesz stworzyć niestandardowe wiązanie wiązania, który sprawdzi wartość konkretnego obserwowalnego wartość logiczna przed dodaniem lub nie atrybutami. Zobacz ten przykład:

Ko.bindingHandlers.attrIf = ( update: function (element, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) ) ); połączyć

Chciałbym móc odpowiedzieć @gbs, ale nie mogę. Moim rozwiązaniem byłoby posiadanie dwóch identycznych element HTML: jeden z atrybutem, bez niego i warunek wybicia, aby dodać jeden z nich zgodnie z elementem. Zdaję sobie również sprawę z tego zwykłego czekania, ale które rozwiązanie jest bardziej wydajne?

Ustawia wartość atrybutu w określonym elemencie. Jeśli atrybut już istnieje, wartość jest aktualizowana; w przeciwnym razie dodawany jest nowy atrybut o określonej nazwie i wartości.

Składnia

element.setAtrybut( Nazwa, wartość);

Parametry

nazwa DOMSString określający nazwę atrybutu, którego wartość ma zostać ustawiona. Nazwa atrybutu jest automatycznie konwertowana na małe litery, gdy setAttribute() jest wywoływana dla elementu HTML w dokumencie HTML. wartość DOMSString zawierający wartość do przypisania do atrybutu. Każda określona wartość niebędąca ciągiem jest automatycznie konwertowana na ciąg.

Atrybuty logiczne są uważane za prawdziwe, jeśli "w ogóle są obecne w elemencie, niezależnie od ich rzeczywistej wartości; z reguły powinieneś określić pusty ciąg ("") w wartości (niektórzy używają nazwy atrybutu;); to działa, ale jest niestandardowe). Zobacz poniżej praktyczną demonstrację.

Ponieważ określona wartość jest konwertowana na ciąg znaków, określenie null niekoniecznie działa zgodnie z oczekiwaniami.Zamiast usuwać atrybut lub ustawiać jego wartość na null , zamiast tego ustawia wartość atrybutu na ciąg „null” . Jeśli chcesz usunąć atrybut, wywołaj removeAttribute() .

wartość zwrotu

Wyjątki

InvalidCharacterError Podana nazwa atrybutu zawiera jeden lub więcej znaków, które nie są poprawne w nazwach atrybutów.

przykład

W poniższym przykładzie setAttribute() służy do ustawiania atrybutów na .

HTML

Witaj świecie

JavaScript

var b = document.querySelector("przycisk"); b.setAttribute("nazwa", "helloButton"); b.setAttribute("wyłączone", "");

To pokazuje dwie rzeczy:

• Pierwsze wywołanie setAttribute() powyżej pokazuje zmianę wartości atrybutu nazwy na "helloButton". Możesz to zobaczyć za pomocą inspektora stron przeglądarki (Chrome , Edge , Firefox , Safari).
• Aby ustawić wartość atrybutu logicznego, takiego jak disable , możesz określić dowolną wartość. Zalecanymi wartościami są pusty ciąg lub nazwa atrybutu. Liczy się tylko to, że jeśli atrybut jest w ogóle obecny, niezależnie od jego rzeczywistej wartości, jego wartość jest uważana za prawdziwą . Brak atrybutu oznacza, że ​​jego wartość jest fałszywa. Ustawiając wartość atrybutu disable na pusty ciąg (""), ustawiamy disable na true , co powoduje, że przycisk jest wyłączony.

Metody DOM zajmujące się atrybutami elementu:

Nie uwzględniające przestrzeni nazw, najczęściej używane metody	Warianty uwzględniające przestrzeń nazw (DOM Level 2)	Metody DOM Level 1 do bezpośredniego radzenia sobie z węzłami Attr (rzadko używane)	Metody DOM Level 2 uwzględniające przestrzeń nazw do bezpośredniego radzenia sobie z węzłami Attr (rzadko używane)
setAtrybut(DOM 1)	setAtrybutNS	setAttributeNode	setAttributeNodeNS
pobierzAtrybut(DOM 1)	pobierzAtrybutNS	getAttributeNode	getAttributeNodeNS
maAtrybut(DOM2)	hasAtrybutNS	-	-
usuńAtrybut(DOM 1)	usuńAtrybutNS	removeAttributeNode	-

Specyfikacja

• DOM Level 2 Core: setAttribute (wprowadzony w DOM Level 1 Core)

Kompatybilność z przeglądarką

Tabela zgodności na tej stronie jest generowana na podstawie uporządkowanych danych. Jeśli chcesz wnieść swój wkład w dane, wejdź na https://github.com/mdn/browser-compat-data i wyślij nam pull request.

Zaktualizuj dane zgodności na GitHub

	Pulpit						mobilny
	Chrom	Brzeg	Firefox	Internet Explorer	Opera	safari	widok na Androida	Chrome na Androida	Firefox dla Androida	Opera na Androida	Safari na iOS	Samsung Internet
setAtrybut	Pełna obsługa ChromeTak	Krawędź Pełne wsparcie 12	Firefox Pełna obsługa Tak	IE Pełne wsparcie 5 notatki Pełne wsparcie 5 notatki notatki W programie Internet Explorer 7 i wcześniejszych funkcja setAttribute nie ustawia stylów i usuwa zdarzenia podczas próby ich ustawienia.	Opera Pełne wsparcie Tak	Safari Pełne wsparcie 6	Pełna obsługa WebView Android Tak	Pełna obsługa Chrome na Androida Tak	Pełna obsługa Firefoksa AndroidTak	Pełna obsługa Opery Android Tak	Safari iOS Pełna obsługa Tak	Samsung Internet Android Pełna obsługa Tak

Legenda

Pełne wsparcie Pełne wsparcie Zobacz uwagi dotyczące implementacji. Zobacz uwagi dotyczące implementacji.

Uwagi Gekon

Używanie setAttribute() do modyfikowania pewnych atrybutów, w szczególności wartości w XUL, działa niespójnie, ponieważ atrybut określa wartość domyślną. Aby uzyskać dostęp lub zmodyfikować bieżące wartości, należy użyć właściwości. Na przykład użyj Element.value zamiast Element.setAttribute() .