Manipulim i pastër JavaScript DOM. Hyrje metodat e objektit dom


Modeli i Objektit të Dokumentit, ose "DOM", është një ndërfaqe programimi për të hyrë në elementet e faqeve të internetit. Në thelb, është një API faqe që ju lejon të lexoni dhe manipuloni përmbajtjen, strukturën dhe stilet e një faqeje. Le të shohim se si funksionon dhe si funksionon.

Si ndërtohet një faqe në internet?

Procesi i shndërrimit të dokumentit origjinal HTML në një faqe të stilizuar dhe interaktive të dhënë quhet "Shtegu Kritik i Renderingut". Megjithëse ky proces mund të ndahet në hapa të shumtë, siç e përshkrova te Kuptimi i Rrugës Kritike të Renderingut, këto hapa mund të grupohen afërsisht në dy hapa. Në të parën, shfletuesi analizon dokumentin për të përcaktuar se çfarë do të shfaqet përfundimisht në faqe, dhe në të dytën, shfletuesi jep.

Rezultati i fazës së parë është ajo që quhet "pema e dhënë". Bëni pemën Shtë një përfaqësim i elementeve HTML që do të shfaqen në faqe dhe stilet e tyre të lidhura. Për të ndërtuar këtë pemë, shfletuesit i duhen dy gjëra:

  1. CSSOM, prezantimi i stileve të shoqëruara me elemente
  2. DOM, përfaqësimi i elementeve

Nga çfarë është bërë DOM?

DOM është përfaqësimi i objektit të dokumentit origjinal HTML. Ka disa ndryshime, siç do të shohim më poshtë, por në thelb është një përpjekje për të transformuar strukturën dhe përmbajtjen e një dokumenti HTML në një model të objektit që mund të përdoret nga programe të ndryshme.

Struktura e objekteve DOM përfaqësohet nga ajo që quhet "pema e nyjeve". Quhet kështu sepse mund të mendohet si një pemë me një prind të vetëm që degëzohet në shumë degë të fëmijëve, secila prej tyre mund të ketë gjethe. Në këtë rast, "elementi" prind është elementi rrënjësor, "degët" e fëmijës janë elementët e vendosur, dhe "gjethet" janë përmbajtja brenda elementeve.

Le të marrim këtë dokument HTML si një shembull:

Uebfaqja ime e parë

Përshendetje Botë!

Si jeni?

Ky dokument mund të përfaqësohet si pema e nyjeve vijuese:

  • html
    • kokë
      • titulli
        • Uebfaqja ime e parë
    • trupi
      • h1
        • Përshendetje Botë!
      • f
        • Si jeni?

Çfarë nuk është DOM

Në shembullin e mësipërm, DOM duket të jetë një hartë 1: 1 e dokumentit origjinal HTML. Sidoqoftë, siç thashë, ka dallime. Për të kuptuar plotësisht se çfarë është DOM, duhet të hedhim një vështrim në atë që nuk është.

DOM nuk është një kopje e HTML origjinale

Edhe pse DOM është krijuar nga një dokument HTML, nuk është gjithmonë saktësisht i njëjtë. Ka dy raste në të cilat DOM mund të ndryshojë nga HTML origjinal.

1. Kur HTML përmban gabime të shënjimit

DOM është ndërfaqja për hyrjen në elementet aktuale (d.m.th. të dhëna tashmë) të një dokumenti HTML. Në procesin e krijimit të DOM, vetë shfletuesi mund të korrigjojë disa gabime në kodin HTML.

Konsideroni këtë dokument HTML si një shembull:

Përshendetje Botë!

Dokumentit i mungojnë elementet dhe e cila është e domosdoshme për HTML. Por nëse shohim pemën DOM që rezulton, mund të shohim se kjo është rregulluar:

  • html
    • kokë
    • trupi
      • Përshendetje Botë!

    2. Kur DOM modifikohet nga Javascript

    Përveç që është një ndërfaqe për shikimin e përmbajtjes së një dokumenti HTML, vetë DOM mund të modifikohet gjithashtu.

    Mund të krijojmë, për shembull, nyje shtesë për DOM duke përdorur Javascript.

    Var newParagraph \u003d document.createElement ("p"); var paragrafi Përmbajtja \u003d document.createTextNode ("Unë" jam i ri! "); newParagraph.appendChild (paragrafi Përmbajtja); document.body.appendChild (newParagraph);

    Ky kod do të ndryshojë DOM, por ndryshimet nuk do të shfaqen në dokumentin HTML.

    DOM nuk është ajo që shihni në shfletues (d.m.th. pema e pasqyrimit)

    Në pamjen e shfletuesit, ju shihni pemën e pasqyrimit, e cila, siç thashë, është një kombinim i DOM dhe CSSOM. Dallimi midis DOM dhe pemës së dhënies është se kjo e fundit përbëhet vetëm nga ajo që përfundimisht do të shfaqet në ekran.

    Meqenëse pema e pasqyrimit ka të bëjë vetëm me atë që shfaqet, ajo përjashton elementet që janë fshehur vizualisht. Për shembull, elementet që kanë stile me ekran: asnjë.

    Përshendetje Botë!

    Si jeni?

    DOM do të përfshijë elementin

    • html
      • kokë
      • trupi
        • h1
          • Përshendetje Botë!
        • f
          • Si jeni?

    Sidoqoftë, pema e pasqyrimit, dhe për këtë arsye ajo që është e dukshme në pamjen e shikimit, nuk do të përfshihet në këtë artikull.

    • html
      • trupi
        • h1
          • Përshendetje Botë!

    DOM nuk është ajo që shfaqet në DevTools

    Ky ndryshim është pak më i vogël sepse Inspektori i Elementeve DevTools siguron përafrimin më të afërt me DOM që kemi në një shfletues. Sidoqoftë, inspektori i DevTools përmban informacion shtesë që nuk është në DOM.

    Shembulli më i mirë i kësaj është pseudo-elementet CSS. Pseudo-elementet e krijuara duke përdorur selektorët :: para dhe :: pasjanë pjesë e CSSOM dhe japin pemën, por nuk janë teknikisht pjesë e DOM. Kjo sepse DOM gjenerohet vetëm nga dokumenti origjinal HTML, duke mos përfshirë stilet e aplikuara në element.

    Megjithëse pseudo-elementet nuk janë pjesë e DOM, ato janë në inspektorin tonë të elementeve devtools.


    Përmbledhje

    DOM është ndërfaqja e një dokumenti HTML. Përdoret nga shfletuesit si hapi i parë për të përcaktuar se çfarë të jepet në pamjen e parë dhe nga kodi Javascript për të ndryshuar përmbajtjen, strukturën ose stilin e faqes.

DOM shpesh quhet pema DOM sepse është e përbërë nga një pemë e objekteve të quajtura nyje. Në mësuat se çfarë është Modeli i Objektit të Dokumentit (DOM), si të hyni në objektin e dokumentit dhe të ndryshoni vetitë e tij duke përdorur konsolën, ne gjithashtu mësuam ndryshimin midis HTML dhe kodit burimor DOM.

Në këtë manual, ju do të gjeni terminologjinë HTML që ju nevojitet për të punuar me JavaScript dhe DOM, të mësoni se çfarë janë një pemë dhe nyje DOM, dhe të mësoni se si të identifikoni llojet më të zakonshme të nyjeve. Ju gjithashtu mund të krijoni një program JavaScript në tastierë për të modifikuar në mënyrë interaktive DOM.

Terminologjia HTML

Kuptimi i termave HTML dhe JavaScript është thelbësor për të punuar me DOM. Le të hedhim një vështrim të shpejtë në termat themelorë.

Shikoni këtë element HTML:

Shtëpi

Ai përmban një spirancë, e cila është një lidhje me index.html.

  • a - etiketë
  • href - atribut
  • html - vlera e atributit
  • Home - teksti.

Gjithçka midis etiketave hapëse dhe mbyllëse përbën një element HTML.

Le të kthehemi te skedari index.html nga udhëzimi i mëparshëm:




Mësoni DOM


Modeli i objektit të dokumentit



Mënyra më e lehtë për të hyrë në një element me JavaScript është me atributin id. Le të shtojmë lidhjen e mësipërme në skedarin tonë index.html me id \u003d "nav".

...

Modeli i objektit të dokumentit


Shtëpi

...

Ngarko (ose rifresko) faqen në një dritare të shfletuesit dhe shiko DOM për t'u siguruar që kodi është azhurnuar.

Pastaj përdorni metodën getElementById () për të hyrë në të gjithë elementin. Vendosni sa vijon në tastierë:

dokument.getElementById ("nav");
Shtëpi

Metoda getElementById () do të rimarrë të gjithë elementin. Tani, në vend që të duhet të fusni këtë objekt dhe metodë sa herë që keni nevojë për të hyrë në lidhjen nav, ju mund ta vendosni elementin në një ndryshore për ta bërë më të lehtë punën me të.

le të navLink \u003d document.getElementById ("nav");

Ndryshorja navLink përmban spirancën. Këtu ju lehtë mund të ndryshoni atributet dhe vlerat. Për shembull, për të ndryshuar vendndodhjen e lidhjes, ndryshoni atributin href:

navLink.href \u003d "https://www.wikipedia.org";

Ju gjithashtu mund të ndryshoni tekstin duke rivendosur pronën e tekstit Përmbajtja:

navLink.textContent \u003d "Shkoni te Wikipedia";

Tani, duke parë këtë element në tastierë ose duke kontrolluar etiketën Elements, mund të shihni se si është azhurnuar.

navLink;
Navigo tek Wikipedia

Ndryshimet do të pasqyrohen edhe në pjesën e përparme.

Rifreskimi i faqes do të kthejë të gjitha vlerat origjinale.

Në këtë pikë, ju duhet të kuptoni se si të përdorni metodën e dokumentit për të hyrë në një element, si t'i caktoni një element një ndryshore dhe si të ndryshoni vetitë dhe vlerat në një element.

Pema dhe nyjet DOM

Të gjithë elementët në DOM përcaktohen si nyje. Ka shumë lloje të nyjeve, por ka tre kryesore me të cilat do të punoni më shpesh:

  1. Nyja e elementit
  2. Nyja e tekstit
  3. Nyja e komentit

Kur një element HTML është një element në DOM, ai quhet një nyje e elementit. Çdo tekst i vetëm jashtë një elementi është një nyje teksti, dhe një koment HTML është një nyje komenti. Përveç këtyre tre llojeve të nyjeve, objekti i dokumentit në vetvete është një nyje e dokumentit, e cila është nyja rrënjësore e të gjitha nyjeve të tjera.

DOM përbëhet nga një strukturë peme e nyjeve të vendosura, shpesh të referuara si pema DOM. Ju ndoshta e dini se çfarë është trungu familjar - është një paraqitje skematike e lidhjeve familjare, e cila përbëhet nga prindër, fëmijë dhe të afërm. Nyjet në DOM quhen gjithashtu prind dhe fëmijë bazuar në marrëdhëniet e tyre me nyjet e tjera.

Për shembull, krijoni një skedar nyjet.html. shtoni një nyje teksti në të, si dhe nyjet e komenteve dhe elementeve.




Mësoni rreth nyjeve


Një nyje e elementit



Një nyje teksti.

Nyja e elementit html është prindi. koka dhe trupi janë nyje fëmijë të html. trupi përmban tre nyje fëmijësh dhe të gjithë janë në të njëjtin nivel - lloji i nyjes nuk ndikon në nivelin e folezimit.

shënim: Kur punoni me HTML të krijuar nga DOM, dhëmbëzimi i burimit HTML krijon shumë nyje të zbrazëta të tekstit që nuk do të duken në skedën Elementet e DevTools. Më shumë rreth kësaj në linkun.

Përcaktimi i llojit të nyjes

Çdo nyje në një dokument ka një lloj, i cili arrihet përmes vetisë nodeType. Rrjeti i Zhvilluesve Mozilla ka një listë të azhurnuar të të gjitha konstanteve të llojit të nyjeve. Më poshtë është një tabelë e llojeve më të zakonshme të nyjeve.

Në skedën Elemente në Veglat e Zhvilluesit, mund të vini re se sa herë që klikoni dhe zgjidhni ndonjë rresht në DOM, vlera \u003d\u003d $ 0 shfaqet pranë tij. Kjo është një mënyrë shumë e përshtatshme për të hyrë në artikullin aktualisht aktiv.

Në tastierën node.html, klikoni në elementin e parë në trup (h1).

Përdorni tastierën për të gjetur llojin e nyjes së zgjedhur duke përdorur vetinë nodeType.

$ 0.nodeType;
1

Duke zgjedhur elementin h1, do të shihni 1 si rezultat që i referohet ELEMENT_NODE. Bëni të njëjtën gjë me nyjet e tjera dhe ato do të kthehen përkatësisht 3 dhe 8.

Duke ditur se si të hyni në një element, ju mund të shihni llojin e nyjes pa theksuar elementet në DOM.

document.body.nodeType;
1

Përveç nodeType, mund të përdorni edhe vetinë nodeValue për të zbuluar vlerën e një nyje teksti ose komenti, dhe nyjaName për të marrë etiketën e një elementi.

Ndryshimi i DOM duke përdorur ngjarjet

Deri më tani, ju keni parë se si të ndryshoni DOM në tastierë, dhe ndryshime të tilla dihen se janë të përkohshme; sa herë që faqja rifreskohet, të gjitha ndryshimet humbasin. Në ju azhurnoni ngjyrën e sfondit të faqes në tastierë. Provoni të kombinoni atë që keni mësuar në këtë manual me atë që dini tashmë për të krijuar një buton interaktiv që ndryshon ngjyrën e sfondit.

Kthehuni tek skedari juaj index.html dhe shtoni një element butoni me një ID. Ju gjithashtu duhet të shtoni një lidhje në skedarin e ri në drejtorinë e re js js / scripts.js.




Mësoni DOM


Modeli i objektit të dokumentit





Një ngjarje në JavaScript është një veprim që bën një përdorues. Përdoruesi vendos miun mbi një element, klikon mbi të ose në një çelës të caktuar në tastierë - të gjitha këto janë ngjarje. Në këtë rast të veçantë, butoni duhet të ndërmarrë një veprim kur përdoruesi klikon mbi të. Për ta bërë këtë, duhet të shtoni një dëgjues të ngjarjeve. Krijoni një skedar scripts.js dhe ruajeni në një direktori të re js. Në skedar, duhet të përcaktoni një element të butonit dhe t'ia caktoni atë një ndryshoreje.

Duke përdorur metodën addEventListener (), butoni do të dëgjojë për klikime dhe do të ekzekutojë funksionin e tij pas klikimit.

...
button.addEventListener ("kliko", () \u003d\u003e (
// veprimi do të shkojë këtu
});

Brenda funksionit, duhet të vendosni kodin nga manuali i mëparshëm për të ndryshuar ngjyrën e sfondit në fuchsia.

...

Kështu duket skenari:

butoni let \u003d dokument.getElementById ("changeBackground");
button.addEventListener ("kliko", () \u003d\u003e (
document.body.style.backgroundColor \u003d "fuchsia";
});

Ruani dhe mbyllni skedarin. Rifresko faqen index.html në shfletuesin tënd. Klikoni në butonin e ri dhe ngjyra e sfondit të faqes do të ndryshojë.

Etiketat :,

Në këtë manual, ne do të shohim se çfarë është DOM, pse nevojitet dhe si është ndërtuar.

Çfarë është DOM?

Kur një shfletues kërkon një faqe dhe merr burimin e saj HTML si përgjigje nga serveri, së pari duhet ta analizojë atë. Në procesin e analizimit dhe analizimit të kodit HTML, shfletuesi ndërton një pemë DOM bazuar në të.

Pas përfundimit të këtij veprimi dhe një numri të tjerëve, shfletuesi fillon të japë faqen. Në këtë proces, natyrisht, ai tashmë përdor pemën DOM që ai krijoi, jo kodin origjinal HTML.

DOM është një model i dokumentit që shfletuesi krijon në kujtesën e kompjuterit bazuar në kodin HTML që merr nga serveri.

Në terma të thjeshtë, HTML është teksti i faqes, dhe DOM është një grup i objekteve të lidhura të krijuara nga shfletuesi kur analizon tekstin e saj.

Në Chrome, kodi burimor i faqes që merr shfletuesi mund të shikohet në skedën Burimi i panelit të Veglave të Zhvilluesit të Uebit.


Chrome nuk ka një mjet për të parë pemën DOM që ka krijuar. Por ka një përfaqësim të kësaj peme DOM në formën e kodit HTML, ajo është në dispozicion në skedën "Elementet". Ky përfaqësim i DOM është, sigurisht, shumë më i përshtatshëm për të punuar me një zhvillues uebi. Prandaj, nuk ka asnjë mjet që do të përfaqësonte DOM si një strukturë peme.


Objektet në këtë model formohen nga pothuajse gjithçka në HTML (etiketat, përmbajtja e tekstit, komentet, etj.), Përfshirë vetë dokumentin. Lidhjet midis këtyre objekteve në model formohen bazuar në mënyrën se si Elementet HTML ndodhen në kod në lidhje me njëri-tjetrin.

Në këtë rast, DOM i dokumentit pas formimit të tij mund të ndryshohet. Kur DOM ndryshon, shfletuesi ri-vizaton imazhin e faqes pothuajse menjëherë. Si rezultat, ne kemi pasqyrimi i faqes gjithmonë përputhet me DOM.

Për të lexuar dhe modifikuar programatikisht DOM, shfletuesi na siguron DOM API ose, me fjalë të tjera, ndërfaqen programatike. Në një mënyrë të thjeshtë, DOM API është një grup i një numri të madh të objekteve të ndryshme, vetitë dhe metodat e tyre që ne mund të përdorim për të dOM lexon dhe ndryshon.

Në shumicën e rasteve, JavaScript përdoret për të punuar me DOM. sot është e vetmja gjuhë programuese që mund të shkruhet në një shfletues.

Pse na duhet DOM API? Na duhet që të mund ta ndryshojmë faqen duke përdorur JavaScript, dmth. e bëjnë atë dinamike dhe interaktive.

DOM API na ofron (zhvilluesve) një numër të madh metodash me të cilat ne mund të ndryshojmë gjithçka në faqe, si dhe të ndërveprojmë me përdoruesin. Ata. kjo ndërfaqe programimi na lejon të krijojmë ndërfaqe komplekse, forma, të përpunojmë veprimet e përdoruesve, të shtojmë dhe heqim elementë të ndryshëm në faqe, të ndryshojmë përmbajtjen e tyre, vetitë (atributet) dhe shumë më tepër.

Në ditët e sotme praktikisht nuk ka faqe në internet në skenare që nuk do të funksiononin me DOM.

Nga çfarë përbëhet HTML i faqes?

Para se të kaloni në studimin e modelit të objektit të dokumentit, së pari duhet të mbani mend se cili është kodi burimor i një faqe në internet (dokumenti HTML).

Kodi burimor i një faqe në internet përbëhet nga etiketat, atributet, komentet dhe teksti. Etiketat janë sintaksa bazë HTML. Shumica e tyre janë çiftuar. Në këtë rast, njëra prej tyre është ajo hapëse, dhe tjetra është ajo mbyllëse. Një çift i tillë i etiketave formon një element HTML. Elementet HTML mund të kenë parametra shtesë - atribute.

Në një dokument, për të krijuar një shënim të caktuar, disa elementë janë brenda të tjerëve. Si rezultat, një dokument HTML mund të mendohet për sa më shumë elementë HTML të vendosur brenda njëri-tjetrit.

Si shembull, merrni parasysh kodin vijues HTML:

Titulli i faqes

Titulli i artikullit

Seksioni i artikullit

Përmbajtja e artikullit

Në këtë kod, elementi rrënjë është html. Ajo ka fole të elementeve të kokës dhe trupit. Elementi i kokës përmban titullin, dhe trupi përmban h1 dhe div. Elementi div nga ana e tij përmban h2 dhe p.

Tani le të shohim se si një shfletues ndërton një pemë DOM bazuar në kodin HTML.

Si është ndërtuar pema DOM e një dokumenti?

Siç përshkruhet më sipër, shfletuesi ndërton një pemë bazuar në elementet HTML dhe entitetet e tjera të kodit burimor të faqes. Gjatë kryerjes së këtij procesi, ai merr parasysh folezimin e elementeve brenda njëri-tjetrit.

Si rezultat, shfletuesi përdor pemën DOM që rezulton jo vetëm në punën e saj, por gjithashtu na siguron një API për punë të përshtatshme me të përmes JavaScript.

Kur ndërton DOM, shfletuesi krijon objekte (nyjet e pemës DOM) nga elementet HTML, teksti, komentet dhe entitetet e tjera të kësaj gjuhe.

Në shumicën e rasteve, zhvilluesit e uebit interesohen vetëm për objektet (nyjet) e formuara nga elementet HTML.

Në të njëjtën kohë, shfletuesi nuk krijon vetëm objekte nga elementet HTML, por gjithashtu i lidh ato me njëri-tjetrin me lidhje të caktuara, varësisht nga mënyra se si secila prej tyre ka lidhje me tjetrën në kod.

Elementet që janë drejtpërdrejt në disa elementë janë fëmijë në lidhje me të. Dhe ai është prind për secilin prej tyre. Përveç kësaj, të gjithë këta elementë në lidhje me njëri-tjetrin janë vëllezër e motra (vëllezër).

Për më tepër, në HTML, çdo element ka gjithmonë një prind (elementi HTML në të cilin ndodhet direkt). Në HTML, një element nuk mund të ketë shumë prindër. Përjashtimi i vetëm është elementi html. Ai nuk ka prind.

Për të marrë pemën DOM ndërsa shfletuesi e ndërton, thjesht duhet të "rreshtoni" të gjithë elementët në varësi të marrëdhënies së tyre me njëri-tjetrin.

Krijimi i pemës DOM bëhet nga lart poshtë.

Në këtë rast, rrënja e pemës DOM është gjithmonë vetë dokumenti (nyja e dokumentit). Më tej, pema ndërtohet në varësi të strukturës së kodit HTML.

Për shembull, kodi HTML që pamë më lart do të ketë pemën e mëposhtme DOM:


Në majë të kësaj peme është nyja e dokumentit. Kjo nyje është e lidhur me html, është fëmija i saj. Nyja html formohet nga elementi html ( ...) Nyjet e kokës ( ...) dhe trupi ( ...) kanë një lidhje prindërore për html. Në raport me njëri-tjetrin, ata janë vëllezër e motra, sepse kanë një prind. Nyja e kokës shoqërohet me titullin (lt; titulli\u003e ...), ai është fëmija i tij. Nyjet h1 dhe div shoqërohen me trupin, për të cilin është prindi. Nyja div është e lidhur me h2 (

...

) dhe p (), ata janë fëmijët e tij.

Pema fillon, siç u përmend më lart, nga objekti i dokumentit (nyja). Ajo, nga ana tjetër, ka një nyje fëmije të formuar nga elementi html ( ...) Elementet e kokës ( ...) dhe trupi ( ...) janë në HTML dhe për këtë arsye janë fëmijët e saj. Më tej, nyja e kokës është prindi i titullit (lt; titulli\u003e ...) Elementet h1 dhe div janë vendosur brenda trupit, që do të thotë se ata janë fëmijët e tij. Div përmban direkt elemente h2 (

...

) dhe p (). Kjo do të thotë që nyja div për secilin prej tyre është prindi.

Kjo është sa e lehtë është të ndërtosh një pemë DOM në një shfletues bazuar në kodin HTML.

Pse duhet të dini se si ndërtohet një pemë DOM? Së pari, është një kuptim i mjedisit në të cilin dëshironi të ndryshoni diçka. Së dyti, shumica e veprimeve kur punoni me DOM shkon drejt gjetjes (zgjedhjes) së elementeve të kërkuara. Duke mos ditur se si funksionon pema DOM dhe lidhjet midis nyjeve, do të jetë mjaft e vështirë të gjesh një element specifik në të.

Detyrë

Bazuar në pemën DOM të treguar në figurë, krijoni kodin HTML.



Tema është vërtet komplekse. Por, siç thonë ata, djalli nuk është aq i tmerrshëm sa është pikturuar. Kjo është ajo ku unë marr arrën më të vështirë për të thyer: kjo super detyrë e "pikturimit" është aq e tretshme sa të jetë e mundur, por jo plotësisht primitive. Deri më tani, të gjitha materialet që kam lexuar priren të jenë ose zaum ose primitiv.

Çfarë është DOM

Shkurtimi DOM qëndron për Modeli i objektit të dokumentit (modeli i objektit të dokumentit).

DOM është një ndërfaqe programimi për të hyrë në përmbajtjen e dokumenteve HTML, XHTML dhe XML, pra paraqitjen e etiketave dhe atributeve HTML, XHTML dhe XML, si dhe stilet CSS si objekte programimi. Të dy JavaScript dhe gjuhët e tjera të programimit në internet punojnë me këtë model.

Pak histori

Ekzistojnë 4 nivele DOM (0, 1, 2 dhe 3).

Niveli 0(1996) përfshinte modele DOMe cila ekzistonte para nivelit 1. Këto janë kryesisht koleksione: dokument.imazhe, dokument.forma, dokument.shtresa dhe dokument.të gjitha. Këto modele nuk janë specifikime zyrtare. DOMbotuar W3C... Përkundrazi, ato ofrojnë informacion në lidhje me atë që ekzistonte para se të fillonte procesi i standardizimit.

Niveli 1 (1997) gjithashtu përfshiu funksionalitetin themelor për përpunimin e dokumenteve XML: mënyra të shumta për të punuar me nyje individuale, duke punuar me udhëzime të përpunimit XML, etj.

Përveç kësaj, DOM Niveli 1 përmban një numër të ndërfaqeve speciale që mund të trajtojnë elemente individuale HTML. Për shembull, mund të punoni me tabela HTML, formularë, zgjidhni lista dhe më shumë.

NË Niveli 2 i DOM (2002) shtoi disa veçori të reja.

Nëse në DOM nivelit 1 i mungonte mbështetja për hapësirën e emrave, ndërfaqet DOM Niveli 2 përmban metoda për menaxhimin e hapësirave të emrave të shoqëruara me kërkesat për hartimin dhe përpunimin e dokumenteve XML.

Përveç kësaj, DOM niveli 2 mbështet ngjarjet.

Niveli 2 është niveli aktual i specifikimit DOM, Sidoqoftë W3C rekomandon disa pjesë të specifikimit të Nivelit 3.

Niveli i DOM 3 është një draft punues i një specifikimi që zgjeron funksionalitetin DOM niveli 2. Një nga karakteristikat më të rëndësishme të këtij versioni të specifikimit është aftësia për të punuar me zgjerime të shumta DOM.

Çfarë do të thotë ndërfaqja e softuerit?

Fjala angleze ndërfaqja mund të përkthehet si "zona e kontaktit". Një kompjuter, duke folur afërsisht, kupton vetëm dy gjëra: një copë bosh dhe një bit të mbushur. Gjuha e folur nga kompjuteri mund të mendohet si një varg i pafund zero dhe një, duke dhënë një numër të pafund kombinimesh të ndryshme.

Çdo kod programi është i kuptueshëm për interpretimin e programuesit të këtyre "zero-ve dhe atyre" me të cilat funksionon kompjuteri. Kështu, çdo gjuhë programimi është një ndërfaqe njeri-makinë.

Shfletuesit funksionojnë në të njëjtën mënyrë si aplikacionet e tjera kompjuterike. Ata interpretojnë HTML, XML, CSS, JavaScript, PHP, Perl, etj në "zero dhe një". Për të punuar me këtë shumëgjuhësi, ju duhet një platformë e përbashkët. Kjo platformë është DOM - një specifikim që nuk varet nga një gjuhë e veçantë programimi ose markup. Shtë një ndërfaqe që mund të përdoret në shumë gjuhë të njohura të programimit që lidhen me krijimin e faqeve në internet dhe është në gjendje të kuptojë dhe interpretojë objektet. DOM.

DOM dhe shfletuesit

DOM dhe JavaScript

Në JavaScript, maja e shkallës hierarkike të objekteve DOM, një lloj "dirigjent" për këtë ndërfaqe është objekti dokumentdhe objektet DOM bëhen pronat e tij, vetitë e vetive të tij, etj. Ata quhen gjithashtu nyjet DOM.

Nyjet DOM

NË DOM niveli 2 ka 12 lloje nyjesh. Pas secilit lloj nyje DOM konstante fikse me emër unik. Shumica e nyjeve janë të dizajnuara për të punuar me të XML... Në kuvend HTML - JavaScriptme të cilën kemi të bëjmë, mund të përdoren vetëm 5 lloje. Por edhe kjo "majë e ajsbergut" është një "pemë shumë e përhapur" që nuk mund të mbulohet në një ose dy seanca.

Komplet i plotë i konstanteve të tipit të nyjeve siç përcaktohet në specifikim W3C DOM (nyjet në dispozicion për HTML - JavaScript):

Emri konstant

Vlera

Përshkrim

Nyja.ELEMENT_NODE

Nyja e elementit (kthen elementin rrënjësor të dokumentit, për dokumentet HTML ky është elementi HTML)

Nyja.ATTRIBUTE_NODE

Nyja e atributit (kthen një atribut të një elementi në një dokument XML ose HTML)

Nyja e tekstit (#text)

Nyja.CDATA_SECTION_NODE

Nyja e Seksionit CDATA (XML: Sintaksa alternative për shfaqjen e të dhënave të personazheve)

Nyja.ENTITY_REFERENCE_NODE

Nyja.ENTITY_NODE

Nyja e seksionit

Nyja.PROCESSING_INSTRUCTION_NODE

Nyja e Direktivës XML

Nyja.COMMENT_NODE

Nyja e komentit

Nyja.DOCUMENT_NODE

Nyja e dokumentit (baza për qasjen në përmbajtjen e dokumentit dhe krijimin e përbërësve të tij)

Nyja.DOCUMENT_TYPE_NODE

Nyja e tipit të dokumentit (kthen llojin e dokumentit të dhënë, d.m.th. vlerën e etiketës DOCTYPE)

Nyja.DOCUMENT_FRAGMENT_NODE

Nyja e fragmentit të dokumentit (nxjerrja e një pjese të pemës së dokumentit, krijimi i një fragmenti të ri të dokumentit, futja e një fragmenti si fëmijë i një nyje, etj.)

Nyja.NOTATION_NODE

Nyja e shënimit *

* Shënimet janë emra që identifikojnë formatin e seksioneve të paparashikuara, formatin e elementeve që kanë një atribut të shënimit ose aplikacionin të cilit i drejtohet një direktivë. (Nuk është e qartë? As unë nuk jam shumë i mirë në këtë.)

Struktura e dokumentit në DOM

Të gjitha objektet e dokumenteve janë nyje DOM. Merrni parasysh një dokument elementar:

< title>DOM

"center"\u003e Titulli

Teksti i paragrafit

Këtu keni një diagram të pemës së saj DOM:

Çdo nyje mund të ketë nyje fëmijë (shigjetat i çojnë ato në diagram). Objekti i dokumentit - baza e pemës së dokumentit - është gjithashtu një nyje, por nuk ka një nyje mëmë dhe ka një numër vetish dhe metodash që nyjet e tjera nuk i kanë. Ka një nyje fëmijë: element .

Element dy nyje fëmijësh: dhe , për të cilat të gjithë elementët që ato përmbajnë bëhen fëmijë.

Vëmendje!

"Elementi" dhe "etiketa" nuk janë sinonime. Një etiketë është një shenjë e shënimit: ato janë dy etiketa të ndryshme. Dhe një element është një objekt i shënuar me këto etiketa:

Teksti i paragrafit

.

Elementet , <h1> dhe <p>Përmbajnë brenda vetes <b>teksti</b>... Këta janë fëmijët e tyre <b>nyjet e tekstit</b>... Element <h1> Ka gjithashtu <b>atribut</b>: align \u003d "qendra". <b>Nyjet e atributeve</b> janë edhe nyje fëmijë të elementeve që i përmbajnë ato.</p> <p>Kur punoni me nyjet e pemës DOM, përdoren vetitë dhe metodat e tyre.</p> <h4>Disa veti të nyjeve</h4> <p>Hyrje e vogël</p> <p>E përsëris edhe një herë: kur u referohemi elementeve të faqeve në skripta, kemi të bëjmë jo vetëm me gjuhën Javascript, por edhe me ndërfaqen e ngulitur në të. <b>DOM</b>... Ndonjëherë duhet të jeni të vetëdijshëm për këtë, ndonjëherë mund të harroni "atë që themi në prozë".</p> <p>Disa veti dhe metoda nga modeli i objektit <b>DOM</b> ne tashmë e kemi përdorur këtë mënyrë. Prandaj, herë pas here do të jap lidhje me mësimet e mëparshme.</p> <p>Në këtë manual, ne nuk do të shkojmë në rrugën "akademike", duke marrë parasysh të gjitha vetitë e të gjitha nyjeve në të gjithë shfletuesit. Së pari, le të njihemi me më praktikat dhe "pa konflikte" prej tyre.</p> <p>Kjo është arsyeja pse <b>ne nuk do të</b> filloni, siç është zakon, me "vetitë themelore": <b>nyjaEmri</b> dhe <b>nyjaVlera</b>.</p> <p>emri i etiketës</p> <p>Kthen një varg me emrin e etiketës së elementit. Të gjitha vlerat e emrave të etiketave përmbajnë vetëm karaktere të mëdha.</p> <p><b>Sintaksë</b></p> <i>element</i>.<b>emri i etiketës</b> <p><b>Shembull</b></p> <span><!-- Вставим <span>, чтобы имя было не из одной буквы. --> </span> <p><span id= "testTagName" > Testimi i pronës tagName</p> <p> </span> <span><script type="text/javascript"> </span> document.<b>write </b>(document.<b>getElementById </b>(<i>"testTagName" </i>).tagName) </script> </p> <p><b>Rezultati</b></p> <p>Testimi i pronës tagName</p> <p>e brendshmeHTML</p> <p>Ne tashmë e kemi hasur këtë pronë (shih Mësimi 10). Dhe tani ne e kuptojmë se nga erdhi: "nga shtëpia".</p> <p>Jep akses në përmbajtjen e elementit. Përcakton jo vetëm përmbajtjen tekstuale, por të gjitha etiketat HTML që janë brenda elementit.</p> <p>Kjo pronë nuk është vetëm e lexueshme, por edhe për ndryshimin e përmbajtjes.</p> <p>shënim</p> <p>Në IE për një sërë elementesh <b>e brendshmeHTML</b> punon vetëm për lexim: këto janë të gjitha sendet e tryezës përveç <td> dhe <th> , dhe <title> dhe <frameset> .</p> <p>Për shembull, ne krijuam një tryezë të zbrazët pa asnjë element <td> dhe ne duam ta fusim atë në mënyrë programatike <tr> përmes <b>e brendshmeHTML</b>:</p> <p><html><br> <head></head><br> <body onload= </span><span>"document.getElementById (" provë "). innerHTML \u003d" <td>varg provë</td>"" </span>> <br><table><br> <tr id= "test" ></tr><br> </table> <br></body><br> </html> </p> <p>IE do të hedhë një "gabim të panjohur të ekzekutimit" dhe shfletuesit e tjerë do të futen.</p> <p>Në ndërkohë, nëse kërkojmë përmbajtjen ekzistuese të elementit <tr> , për shembull, përmes <span>alarm (document.getElementById ("id"). innerHTML)</span>atëherë në IE do të funksionojë.</p> <p><b>Sintaksë</b></p> <i>element</i>.<b>e brendshmeHTML</b> = <i>"teksti i caktuar"</i> <p><b>Shembull</b></p> <table class="code"><tr><td><span><!-- читаем текст отсюда<br> (исходный элемент делаем невидимым) --> </span><br><p style= "display: none;" id= "testInnerHTML" ><b style= "color: red;" > Testimi i pronës së brendshmeHTML</b></p> <br><span><!-- вставляем его сюда --> </span><br><p id= "target" >Paragrafi për të futur</p> <br><span><script type="text/javascript"> </span><br><span>// Эта функция читает текст и вставляет его в заданный абзац. </span><br>function testRead() { <br> document.<b>getElementById </b>(<i>"target" </i>).innerHTML = document.<b>getElementById </b>(<i>"testInnerHTML" </i>).innerHTML<br><span>}<br><span>// Эта функция изменяет текст заданного абзаца. </span><br> function </span> testChange() { <br> document.<b>getElementById </b>(<i>"target" </i>).innerHTML = <i>"<span style="color: blue;">Перекрашиваем и меняем текст</span>" </i><br><span>}<br><span>// Эта функция возвращает свойство в исходное положение. </span><br> function </span> testReset() { <br> document.<b>getElementById </b>(<i>"target" </i>).innerHTML = <i>"Абзац для вставки" </i><br>} <br></script> <br><form><br> <input type= "button" value= <span>"lexo HTMLHTML"</span> onClick \u003d "testRead ();" \u003e\u003e <br> <input type= "button" value= "ndryshimi i brendshëm HTML" onClick= "testChange();" ><br> <input type= "button" value= "shkarkimi" onClick= "testReset();" ><br> </form> </td> </tr></table><p><b>Testimi i pronës së brendshmeHTML</b></p> <p>Paragrafi për të futur</p> <p><b>e brendshmeHTML</b><br> teksti var \u003d element.innerHTML; <br> element.innerHTML \u003d ""; <br> Caktimi i një HTMLH të ri të brendshëm do të mbishkruajë kodin edhe nëse vlera e re i shtohet asaj aktuale (+ \u003d). Skriptet e shtuara në këtë mënyrë nuk ekzekutohen.</p> <p><b>e jashtmeHTML</b><br> Përmban të gjithë elementin, nuk mund të ndryshohet. Teknikisht, shkrimi në këtë pronë krijon një element të ri që zëvendëson atë të vjetër. Referencat për elementin e vjetër në variabla nuk ndryshohen.</p> <p><b>të dhëna</b><br> textNode.data - përmbajtja e nyjeve të tekstit dhe komenteve</p> <p><b>teksti Përmbajtja</b><br> element.textPërmbajtja - teksti brenda elementit pa etiketa. <br> Ekziston gjithashtu një pronë e brendshmeText e personalizuar që ka shumë të përbashkëta me përmbajtjen e tekstit.</p> <h2>Dukshmëria e elementit</h2> <p><b>i fshehur</b><br> element.fshehur \u003d e vërtetë <br> Atributi i fshehur nuk mbështetet në IE11.</p> <h2>Atributet</h2> <p>Shumica e atributeve standarde në DOM bëhen veti të objektit: <br> element.id \u003d "id" <br> Asnjë pronë nuk është krijuar për atribute jo standarde (e papërcaktuar)</p> <p>Ju mund të krijoni vetitë tuaja DOM: <br> element.myData \u003d (emri: "John", Mbiemri: "Smith"); <br> dhe metodat: <br> element.myFunc \u003d funksioni () (njoftoni këtë.Emri i nyjes); <br> Kjo funksionon sepse nyjet DOM janë objekte të rregullta JavaScript. Veti dhe metoda të tilla jo standarde nuk ndikojnë në shfaqjen e etiketës dhe janë të dukshme vetëm në JavaScript.</p> <p><b>Përdorimi i atributeve të etiketave:</b><br> element.hasAribute (emri) <br> element.getAttribute (emri) <br> element.setAttribute (emri, vlera) <br> element. hiqni atributin (emri) <br> elementi.tributet është një grup pseudo-atributesh.</p> <p>Atributet nuk janë të ndjeshme në shkronja të mëdha (html) dhe vetitë janë të ndjeshme (javaScript). <br> Vlera e atributit është gjithmonë një varg.</p> <p>Atributi: a.getAttribute ("href") - tregon saktësisht atë që është në HTML <br> Prona: a.href - mund të ndryshojë nga vlera e atributit <br> Më shpesh, një pronë varet nga një atribut, por jo anasjelltas. Ndryshimi i pronës nuk ndikon në atributin.</p> <h3>Puna me klasa</h3> <p>Atributi i klasës ka dy veti: <br> Emri i klasës - varg <br> classList - objekt</p> <p>metodat e objektit classList: <br> element.classList.contains ("klasa") - kontrolloni nëse objekti përmban klasën e dhënë <br> element.classList.add ("klasa") <br> element.classList.remove ("klasa") <br> element.classList.toggle ("klasa")</p> <p>classList është një pseudo-grup dhe mund të përsëritet përmes një loop for.</p> <h3>atributet e të dhënave</h3> <p>Atributet e të dhënave të personalizuara janë të disponueshme jo vetëm si atribute, por edhe përmes vetisë së të dhënave <br> data-about \u003d "disa vlera" <br> element.dataset.rreth</p> <h2>Rendi i nyjeve</h2> <p>prindi.përmban (fëmijë) - e vërtetë apo e gabuar <br> kontrollon nëse nyja e fëmijës është e vendosur në prind</p> <p>nodeA.compareDocumentPosition (nodeB) - Jep informacion në lidhje me përmbajtjen dhe rendin relativ të elementeve. Vlera e kthimit është një maskë bitwise:</p> <h2>Shtimi dhe heqja e nyjeve</h2> <p>var div \u003d document.createElement ("div") <br> document.createTextNode ("teksti")</p> <p>prindi.appendChild (element) - elementi shtohet në fund të prindit <br> prindi.insertBefore (elementi, nextSibling) - elementi shtohet paraSibling next <br> prindi.inerBefore (elementi, prindi.fëmija i parë) - shtuar në fillim <br> prindi.inerBefore (element, null) - punon si appendChild <br> Të gjitha metodat e insertimit kthejnë nyjen e futur. <br> Kur lëvizni një element, nuk keni nevojë ta hiqni më parë nga vendi i vjetër, metodat e futjes e bëjnë këtë automatikisht.</p> <p>element.insertAdjacentHTML (ku, html) - fut kodin HTML arbitrar kudo në dokument. Ku specifikon se ku duhet futur html në lidhje me elementin - paraBegin, afterBegin, beforeEnd, afterEnd. <br> element.insertAdjacentElement (ku, newElement) <br> element.insertAdjacentText (ku, teksti) <br> dy metodat e fundit nuk mbështeten në Firefox</p> <p>nyja. shtoni (... nyjet) - fut nyjet në fund të një nyje, <br> nyja.prepend (... nyjet) - fut nyjet në fillim të një nyje, <br> nyja. pas (... nyjet) - fut nyjet pas nyjes, <br> nyja. para (... nyjeve) - fut nyjet para nyjes, <br> nyja.vendosimMe (... nyjet) - fut nyjet në vend të nyjes. <br> këtu nyjet janë nyje ose vargje, në çdo sasi dhe kombinim, të ndara me presje.</p> <p>fra fragment \u003d document.createDocumentFragment () është një imitim i një nyjeje DOM që zhduket kur futet në një dokument, duke lënë vetëm fëmijët e tij. Nuk rekomandohet në shfletuesit modernë.</p> <p>element.cloneNode (e vërtetë) - kopje e thellë e elementit <br> element.cloneNode (false) - kopjoni pa fëmijë</p> <p>prindi. heq fëmijën (element) <br> prindi. zëvendësimi i fëmijëve (elementi i ri, elementi) <br> element.remove () - heq elementin direkt, pa iu referuar prindit. <br> Metodat kthejnë nyjen e largët</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </div> </div> </div> </div> </div> </div> <div class="tm_sidebar"> <div class="sidebar_home"> <div class="gsense"> <div id="mymaju1" style="height:500px;width:300px;" align="center"></div> </div> <div class="sidebarwidget"> <ul> <li id="text-3" class="widget widget_text"> <div class="textwidget"> <div class="sidebar-orange">Kategoritë</div> </div> </li> <li id="nav_menu-3" class="widget widget_nav_menu"> <div class="menu-pravoe-menyu-nizhnee-container"> <ul id="menu-pravoe-menyu-nizhnee" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/windows-10/">Windows 10</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/browsers/">Shfletuesit</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/smartphones/">Telefonat inteligjentë</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/antivirus/">Antivirus</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/onroad/">OnRoad</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/terms/">Kushtet</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/apple/">Mollë</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/program/">Programet</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/category/ios/">Ios</a></li> </ul> </div> </li> </ul> </div> <div class="sidebarwidget"> <ul> <li id="text-3" class="widget widget_text"> <div class="textwidget"> <div class="sidebar-orange">Popullore</div> </div> </li> <li id="nav_menu-3" class="widget widget_nav_menu"> <div class="menu-pravoe-menyu-nizhnee-container"> <ul id="menu-pravoe-menyu-nizhnee" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/windows-10/kak-zarabatyvat-na-rolikah-v-yutube-kak-zarabotat-na-yutub-kanale/">Si të fitoni para në një kanal në YouTube: sekretet e yjeve të YouTube</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/network/realnye-avtomaticheskie-programmy-dlya-zarabotka-deneg-v/">Bërja e parave në përpunim Si të fitoni para ulur në kompjuter</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/printers/pristavka-dvb-t2-chto-za-perfeo-pravilnoe-podklyuchenie-i-nastroika-dvb-t2/">Lidhja e saktë dhe konfigurimi i set-top kutive DVB-T2</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/internet/pravilnoe-podklyuchenie-i-nastroika-dvb-t2-pristavki-pravilnoe-podklyuchenie-i/">Lidhja e saktë dhe konfigurimi i një set-top boxi DVB-T2 Si përfundim</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/terms/perfeo-dvb-t2-pristavka-dlya-cifrovogo-tv-pravilnoe-podklyuchenie-i-nastroika-dvb-t2/">Lidhja e saktë dhe konfigurimi i set-top kutive DVB-T2</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/ios/portativnaya-akustika-jbl-go-black-otzyvy-besprovodnaya-akustika-jbl-go-black-jblgoblk--/">Altoparlantë me valë JBL GO Black (JBLGOBLK) - Shqyrtime</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/internet/vvody-k-silovym-transformatoram-vvody-vysokovoltnye-vst-vsta/">Shtrëngime të tensionit të lartë vt, vsta, vtb</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/printers/vysokochastotnaya-svyaz-po-lep-sistemy-vysokochastotnoi-svyazi-v-sovremennoi/">Sisteme komunikimi me frekuencë të lartë në industrinë moderne të energjisë elektrike Pajisjet e përpunimit me frekuencë të lartë</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/program/cifrovaya-sistema-vch-svyazi-po-lep-mc04-plc-sistemy-vysokochastotnoi/">Sisteme komunikimi me frekuencë të lartë në industrinë moderne të energjisë elektrike Pajisjet e komunikimit me frekuencë të lartë</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://3ddroid.ru/sq/smartphones/shkolnyi-radiouzel-rush-1-30-200vt-osnashchaem-shkolnyi-radiouzel-obyazatelnaya-ssylka-v-dokumentacii/">Pajisja e një qendre radio shkollore</a></li> </ul> </div> </li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer_brick"> <div class="footer_brick_box"> <div class="footer_brick_1"> <div class="footerwidget"> <ul> </ul> </div> </div> <div class="footer_brick_3"> <div class="footerwidget"> <ul> </ul> </div> </div> </div> </div> <div class="footerin"> <div class="footerin_1"> <span> © 2020 Gadgets Mobile dhe Kompjuterike</span> </div> </div> </div> </div> <script> jQuery(document).ready(function() { jQuery("img.lazy").lazy(); }); </script> <script type='text/javascript'> /* <![CDATA[ */ var thickboxL10n = { "next": "\u0414\u0430\u043b\u0435\u0435 \u2192", "prev": "\u2190 \u041d\u0430\u0437\u0430\u0434", "image": "\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435", "of": "\u0438\u0437", "close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c", "noiframes": "\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.", "loadingAnimation": "https:\/\/3ddroid.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif" }; /* ]]> */ </script> <script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='/wp-includes/js/backbone.min.js?ver=1.2.3'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/plugins/custom-contact-forms/wp-api/wp-api.js?ver=1.2'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/menu.js?ver=1.0'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/scrolltotop.js?ver=1.0'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/responsive_nav.js?ver=1.0'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/jquery-menuscrolltofixed.js?ver=1.0'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/search.js?ver=0.1'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/jquery.bxslider.min.js?ver=4.1'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/jquery_bxslider_min_load.js?ver=4.1'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/jquery.swipebox.js?ver=1.0'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/swipebox-ios-orientationchange-fix.js?ver=1.0'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/jquery_swipebox_min_load.js?ver=1.0'></script> <script type='text/javascript' src='https://3ddroid.ru/wp-content/themes/blueblog/js/jquery.lazy.min.js?ver=0.1.6'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.4'></script> </body> </html>