Ненатрапчив JavaScript
Създаване на ново съдържание
Новосъздадените елементи не се добавят веднага към документа, те са в чистилището, докато не ги добавим някъде в дървото на възлите.
Промяна на съществуващо съдържание
Пример със снимка
Така че, в случай, че са налични Javascript и DOM, искаме:
- Премахнете „(нов прозорец)“ от връзката
- Добавете манипулатор на събитие за извикване на функцията popw().
Тази функция трябва:
- Покажете изображението, съответстващо на връзката под връзката, ако все още не съществува.
- Изтрийте изображението, ако вече съществува (за да не добавяте изображението отново и отново, като щракнете върху връзката)
- Накарайте изображението да изчезне, когато потребителите щракнат върху него.
Първият проблем е лесен за решаване:
След това за функцията popw() трябва да използваме някои от методите, описани по-горе:
Например, да кажем, че имаме формуляр, който съдържа полета за дата, и искаме да предложим инструмент за избор на дата на потребители, които имат активиран Javascript и ръчно въвеждат датата на други потребители. Нека не обсъждаме действителното прилагане на указателя за дата тук, а се фокусираме върху това как да го извикаме.
Нека първо напишем необходимия HTML. За да видим кои елементи трябва да създадат препратка към указател за дата, ще добавим класовете за дата към тях.
Преминаваме през всички входове в документа и проверяваме кой има класа за дата в className (не забравяйте, че елементите могат да имат повече от един клас в атрибута class!)
Когато намерим този клас, създаваме нов обект за връзка и неговия текст. Прикрепяме този текст към обекта за връзка като дъщерен обект и добавяме манипулатор на събития, за да извикаме нашия скрипт за избор на дата.
Всичко, от което се нуждаем, е да кажемфункцията за избор за какво да се използва върнатата стойност.
Връзката се предава на функцията picker() като обект и ние трябва да имаме достъп до предишния братски възел, INPUT.
Изброяването винаги е хакерска операция и често доста бавна. За да избегнем итерация, трябва да променим нашата функция.
Промяна на функцията addPickerLink().
Използването на addPickerLink() е лесно, но ни прави зависими от маркирането. Какво се случва, ако например по-късно трябва да добавим таг SPAN със звездичка (*) след тага за въвеждане, за да покажем, че това поле е задължително?
Заобиколно решение е да използвате insertBefore() на следващия възел на същото ниво като нашето поле за въвеждане.
Е, това е всичко, с описаните инструменти можем да получим достъп до всеки елемент от документа и след това да променим този елемент и можем да подобрим потребителското изживяване, без да сме обвързани с Javascript.
Първоначално може да изглежда малко трудно да приложите DOM, но след като настроите мисленето си да използвате DOM, ще ви е по-лесно да го прилагате всеки път.
Някои общи проблеми: