ZAJĘCIA HTML w JS

Podczas czytania przeglądarkę HTML generuje DOM-model. Jednak większość standardowych atrybutów HTML są własnością odpowiednich obiektów.

Na przykład, jeśli znacznik wygląda , to obiekt jest własnością body.id = "page".

Ale ta przemiana - nie jeden-do-jednego. Istnieją sytuacje, w których atrybut ma pojedynczą wartość i własność - oba. Zdarza się również, że atrybut jest i właściwości o tej samej nazwie nie jest tworzony.

W skrócie - HTML-DOM-atrybuty i właściwości są zwykle, ale nie zawsze odpowiadają sobie wzajemnie, to należy rozumieć, że taka własność, a że jest atrybutem pracować poprawnie z nimi.

Wcześniej widzieliśmy kilka wbudowanych we właściwościach DOM-węzeł. Ale, technicznie, nikt z nas nie jest ograniczony.

DOM węzeł - jest obiektem, w związku z tym, podobnie jak każdego obiektu w JavaScript może zawierać niestandardowe właściwości i metody.

Na przykład, będziemy tworzyć w document.bodynowej nieruchomości i napisz w nim obiektu:

Można również dodać nową funkcję:

Właściwości niestandardowe i metody są widoczne tylko w JavaScript i nie wpływa na wyświetlanie odpowiedniego znacznika.

Zauważmy, niestandardowe DOM-właściwości:

  • Może mieć dowolną wartość.
  • Nazwy właściwości są wrażliwe do rejestru.
  • Praca ze względu na fakt, że DOM-węzły są obiektami JavaScript.

Elementy DOM, z drugiej strony, odpowiadać tagów HTML, które mają atrybuty tekstowe.

Oczywiście, jesteśmy tu tylko o węzłach, elementów, a nie o węzły tekstowe i komentarze.

Dostęp do atrybutów odbywa się za pomocą standardowych metod:

  • elem.hasAttribute(name) - sprawdza atrybutu
  • elem.getAttribute(name) - Get wartość atrybutu
  • elem.setAttribute(name, value) - zestawy atrybutów
  • elem.removeAttribute(name) - usuwa atrybut

Te metody pracy z wartości, która jest w formacie HTML.

Ponadto, wszystkie te cechy można uzyskać przy użyciu właściwości elem.attributeszawierającego tablicę typu pseudo Przedmiotem Attr.

W przeciwieństwie do właściwości, atrybuty:

  • Zawsze są struny.
  • Ich nazwa nie jest rozróżniana wielkość liter (to jest HTML)
  • Widziany w innerHTML(z wyjątkiem starego IE)

Rozważmy różnice między DOM właściwości i atrybutów przykładowym kodzie HTML:



Poniższy przykład pokazuje atrybuty zbiorów i ich funkcje.





Po uruchomieniu powyższy kod nocie

  1. getAttribute('About')- pierwsza litera nazwy atrybutu Aboutjest napisane wielkimi literami, jak w HTML - w dole, ale to nie ma znaczenia, ponieważ nazwy są wielkości liter.
  2. Możemy napisać przypisać dowolną wartość, ale zostanie on przekształcony w ciąg. Przedmiotem zostanie automatycznie konwersji.
  3. Po dodaniu atrybutu może być postrzegane w innerHTMLten element.
  4. Kolekcja attributeszawiera wszystkie atrybuty obiektów o właściwościach namei value.

Kiedy przeglądarka czyta HTML i tworzy model DOM, tworzy właściwości dla wszystkich standardowych atrybutów.

Na przykład, właściwości znacznika 'A'opisano w opisie Dom: HTMLAnchorElement.

Na przykład, ma właściwość "href". Ponadto, ma "id"inne właściwości, które są wspólne dla wszystkich elementów, które są opisane w opisie w HTMLElement.

Wszystkie standardowe właściwości DOM są zsynchronizowane z atrybutów, ale nie zawsze taka synchronizacja odbywa się 1-do-1, więc czasami trzeba cenić go z HTML, masz atrybut.

Rozważmy kilka przykładów.

Synchronizacja nie gwarantuje te same wartości w atrybutach i właściwościach.

Czytaj więcej:   czcionki Program dla Mac OS

Na przykład, zobaczyć co się dzieje z atrybutem "href"po zmianie właściwości:

To dlatego, że cecha może być dowolny i własności href, w zależności od specyfikacji W3C, powinno być zakończone przez odniesienie.

Tak więc, jeśli dokładnie, że w HTML chcemy, trzeba przejść przez atrybut.

Zmienić niektóre właściwości atrybutów aktualizacji. Ale to jest raczej wyjątkiem niż regułą.

Najczęstszym synchronizacja - jednostronna: własność zależy od atrybutu, ale nie odwrotnie.

Na przykład, w przypadku zmiany właściwości input.valueatrybutu input.getAttribute('value')nie zmieni:

Oznacza to, że zmiany w DOM-własności valueatrybutu nie ma wpływu, pozostaje taka sama.

Ale zmieniając atrybut aktualizuje właściwość:

Funkcja ta może być miły w użyciu.

Okazuje się, że atrybut input.getAttribute('value')przechowuje oryginalną wartość (początkową), nawet gdy użytkownik jest wypełniony w polu a właściwość ulegnie zmianie.

Na przykład można wziąć pierwotne znaczenie atrybutu, i porównać z nieruchomości w celu sprawdzenia, czy wartość została zmieniona. I, jeśli to konieczne, ponownie nagrać atrybutu nieruchomości, odrzucając zmiany.

Atrybut "class"odpowiada właściwości className.

Ponieważ słowo "class"jest słowem zastrzeżonym w JavaScript to, że przy projektowaniu DOM zdecydował, że odpowiednia nieruchomość zostanie wywołana className.

Na przykład:

Nawiasem mówiąc, istnieją inne atrybuty, które nazywane są inaczej niż nieruchomości. Na przykład, atrybut for( ) odpowiada nazwy właściwości htmlFor.

Atrybut class- jest wyjątkowa. Odpowiada on za dużo dla dwóch właściwości!

Pracować z klas, takich jak struny niewygodne. Dlatego też, oprócz classNamew nowoczesnych przeglądarek posiada funkcję classList.

Nieruchomość classList- obiekt do pracy z klas.

Jest ona obsługiwana w IE od IE10, ale może być emulowane w IE8 +, łączący classList.js mini-biblioteki.

metody classList:

  • elem.classList.contains("class")- powraca true/false, w zależności od tego, czy istnieje klasa elementem class.
  • elem.classList.add/remove("class") - dodaj / usuń klasę class
  • elem.classList.toggle("class")- jeśli klasa classnie jest obecny, dodaj ją, jeśli istnieje - usuwa.

Ponadto, możliwe jest do sortowania klas forjak classList- pseudo-macierzy.

Na przykład:

Każdy element posiada zestaw standardowych funkcji, takich jak to będzie href, nameale za to będzie src, alti tak dalej.

Dokładny zestaw funkcji opisanych w standardzie, zazwyczaj jesteśmy bardziej lub mniej obecny, jeśli używamy HTML, które właściwości mogą być, a co - nie.

DOM-nieruchomość nie jest stworzony dla atrybutów niestandardowych.

Na przykład:

Obiekt jest standardem tylko wtedy, gdy jest to opisane w normie dla tego elementu.

Oznacza to, że jeśli przypisać elementu atrybutu href, obiekt img.hrefpojawia się z tego. Ponieważ jednak i jeśli przypisać łącza atrybut alt:

Atrybuty niestandardowe są czasem wykorzystywane do CSS.

W poniższym przykładzie, aby pokazać „status zamówienia” atrybut jest używany order-state:

Dlaczego atrybut? Nie mogłeś zrobić klas .order-state-new, .order-state-pending, order-state-canceled?

Oczywiście można, ale manipulować atrybut z JavaScript znacznie łatwiejsze.

Na przykład, jeśli chcesz anulować zamówienie, bez względu na to, w jakim stanie jest teraz - uczyni to kod:

Dla klas - trzeba wiedzieć, co klasa jest teraz w porządku. A potem możemy usunąć starą klasę i umieścić nowy:

... Oznacza to, że zajmuje więcej wstępnych informacji oraz potrzebę napisać więcej listów. Jest to mniej wygodne.

Mówiąc najprościej, wartość atrybutu - dowolna wartość klasy String - to „jest” lub „nie”, więc naturalne jest, że atrybuty „mocny” i są bardziej dogodne zajęcia w JS iw CSS.

Czytaj więcej:   NOD32 Server Update 5

Z pomocą atrybutów niestandardowych można przypisać do elementu danych, które będą dostępne w języku JavaScript.

Zazwyczaj odbywa się to za pomocą atrybutów, których nazwy zaczynają się data-na przykład:

standardem HTML5 specjalnie zezwala atrybuty data-*i rezerwuje je dla danych użytkownika.

We wszystkich przeglądarkach z wyjątkiem IE10- takie atrybuty mogą być dostępne nie tylko do atrybutów, ale również co do właściwości, o specjalnych właściwościach dataset:

Zwrócić uwagę - nazwa data-user-locationzostała przekształcona dataset.userLocation. Myślnik przekształca się wielką literą.

Dla starszych przeglądarek nowoczesne atrybuty muszą czasami polifille. Z reguły takie polifill obejmuje nie tylko JavaScript, ale i CSS.

Ten atrybut powinien ukryć element, działanie jest bardzo proste, aby wspierać go w tym wystarczająco HTML CSS:

Jeśli napotkasz IE11- przykładzie powyżej,