Алғы жақ DOM дегеніміз не: JavaScript-те құжат нысанының үлгісін өңдеу

DOM құжат нысанының үлгісін білдіреді және веб-әзірлеудің ең қызықты аспектілерінің бірі болып табылады. Көптеген әріптестерім және мен DOM манипуляциясының арқасында фронтальды әзірлеуді үйрене бастадық. Менің бірінші жобам W3Schools ұсынған «шамды қосу және өшіру» болғаны әлі есімде.
Бұл блогта біз DOM-ды мұқият қарастырамыз және оны басқарудың әртүрлі әдістерін зерттейміз. Бұл веб-беттерде JavaScript-пен жұмыс жасамас бұрын түсінуіңіз керек негізгі және іргелі тұжырымдама. Мен мұнда түсіндіргім келетін бір нәрсе, DOM және JavaScript екі бөлек технология, сондықтан оны есте сақтаңыз.

өту
Браузер нысанының үлгісі (BOM) дегеніміз не?
Құжат нысанының үлгісі (DOM) дегеніміз не?
DOM ағаш құрылымы
HTML, JavaScript және DOM арасындағы байланыс
DOM траверсингінің негіздері
Жалпы DOM манипуляция әдістері
DOM элементтерін өзгерту
Браузер нысанының үлгісі (BOM) дегеніміз не?
Браузер нысанының үлгісі (BOM) JavaScript браузерімен өзара әрекеттесуге мүмкіндік беретін әдістер мен сипаттарды қамтиды.

Шындығында, BOM JavaScript браузерімен байланысуға мүмкіндік береді. БОМ ішіндегі ең маңызды нысандардың кейбіріне Навигатор , Орын және Тарих жатады .

Құжат нысанының үлгісі (DOM) дегеніміз не?

Екінші жағынан, DOM HTML бетінің whatsapp нөмірлерінің тізімі құрылымын білдіреді және оны логикалық ағашқа бөледі. DOM веб-беттегі барлық HTML элементтерін қамтиды. JavaScript пайдалану арқылы біз DOM бөліктерін таңдап, басқара аламыз, бұл бізге статикалық емес, интерактивті веб-беттерді жасауға мүмкіндік береді.

DOM ағаш құрылымы
Құжат нысанының үлгісі (DOM) тармағы HTML құжатының құрылымын элементтер немесе түйіндер иерархиясы ретінде көрсету тәсілі. Браузер бұл ағашты HTML кодын оқу және оны құрылымдық үлгіге айналдыру арқылы жасайды.

Ішкі элементтер сыртқы элементтерге дұрыс орналастырылған элементтерді дұрыс орналастыру HTML құжатының жарамдылығын қамтамасыз ету үшін өте маңызды. Бұл дәл кірістіру браузерге құжатты дұрыс түсіндіруге және DOM ағашын тиімді құруға мүмкіндік береді.

Мысалы, осы HTML құжатын және оның DOM ағашы ретінде қалай көрсетілетінін қарастырайық:

DOM дегеніміз не: JavaScript-те құжат нысанының үлгісін өңдеу 1

Міне, біз оны ағашқа айналдыра аламыз:

Дом ағашының құрылымы 2

Жоғарыдағы инфографикада сайттың құрылған күнін және оның seo-дағы маңыздылығын қалай табуға болады көрсетілгендей, HTML – ағаш құрылымының түбірі . Бұл иерархияда келесі деңгейлер HTML еншілестері болып табылатын HEAD және BODY тұрады. HEAD элементінде жалғыз еншілес бар: TITLE . Екінші жағынан, BODY элементінде екі еншілес бар: H1 және DIV , одан әрі DIV бір баласы бар: P.

Бұл мысал салыстырмалы түрде қарапайым құжат құрылымын көрсетеді. Дегенмен, күрделірек веб-сайттар үшін DOM ағашы айтарлықтай күрделірек болуы мүмкін. Бұл ағаш және әртүрлі басқа сипаттар веб-беттің құжат нысанының үлгісін (DOM) құрайды.

Ескерту: DOM ағашы веб-беттегі барлық HTML элементтерін қамтиды.

HTML, JavaScript және DOM арасындағы байланыс

JavaScript көмегімен веб-беттегі элементтерді өңдеу үшін бірінші қадам DOM ішінде қажетті HTML элементін таңдау болып табылады . Мысалы, тақырыптың мәтіндік мазмұнын JavaScript көмегімен өзгерту үшін алдымен DOM ішінде сол элементті таңдау керек . Таңдағаннан кейін оны сәйкесінше өзгертуге болады.

HTML элементтерін таңдаудың бірнеше әдістері бар, бірақ ең жиі қолданылатындары:

getElementById()
querySelector()
querySelectorAll()
DOM дегеніміз не: JavaScript 2-де құжат нысанының үлгісін өңдеу

Бұл блогта біз осы әдістердің Гонконг деректері әрқайсысы қалай жұмыс істейтінін және оларды тиімді DOM манипуляциясы үшін қалай пайдалану керектігін қарастырамыз.

DOM траверсингінің негіздері
Арнайы әдістерді пайдаланып HTML эл Алғы жақ DOM дегеніміз не ементтерін таңдамас бұрын, DOM арқылы өту арқылы элементтерді қалай табуға болатынын қарастырайық. Беттегі барлық HTML элементтерін қамтитын құжат нысаны арқылы DOM файлын айналдыра аламыз .

DOM құрылымын шарлау арқылы біз getElementById() немесе querySelector() сияқты әдістерді қолданбай-ақ нақты элементтерді тауып, басқара аламыз .

Бұл әдіс міндетті емес болғанымен, DOM траверсін түсіну берік негіз құруға көмектеседі. Қарапайым HTML үзіндісі үшін де DOM арқылы өтудің бірнеше жолы бар. Оның қалай жұмыс істейтінін көрейік:

DOM өту

Жоғарыдағы кодта, көріп отырғаныңыздай, біз ешқандай нақты DOM әдістерін қолданбай, DOM арқылы өту арқылы HTML элементтерін таңдай аламыз.

Біз веб-беттегі әрбір элементті қамтитын құжат нысанынан негізгі элементті таңдаудан бастаймыз . Денені таңдағаннан кейін біз белгілі элементтерге қол жеткізу үшін еншілес және childNodes сияқты сипаттарды пайд Алғы жақ DOM дегеніміз не алана аламыз.

Міне, DOM өту үшін пайдалануға болатын кейбір қосымша сипаттар:

бірінші бала
соңғы бала
nextElementSibling
келесі ағайынды
иесі құжат
parentElement
ата-аналық түйін
oldElementSibling
алдыңғы ағайынды
DOM өткелінің қалай жұмыс істейтінін жақсы түсіну үшін осы сипаттармен тәжірибе жасап көріңіз.

Жалпы DOM манипуляция әдістері
DOM өтуіне қоса, HTML элементтерін DOM ішінен тікелей таңдаудың бірнеше әдістері бар. Осы әдістерді пайдаланып элементтерді таңдағаннан кейін біз алдыңғы мысалдарда көрсетілгендей оларды өзгерте аламыз. Бұл бөлімде біз элементтерді идентификаторы, класс аты, тег аты және CSS селекторлары арқылы таңдауды үйренеміз.

Алдыңғы бөлімде жасағандай, DOM файлын қадам Алғы жақ DOM дегеніміз не  бойынша қолмен өтудің орнына, біз енді DOM іздеуге және берілген критерийлерге сәйкес келетін HTML элементтерін қайтаруға болатын кірістірілген әдістерді қолданамыз.

Элементтерді ID бойынша таңдау
HTML элементін оның идентификаторы бойынша таңдау үшін getElementById() әдісін қолданамыз . Бұл әдіс идентификатор атын дәлел ретінде талап етеді және көрсетілген идентификаторға сәйкес келетін жалғыз элементті қайтарады.