Դոմի դոն լինելու ալֆա հոդվածում-ում ես փորձեցի ձեզ անցնել dom-ի ներածական փուլը, որտեղ մենք ուսումնասիրեցինք այն, ներկայացրեցինք javascript-ը: dom սելեկտորները և՛ մեկ, և՛ մի քանի ընտրիչներ, և սովորեցին մի հնարք, թե ինչպես փոխարկել Html հավաքածուն զանգվածի:
Այս հոդվածում մենք մի փոքր կխորանանք դոն դոն լինելու արվեստի մեջ, որտեղ մենք կսովորենք անցնել dom-ը, ստեղծել տարր(ներ) dom-ից, և ինչպես ուժեղ>կրակեք և վարձեք տարրեր տանըդոնի նման՝ օգտագործելով այս HTML հավաքածուն:
Անցնելով The Dom
Իմանալով dom-ի բոլոր ընտրիչները՝ թույլ տվեք անցնել dom-ը, որը հիմնականում նավարկում/շարժվում է դեպի վեր և վար՝ dom-ում, մենք գործ կունենանք առանձին հանգույցների/տարրերի ծնողների և երեխաների հետ:
Առաջին ատյանի
Մենք կդիտարկեինք առանձին հանգույցներին/տարրերին կցված տարբեր հատկություններ և դրանք կապված են ծնող և երեխա տարրերի/հանգույցների ընտրության հետ, եթե մենք ընտրեինք երեխայի հանգույցներ/տարրեր տրամադրված HTML հավաքածուից: >» մենք կարող ենք օգտագործել .childNode մեթոդի օպերատորը, ինչպես այս օրինակում է.
այժմ այս մի քանի տող կոդեր կվերադարձնեն վահանակի ulտարրի մանկական հանգույցները:
Ուշադրություն դարձրեք, որ մանկական հանգույցները բաղկացած են ոչ միայն li տարրերից, այլ նաև ունեն տեքստային հանգույցներ, եթե դուք նոր եք Javascript-ում, կարող եք զարմանալ, որ տեքստերի միջև չկան: li տարրերը Html ֆայլում լավ .childNode մեթոդը նույնականացնում է գծերի ընդմիջումները -ի միջև։ li տարրերը որպես տեքստեր, բայց մենք կարող ենք խուսափել այս տեքստային հանգույցներից, քանի որdon, մենք պետք է օգտագործենք .children մեթոդը .childNode մեթոդի փոխարեն, այնպես որ, եթե մենք ունենք;
սա կունենա միայն երեխայի տարրերը, այլ ոչ թե մանկական հանգույցները վահանակում:
սա եզրակացնում է, որ .children մեթոդը նպատակահարմար է համեմատած .childNode մեթոդի հետ, երբ անցնում է dom-ը, բայց երկու մեթոդներն էլ արդյունավետ են, և մենք կարող ենք դրանք շահարկել բազմաթիվ ձևերով, ինչպես նաև դրանց կցված լինեն հավելումների մեթոդներ, ինչպիսիք են .nodeNameը՝ ընտրված հանգույցի ստանալու համար: հանգույցի անունը կամ .nodeType՝ ընտրված հանգույցի հանգույցի տեսակը ստանալու համար՝ նշելու մի քանիսը.childNodeմեթոդն օգտագործելիս:
Երկրորդ ատյանի
Մենք կարող ենք կոնկրետ կամ նպատակային ընտրություն կատարել հանգույցների/տարրերի երեխաներ և շահարկել դրանք, օրինակ, եթե ցանկանում ենք ընտրել/թիրախավորել և շահարկել Html հավաքածուի մայր տարրի երկրորդ զավակ տարրը;
սա կփոխի ընտրված կոնկրետ երեխայի տարրի տեքստի բովանդակությունը
Այս մեթոդով մենք կարող ենք հատկություններ հատկացնել երեխաների տարրերին կամ երեխաների երեխաների տարրին/հանգույցին, օրինակ.
սա կփոխի թիրախային տարրի գույնը ինտերֆեյսի մեջ, ինչպես կարող եք տեսնել ստորև ներկայացված ներկայացման մեջ.
մենք կարող ենք շատ ավելին նշանակել դինամիկ id կամ className,մենք կարող ենք նաև ընտրել երեխայի տարրի երեխա օգտագործելով այլ մեթոդներ, ինչպիսիք են .firstChild, .firstElementChild, .lastChild և .lastElementChild: Երեխաների/երեխայի վրա կատարված առաջադրանքները կարող են կատարվել նաև ծնող հանգույցների/տարրերի վրա՝ օգտագործելով այս .parentNode,.parentElement և .parentElement.parentElement մեթոդները: Եվ ինչպես մենք կարող ենք ընտրել երեխա և ծնող տարրեր/հանգույցներ, մենք կարող ենք ընտրել եղբայր կամ եղբայր։ տարրերօգտագործելով այնպիսի մեթոդներ, ինչպիսիք են .nextSibling,.nextElementSibling,.previousSibling և .previousElementSibling:
Դա ավարտվում է այն տանող ճանապարհով, որը ես թույլ կտայի քեզ լինել դոն և թույլ կտայի քեզ հասկանալ, թե ինչպես աշխատել ծնողի և եղբոր հետ: em> մեթոդներ, որոնք ես վերը թվարկեցի:
Տարրերի ստեղծում
Որպես dom-ի դոն մենք կարող ենք կառուցել dom տարրեր բացարձակ զրոյից, վերագրել ատրիբուտներ նրանց և տեղադրել դրանք dom-ի մեջ մանիպուլյացիայի համար, ինչը նշված է լրացուցիչ li տարրի ստեղծման մասին և տեղադրում տրամադրված Html հավաքածուի մեջ;
Կոդի այս մի քանի տողերը ինտերֆեյսի և Html հավաքածուի մեջ նոր li տարր դուրս կբերեն:
Մենք կարող ենք ավելի շատ էլեմենտներ ստեղծել և դրանք ավելի դինամիկ վերագրել՝ համեմատած այս ներկայացման հետ, բայց ես թույլ կտայի ձեզ դա պարզել որպես դոն:
Աշխատանքի և աշխատանքից ազատելու տարրեր
Դոմում տարրերի/հանգույցների հեռացումը և փոխարինումը և dom-ում դասերի ու ատրիբուտների մանիպուլյացիաները տարրերը/հանգույցները որպես դոն վարձելու և անջատելու միջոց են:
Աշխատանքի ընդունում
Եկեք տարրեր վարձենք տրամադրված Html հավաքածու-ից, դա անելու համար մենք կօգտագործենք .replaceChild() մեթոդը, որն ընդգրկում է երկու պարամետր՝ փոխարինումը և տարրը: փոխարինվել;
Կոդերի այս հավաքածուն կկատարի առաջին երեխայի տարրի բովանդակությունը փոխարինելու խնդիրը, ինչպես պատկերի ներկայացման մեջ է:
Կրակել
Դոմից տարրեր կրակելը պարզապես դրանք հեռացնելն է՝ օգտագործելով.remove() մեթոդը, ահա ստորև ներկայացված պատկերը.
Կոդի այս երկու տողերը կհանեն li տարրը տրամադրված Html հավաքածուի չպատվիրված ցուցակի երկրորդ ինդեքսում, փորձեք այն և կտեսնեք, որ դա կախարդական է: Մենք կարող ենք նաև հեռացնել երեխայի կողմից՝ օգտագործելով .removeChild() մեթոդը;
Կոդի այս երեք տողերը կհանեն li տարրը Html հավաքածուի 4-րդ ինդեքսից։
Եզրակացություն
Այս դոմի վրայով անցնելու, dom-ից տարր(ներ) ստեղծելու,և դոմում տարրեր կրակելու և վարձելու այս մեթոդները javascript-ում dom մանիպուլյացիայի հիմնական հիմունքներն են և կարող են լինել: ուղղակիորեն կամ դինամիկ կերպով իրականացվել նախագծերի մեջ: Հարցեր տվեք պարզաբանումների համար:
Նշումներ և հղումներ
.childNode և .children մեթոդները զրոյական ինդեքսավորվում են:
Ահա հանգույցների տեսակների բացառիկ ցանկը:
Ներկա երեխաների ընդհանուր տարրերը հաշվելու համար: մենք կարող ենք օգտագործել .childElementCount մեթոդը:
