HTML КЛАСЫ У JS

Пры чытанні HTML браўзэр генеруе DOM-мадэль. Пры гэтым большасць стандартных HTML-атрыбутаў становяцца ўласцівасцямі адпаведных аб'ектаў.

Напрыклад, калі тэг выглядае як , то ў аб'екта будзе ўласцівасць body.id = "page".

Але гэта пераўтварэнне - не адзін-у-адзін. Бываюць сітуацыі, калі атрыбут мае адно значэнне, а ўласцівасць - іншае. Бывае і так, што атрыбут ёсць, а ўласцівасці з такой назвай не ствараецца.

Калі коратка - HTML-атрыбуты і DOM-ўласцівасці звычайна, але не заўсёды адпавядаюць адзін аднаму, трэба разумець, што такое ўласцівасць і што такое атрыбут, каб працаваць з імі правільна.

Раней мы бачылі некаторыя ўбудаваныя ўласцівасці DOM-вузлоў. Але, тэхнічна, ніхто нас імі не абмяжоўвае.

Вузел DOM - гэта аб'ект, таму, як і любы аб'ект у JavaScript, ён можа ўтрымліваць прыстасаваныя ўласцівасці і метады.

Напрыклад, створым у document.bodyновае ўласцівасць і запішам у яго аб'ект:

Можна дадаць і новую функцыю:

Нестандартныя ўласцівасці і метады бачныя толькі ў JavaScript і ніяк не ўплываюць на адлюстраванне адпаведнага тэга.

Звернем увагу, прыстасаваныя DOM-ўласцівасці:

  • Могуць мець любое значэнне.
  • Назвы уласцівасцяў адчувальныя да рэгістра.
  • Працуюць за кошт таго, што DOM-вузлы з'яўляюцца аб'ектамі JavaScript.

Элементам DOM, з другога боку, адпавядаюць HTML-тэгі, у якіх ёсць тэкставыя атрыбуты.

Вядома, тут гаворка менавіта пра вузлах-элементах, не пра тэкставых вузлах або каментарах.

Доступ да атрыбутаў ажыццяўляецца пры дапамозе стандартных метадаў:

  • elem.hasAttribute(name) - правярае наяўнасць атрыбуту
  • elem.getAttribute(name) - атрымлівае значэнне атрыбуту
  • elem.setAttribute(name, value) - усталёўвае атрыбут
  • elem.removeAttribute(name) - выдаляе атрыбут

Гэтыя метады працуюць са значэннем, якое знаходзіцца ў HTML.

Таксама ўсе атрыбуты элемента можна атрымаць з дапамогай ўласцівасці elem.attributes, якое змяшчае псеўда-масіў аб'ектаў тыпу Attr.

У адрозненне ад уласцівасцяў, атрыбуты:

  • Заўсёды з'яўляюцца радкамі.
  • Іх імя неадчувальна да рэгістра (бо гэта HTML)
  • Бачныя ў innerHTML(за выключэннем старых IE)

Разгледзім адрозненні паміж DOM-ўласцівасцямі і атрыбутамі на прыкладзе HTML-кода:



Прыклад ніжэй ўсталёўвае атрыбуты і дэманструе іх асаблівасці.





Пры запуску кода вышэй звярніце ўвагу:

  1. getAttribute('About')- першая літара імя атрыбуту Aboutнапісана ў верхнім рэгістры, а ў HTML - у ніжнім, але гэта не мае значэння, так як імёны неадчувальныя да рэгістра.
  2. Мы можам запісаць у атрыбут любое значэнне, але яно будзе пераўтворана ў радок. Аб'екты таксама будуць аўтаматычна ператвораныя.
  3. Пасля дадання атрыбуту яго можна ўбачыць у innerHTMLэлемента.
  4. Калекцыя attributesзмяшчае ўсе атрыбуты ў выглядзе аб'ектаў са ўласцівасцямі nameі value.

Калі браўзэр чытае HTML і стварае DOM-мадэль, то ён стварае ўласцівасці для ўсіх стандартных атрыбутаў.

Напрыклад, ўласцівасці тэга 'A'апісаны ў спецыфікацыі DOM: HTMLAnchorElement.

Напрыклад, у яго ёсць уласцівасць "href". Акрамя таго, ён мае "id"і іншыя ўласцівасці, агульныя для ўсіх элементаў, якія апісаны ў спецыфікацыі ў HTMLElement.

Усе стандартныя ўласцівасці DOM сінхранізуюцца з атрыбутамі, аднак не заўсёды такая сінхранізацыя адбываецца 1-у-1, таму часам нам трэба значэнне менавіта з HTML, то ёсць атрыбут.

Разгледзім некалькі прыкладаў.

Сінхранізацыя не гарантуе аднолькавага значэння ў атрыбуце і ўласцівасці.

Чытай яшчэ:   ПРАГРАМА шрыфт для MAC OS

Для прыкладу, паглядзім, што адбудзецца з атрыбутам "href"пры змене ўласцівасці:

Гэта адбываецца таму, што атрыбут можа быць любым, а ўласцівасць href, у адпаведнасці са спецыфікацыяй W3C, павінна быць поўнай спасылкай.

Стала быць, калі мы хочам менавіта тое, што ў HTML, то трэба звяртацца праз атрыбут.

Змена некаторых уласцівасцяў абнаўляе атрыбут. Але гэта хутчэй выключэнне, чым правіла.

Часцей сінхранізацыя - аднабаковая: ўласцівасць залежыць ад атрыбуту, але не наадварот.

Напрыклад, пры змене ўласцівасці input.valueатрыбут input.getAttribute('value')не мяняецца:

Гэта значыць, змена DOM-ўласцівасці valueна атрыбут не ўплывае, ён застаецца такім жа.

А вось змена атрыбуту абнаўляе ўласцівасць:

Гэтую асаблівасць можна прыгожа выкарыстаць.

Атрымліваецца, што атрыбут input.getAttribute('value')захоўвае арыгінальнае (зыходнае) значэнне нават пасля таго, як карыстальнік запоўніў поле і ўласцівасць змянілася.

Напрыклад, можна ўзяць першапачатковае значэнне з атрыбуту і параўнаць з уласцівасцю, каб даведацца, ці змянілася значэнне. А пры неабходнасці і перазапісаць ўласцівасць атрыбутам, адмяніўшы змены.

Атрыбуту "class"адпавядае ўласцівасць className.

Бо слова "class"з'яўляецца зарэзерваваным словам у Javascript, то пры праектаванні DOM вырашылі, што адпаведнае ўласцівасць будзе называцца className.

напрыклад:

Дарэчы, ёсць і іншыя атрыбуты, якія называюцца інакш, чым ўласцівасць. Напрыклад, атрыбуту for( ) адпавядае ўласцівасць з назвай htmlFor.

Атрыбут class- унікальны. Яму адпавядае аж цэлых два ўласцівасці!

Працаваць з класамі як са радком нязручна. Таму, акрамя className, у сучасных браўзэрах ёсць ўласцівасць classList.

Ўласцівасць classList- гэта аб'ект для працы з класамі.

Яно падтрымліваецца ў IE пачынаючы з IE10, але яго можна эмуляваць ў IE8 +, падлучыўшы міні-бібліятэку classList.js.

метады classList:

  • elem.classList.contains("class")- вяртае true/false, у залежнасці ад таго, ці ёсць у элемента клас class.
  • elem.classList.add/remove("class") - дадае / выдаляе клас class
  • elem.classList.toggle("class")- калі класа classняма, дадае яго, калі ёсць - выдаляе.

Акрамя таго, можна перабраць класы праз for, так як classList- гэта псеўда-масіў.

напрыклад:

У кожнага элемента ёсць некаторы набор стандартных уласцівасцяў, напрыклад для гэта будуць href, name, а для гэта будуць src, alt, і гэтак далей.

Дакладны набор уласцівасцяў апісаны ў стандарце, звычайна мы больш-менш ўяўляем, калі карыстаемся HTML, якія ўласцівасці могуць быць, а якія - не.

Для нестандартных атрыбутаў DOM-ўласцівасць не ствараецца.

напрыклад:

Ўласцівасць з'яўляецца стандартным, толькі калі яно апісана ў стандарце менавіта для гэтага элемента.

Гэта значыць, калі прызначыць элементу атрыбут href, то ўласцівасць img.hrefад гэтага не з'явіцца. Як, зрэшты, і калі прызначыць спасылцы атрыбут alt:

Нестандартныя атрыбуты часам выкарыстоўваюць для CSS.

У прыкладзе ніжэй для паказу «стану замовы» выкарыстоўваецца атрыбут order-state:

Чаму менавіта атрыбут? Хіба нельга было зрабіць класы .order-state-new, .order-state-pending, order-state-canceled?

Вядома можна, але маніпуляваць атрыбутам з JavaScript значна прасцей.

Напрыклад, калі трэба адмяніць заказ, усё роўна ў якім ён стане цяпер - гэта зробіць код:

Для класаў - трэба ведаць, які клас у заказу цяпер. І тады мы можам зняць стары клас, і паставіць новы:

... Гэта значыць, патрабуецца больш зыходнай інфармацыі і трэба напісаць больш літар. Гэта меней зручна.

Прасцей кажучы, значэнне атрыбуту - адвольная радок, значэнне класа - гэта «ёсць» або «не», таму натуральна, што атрыбуты «магутней» і бываюць зручней класаў як у JS так і ў CSS.

Чытай яшчэ:   NOD32 5 сервера абнаўленняў

З дапамогай нестандартных атрыбутаў можна прывязаць да элемента дадзеныя, якія будуць даступныя ў JavaScript.

Як правіла, гэта робіцца пры дапамозе атрыбутаў з назвамі, якія пачынаюцца на data-, напрыклад:

Стандарт HTML5 спецыяльна дазваляе атрыбуты data-*і рэзэрвуе іх для карыстацкіх дадзеных.

Пры гэтым ва ўсіх браўзэрах, акрамя IE10-, да такіх атрыбутах можна звярнуцца не толькі як да атрыбутаў, але і як да ўласцівасцяў, пры дапамозе адмысловага ўласцівасці dataset:

Звернем увагу - назва data-user-locationтрансфармавалася ў dataset.userLocation. Злучок ператвараецца ў вялікую літару.

Для старых браўзэраў сучасныя атрыбуты часам маюць патрэбу ў полифилле. Як правіла, такі полифилл ўключае ў сябе не толькі JavaScript, але і CSS.

Гэты атрыбут павінен хаваць элемент, дзеянне вельмі простае, для яго падтрымкі ў HTML дастаткова такой CSS:

Калі запусціць у IE11- прыклад вышэй, то

дадаць каментар

Ваш e-mail не будзе апублікаваны. Абавязковыя палі пазначаныя *