15 ЈаваСцрипт методе за ДОМ манипулацију за Веб програмере

вар еле = доцумент.куериСелецтор (селектор);

се бира са куериСелецтор () метода и њена боја се мијења у црвену.

 
параграф један
 
параграф два
 
див оне
 
став 3
 
див тво
 

 вар фирстДив = доцумент.куериСелецтор ('див'); фирстДив.стиле.цолор = 'црвена'; 

Интерацтиве Демо

Тест тхе куериСелецтор () у следећем интерактивном демо-у. Само откуцајте селектор који одговара онима које можете наћи у плавим кутијама (нпр. #тхрее), и кликните на дугме Изабери. Обратите пажњу на то ако куцате .блокирати, само његова прва инстанца ће бити изабрано.

2. куериСелецторАлл ()

за разлику од куериСелецтор () која враћа само прву инстанцу свих одговарајућих елемената, куериСелецторАлл () враћа све елементе који одговарају наведеном ЦСС селектору.

Одговарајући елементи се враћају као НодеЛист објекат који ће бити празан објекат ако се не пронађу одговарајући елементи.

Синтакса

вар елес = доцумент.куериСелецторАлл (селектор);

• елес - А НодеЛист објекат са свим одговарајућим елементима као вредности својства. Објекат је празан ако није пронађен ниједан резултат.
• селектор - један или више ЦСС селектора, као што је "#фооИд", ".фооЦлассНаме", ".цласс1.цласс2", или ".цласс1, .цласс2"

Цоде Екампле

Пример испод користи исти ХТМЛ као и претходни. Међутим, у овом примеру сви параграфи се бирају са куериСелецторАлл (), и обојене су плаво.

 
параграф један
 
параграф два
 
див оне
 
став 3
 
див тво
 

 вар параграфи = доцумент.куериСелецторАлл ('п'); за (вар п од параграфа) п.стиле.цолор = 'блуе'; 

3. аддЕвентЛистенер ()

Догађаји односи се на оно што се дешава са ХТМЛ елементом, као што је клик, фокусирање или учитавање, на које можемо реаговати са ЈаваСцриптом. Можемо доделити ЈС функције листен за ове догађаје у елементима и урадите нешто када се догађај десио.

Постоје три начина на које можете доделите функцију одређеном догађају.

Ако фоо () је прилагођена функција, можете је регистрирати као слушаоца догађаја клика (позвати када се кликне на елемент дугмета) на три начина:

1.  Алерт

2.  вар бтн = доцумент.куериСелецтор ('буттон'); бтн.онцлицк = фоо;

3.  вар бтн = доцумент.куериСелецтор ('буттон'); бтн.аддЕвентЛистенер ('клик', фоо);

Метода аддЕвентЛистенер () (треће решење) соме прос; то је најновији стандард - дозвољава додељивање више од једне функције као слушаоца догађаја једном догађају - и долази са корисним скупом опција.

Синтакса

еле.аддЕвентЛистенер (евт, слушатељ, [опције]);

• еЛ е - ХТМЛ елемент који слуша догађај ће слушати.
• евт - Циљани догађај.
• сл - Типично, ЈаваСцрипт функција.
• Опције - (опционално) Објект са скупом боолеових својстава (наведен испод).

Опције	Шта се дешава, када је постављено истина?
цаптуре	Зауставља мјехуриће догађаја, тј. Спречава позивање било којег слушатеља догађаја за исти тип догађаја у прецима елемента. Да бисте користили ову функцију, можете користити 2 синтаксе: еле.аддЕвентЛистенер (евт, листенер, труе) еле.аддЕвентЛистенер (евт, листенер, цаптуре: труе);
једном	Слушалац се зове само први пут када се догађај деси, а затим се аутоматски одваја од догађаја и више га неће активирати..
пасивно	Подразумевана радња догађаја не може се зауставити методом превентДефаулт ().

Цоде Екампле

У овом примеру, додајемо позваног слушача догађаја клика фоо, до ХТМЛ таг.

Кликни ме

 вар бтн = доцумент.куериСелецтор ('буттон'); бтн.аддЕвентЛистенер ('клик', фоо); фунцтион фоо () алерт ('хелло'); 

Интерацтиве Демо

Ассигн тхе фоо () прилагођена функција као слушалац догађаја на било који од следећа три догађаја: улазни, клик или Миша преко & Покрените изабрани догађај у доњем пољу за унос лебдећи прстом, кликом или куцањем у њему.

4. ремовеЕвентЛистенер ()

Тхе ремовеЕвентЛистенер () метода одваја слушаоца догађаја претходно додато са аддЕвентЛистенер () метода од догађаја за који слуша.

Синтакса

еле.ремовеЕвентЛистенер (евт, слушалац, [опције]);

Користи исту синтаксу као и претходно аддЕвентЛистенер () метода (осим за једном опција која је искључена). Опције се користе да би биле врло специфичне за идентификацију слушатеља који ће бити одвојен.

Цоде Екампле

Пратећи кодни пример који смо користили аддЕвентЛистенер (), овде уклањамо позваног слушалаца догађаја клика фоо од елемент.

 бтн.ремовеЕвентЛистенер ('клик', фоо);

5. цреатеЕлемент ()

Тхе цреатеЕлемент () метода креира нови ХТМЛ елемент помоћу име ХТМЛ ознаке као што је 'п' или 'див'.

Касније можете додати овај елемент на веб страницу користећи различите методе за уметање ДОМ-а, као такав АппендЦхилд () (види касније у овом посту).

Синтакса

доцумент.цреатеЕлемент (тагНаме);

• Означи име - Име ХТМЛ ознаке коју желите да креирате.

Цоде Екампле

У следећем примеру можете да креирате нови елемент пасуса:

вар пЕле = доцумент.цреатеЕлемент ('п')

6. аппендЦхилд ()

Тхе аппендЦхилд () метода додаје елемент као последње дете на ХТМЛ елемент који позива овај метод.

Дете које треба уметнути може бити а новостворени елемент, или ан већ постојеће. У другом случају, биће премештен са свог претходног положаја на положај последњег детета.

Синтакса

еле.аппендЦхилд (цхилдЕле)

• еЛ е - ХТМЛ елемент за који цхилдЕле се додаје као последње дете.
• цхилдЕле - ХТМЛ елемент додан као последње дете еЛ е.

Цоде Екампле

У овом примеру, убацујемо а елемент је као дете а

елемент помоћу аппендЦхилд () и горепоменуто цреатеЕлемент () методе.

 вар див = доцумент.куериСелецтор ('див'); вар стронг = доцумент.цреатеЕлемент ('јак'); стронг.тектЦонтент = 'Здраво'; див.аппендЦхилд (јак);

Интерацтиве Демо

У следећем интерактивном приказу, слова од #а до #р су дјечији елементи # родитељ-један, # родитељ-два, и # родитељ-три ид селектори.

Проверите како аппендЦхилд () метода ради куцање једног родитеља и имена једног дјетета у поља за унос испод. Можете одабрати и дјецу која припадају другом родитељу.

7. ремовеЦхилд ()

Тхе ремовеЦхилд () метода уклања специфицирани подређени елемент из ХТМЛ елемента који позива овај метод.

Синтакса

еле.ремовеЦхилд (цхилдЕле)

• еЛ е - Родитељски елемент цхилдЕле.
• цхилдЕле - Дечији елемент од еЛ е.

Цоде Екампле

У овом примеру уклањамо елемент који смо додали као дете

ознака у Примеру кода за претходни аппендЦхилд () метода.

див.ремовеЦхилд (јак);

8. реплацеЦхилд ()

Тхе реплацеЦхилд () метода замењује подређени елемент другим који припадају родитељском елементу који позива овај метод.

Синтакса

еле.реплацеЦхилд (невЦхилдЕле, олдЦхилеЕле)

• еЛ е - Родитељски елемент за који се дјеца требају замијенити.
• невЦхилдЕле - Цхилд елемент оф еЛ е који ће заменити олдЦхилдЕле.
• олдЦхилдЕле - Цхилд елемент оф еЛ е, који ће бити замењен невЦхилдЕле.

Цоде Екампле

У овом примеру дете елемент припадају

матични елемент се замењује новоствореним таг.

 
 Здраво 

 вар ем = доцумент.цреатеЕлемент ('ем'); вар стронг = доцумент.куериСелецтор ('јак'); вар див = доцумент.куериСелецтор ('див'); ем.тектЦонтент = 'хи'; див.реплацеЦхилд (ем, стронг);

9. цлонеНоде ()

Када морате да креирате нови елемент који треба да буде исти као већ постојећи елемент на веб страници можете једноставно направите копију већ постојећег елемента помоћу цлонеНоде () метода.

Синтакса

вар дупеЕле = еле.цлонеНоде ([дубоко])

• дупеЕле - Цопи оф тхе еЛ е елемент.
• еЛ е - ХТМЛ елемент који треба копирати.
• дубоко - (опционално) Боолеова вредност. Ако је подешено на истина, дупеЕле ће имати све подређене елементе еЛ е има, ако је постављено на фалсе клонират ће се без дјеце.

Цоде Екампле

У овом примеру креирамо копију за елемент са цлонеНоде (), онда ћемо је додати у

таг као дете елемент са горе наведеним аппендЦхилд () метода.

Као резултат,

ће садржати два елементима, оба са Здраво стринг као садржај.

 
 Здраво 

 вар стронг = доцумент.куериСелецтор ('јак'); вар цопи = стронг.цлонеНоде (труе); вар див = доцумент.куериСелецтор ('див'); див.аппендЦхилд (копија); 

10. инсертБефоре ()

Тхе инсертБефоре () метода додаје специфицирани подређени елемент испред другог елемента подређеног. Метод је позван од стране надређеног елемента.

Ако референтни подређени елемент не постоји или сте експлицитно прошли нула на његово место се додаје подређени елемент који се убацује као последње дете родитеља (слично аппендЦхилд ()).

Синтакса

еле.инсертБефоре (невЕле, рефЕле);

• еЛ е - Парент елемент.
• невЕле - Нови ХТМЛ елемент за уметање.
• рефЕле - Дечији елемент од еЛ е пред којим невЕле ће бити уметнута.

Цоде Екампле

У овом примеру креирамо ново елемент са неким текстом унутра и додајте га пре него што тхе елемент унутар

парент елемент.

 
 Здраво 

 вар ем = доцумент.цреатеЕлемент ('ем'); вар стронг = доцумент.куериСелецтор ('јак'); вар див = доцумент.куериСелецтор ('див'); ем.тектЦонтент = 'хи'; див.инсертБефоре (ем, стронг); 

Интерацтиве Демо

Овај интерактивни демо ради слично као и наш претходни демо који припада групи аппендЦхилд () метода. Овде треба само да укуцате ИД селекторе за два подређена елемента (од #а до #р) у поља за унос и можете видјети како инсертБефоре () метод помера прво наведено дете пре него што други.

11. цреатеДоцументФрагмент ()

Тхе цреатеДоцументФрагмент () метода можда није тако добро позната као и остали на овој листи, али је ипак важна, поготово ако то желите уметните више елемената у маси, као што је додавање више редова у табелу.

То ствара а ДоцументФрагмент објекат, што је у суштини ДОМ чвор који није део ДОМ стабла. То је као бафер где можемо додати и ускладиштити друге елементе (нпр. Више редова), пре него што их додате у жељени чвор у ДОМ стаблу (нпр. У табелу).

Зашто једноставно не додамо елементе директно у ДОМ стабло? Због уметања ДОМ-а узрокује промене распореда, и то је скуп процес прегледача пошто ће вишеструка уметања елемента узроковати више промена изгледа.

С друге стране, додавање елемената а ДоцументФрагмент објекат не узрокује измене изгледа, тако да можете додати онолико елемената као што желите прије него што их прослиједите ДОМ стаблу, узрокујући промјену изгледа само у овом тренутку.

Синтакса

доцумент.цреатеДоцументФрагмент ()

Цоде Екампле

У овом примеру креирамо више редова табела и ћелија са цреатеЕлемент () затим додајте у а ДоцументФрагмент објекат, коначно додајте тај фрагмент документа у ХТМЛ

помоћу аппендЦхилд () метода.

Као резултат, пет редова - сваки од њих садржи једну ћелију са бројем од 1 до 5 као садржај - биће убачен у табелу.

 вар табле = доцумент.куериСелецтор ("табела"); вар дф = доцумент.цреатеДоцументФрагмент (); за (вар и = 0; и<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. гетЦомпутедСтиле ()

Понекад то желиш проверите ЦСС вредности својстава елемента пре било каквих промена. Можете користити еле.стиле да уради исто, међутим гетЦомпутедСтиле () начин је направљен само за ту сврху враћа израчунате вриједности само за читање свих ЦСС својстава одређеног ХТМЛ елемента.

Синтакса

вар стиле = гетЦомпутедСтиле (еле, [псеудоЕле])

• стил - А ЦСССтилеДецларатион објект који се враћа методом. Садржи све ЦСС особине и њихове вредности еЛ е елемент.
• еЛ е - ХТМЛ елемент чије су вредности ЦСС-а преузете.
• псеудоЕле - (опционално) Низ који представља псеудо-елемент (на пример, ':после'). Ако је ово поменуто, онда су ЦСС својства специфицираног псеудо-елемента повезана са еЛ е ће бити враћени.

Цоде Екампле

У овом примеру, добијамо и упозоравамо рачунаре видтх вредност а

помоћу елемента гетЦомпутедСтиле () метода.

 вар стиле = гетЦомпутедСтиле (доцумент.куериСелецтор ('див')); алерт (стиле.видтх); 

13. сетАттрибуте ()

Тхе сетАттрибуте () методом додаје нови атрибут на ХТМЛ елемент, или ажурира вредност атрибута који већ постоји.

Синтакса

еле.сетАттрибуте (име, вредност);

• еЛ е - ХТМЛ елемент на који се додаје атрибут или који се атрибут ажурира.
• име - Име атрибута.
• вредност - Вредност атрибута.

Цоде Екампле

У овом примеру, додајемо цонтентедитабле атрибут а

употребом сетАттрибуте () методом, који ће претворити његов садржај.

Здраво

 вар див = доцумент.куериСелецтор ('див'); див.сетАттрибуте ('цонтентедитабле', ") 

14. гетАттрибуте ()

Тхе гетАттрибуте () метода враћа вредност наведеног атрибута припадају одређеном ХТМЛ елементу.

Синтакса

еле.гетАттрибуте (име);

• еЛ е - ХТМЛ елемент за који се тражи атрибут.
• име - Име атрибута.

Цоде Екампле

У овом примеру, обавештавамо вредност цонтентедитабле атрибут који припада

елемент уз помоћ гетАттрибуте () метода.

Здраво

 вар див = доцумент.куериСелецтор ('див'); алерт (див.гетАттрибуте ('цонтентедитабле')) 

15. ремовеАттрибуте ()

Тхе ремовеАттрибуте () метода уклања дати атрибут одређеног ХТМЛ елемента.

Синтакса

еле.ремовеАттрибуте (име);

• еЛ е - ХТМЛ елемент од којег треба уклонити атрибут.
• име - Име атрибута.

Цоде Екампле

У овом примеру уклањамо цонтентедитабле атрибут из

елемент. Као резултат тога

више неће бити могуће уређивати.

Здраво

 вар див = доцумент.куериСелецтор ('див'); див.ремовеАттрибуте ('цонтентедитабле'); 

15 лекција “Уметност рата” вас учи о победничким биткама

15 Лигхтбок Либрариес за мобилну одзивност

15 идеја за куповину или изградњу савршеног стојећег стола

Следећи чланак

15 јКуери Плугинс Да бисте направили паметне лепљиве елементе

Превиоус артицле

15 Инспиративна почетна презентација Видео за предузетнике