A Document Object Model (DOM) egy HTML-dokumentum strukturális reprezentációja. A DOM egy csomópontok faja, amelyet a böngésző az internet minden egyes weboldalához hoz létre.

A DOM objektum-orientált. A DOM minden elemének saját attribútum- és metóduskészlete van, amelyeket JavaScript használatával érhet el.

Ebből az oktatócikkből megtudhatja, hogyan használhatja a DOM-választó funkciókat a weboldal elemeinek eléréséhez.

Hogyan lehet elérni a DOM-elemeket

A weboldal legfelső szintű DOM elemét a globális dokumentum objektumon keresztül érheti el. Például, ha van egy ilyen weboldala:

Üdvözöljük


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Ról ről


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Cikkek



Cikk első címe


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Olvass tovább 





Cikk második címe


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Olvass tovább 





cikk harmadik címe


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Olvass tovább 





Cikk negyedik címe


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Olvass tovább 

Gépelés dokumentum a böngészőkonzolban, és az Enter billentyű leütése a következő kimenetet eredményezi:

A konzol kimenete interaktív. rákattinthat a fej és test elemekkel bővíteni őket. Ez a következő kimenetet eredményezi:

Minden szakaszelem a címke is bővíthető. A weboldal szerkezetétől függően az elemek folyamatosan bővülnek, hogy további elemeket tárjanak fel. Ez jobb megértést biztosít a DOM szerkezetéről.

Összefüggő: A webhelyek rejtett hőse: A DOM megértése

A dokumentum objektumnak van egy speciális tulajdonsága, test, amely a test elemet képviseli. Tehát a body elem eléréséhez írja be a következőket a konzolba:

dokumentum.test

Ez a következő kimenetet eredményezi:

De ez ameddig el lehet jutni az objektumtulajdonságok használatával. Minden oldalnak van feje és törzse, de egyébként egyedi. Szóval gépelés dokumentum.test.szakasz vagy bármi hasonló egyszerűen nem fog úgy működni, ahogy szeretné. Ehelyett léteznek olyan metódusok, amelyek segítségével a dokumentumobjektum meghívható bizonyos elemekhez.

Mik azok a DOM elemválasztók?

A DOM-elemválasztók JavaScript-metódusok csoportja, amelyek segítségével a dokumentumobjektumban hozzáférhet egy weboldal elemeihez. A DOM-elem-választóknak két kategóriája van: egy- és több választó.

Ezek a funkciók a CSS-szelektorokhoz hasonlóan működnek. Lehetővé teszik az elemek lekérését a címkenév vagy az azonosító és az osztály attribútumai alapján. Sőt, bármilyen CSS-választó segítségével lekérhet elemeket.

Összefüggő: Weboldal egy részének megcélzása CSS-választókkal

Az egyelemes kiválasztók a következők:

• getElementById()
• querySelector()

A több elem választója a következő:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

A használt DOM-elemválasztó attól függ, hogy mely elem(ek)hez próbál hozzáférni.

Egyetlen DOM elem választó használata

Leginkább a JavaScript-alkalmazásokon belül láthat választókat. Tehát távolodjunk el a konzoltól. Hozzon létre egy JavaScript-fájlt, és kapcsolja össze HTML-fájljával a következő szkriptcímke használatával:

Ahol az src érték a JavaScript-fájl neve. Helyezze ezt a szkriptcímkét közvetlenül a záró body címke elé, .

A getElementById() metódus hozzáférést biztosít a weboldal egyetlen eleméhez az azonosító értékével. A fenti HTML dokumentumban számos azonosítóval rendelkező elem található. Megcélozni a div A „cikk-3” azonosítójú elemhez a következő kódot adhatja hozzá JavaScript-fájljához:

érték = document.getElementById('cikk-3')

Most a div elemet a cikk-3 Az azonosító és a hozzá tartozó összes tulajdonság elérhető a érték változó. Kinyomtathatja a érték változót a konzolhoz a következő kódsor használatával:

console.log (érték)

Látni fogja a div elemhez rendelt osztálynevet, valamint más fontos attribútumokat, például a belső HTML-t.

A másik egyelem választó a querySelector(). Ez a funkció sokoldalúbb, mivel bármilyen CSS-választó karakterláncot átadhat neki. Egyszerre azonban továbbra is csak egy elem kiválasztására használhatja.

Például a fenti HTML-elrendezésben egyetlen osztály található – a cikkek. Négy div elem használja ezt az osztályt, de a querySelector() függvény csak az első elemet adja vissza, amelyik rendelkezik a "cikkek" osztályával.

A querySelector() használata egy osztállyal

Adja hozzá a következő kódot a szkript végéhez:

érték = document.querySelector('.cikkek')
console.log (érték)

Ez csak az elsőt adja vissza div elem egy „cikk” osztállyal. Figyelje meg, hogy a választót ugyanabban a formátumban adja meg, mint a CSS-szelektort. A CSS-ben a vezető pont egy osztálynevet határoz meg.

A querySelector() használata azonosítóval

érték = document.querySelector('#cikk-3')
console.log (érték)

Ez a kód az egyetlen „article-3” azonosítójú elemet adja vissza, a harmadikat div elem egy „cikk” osztállyal. A választókarakterlánc ismét szabványos CSS-szintaxist használ, a # azonosítót meghatározó szimbólum.

Több DOM elemválasztó használata

A többi kiválasztó funkció elemcsoportokat kér le. Ők getElementsByTagName(), getElementsByClassName(), és querySelectorAll().

A getElementsByTagName() használata

A getElementsByTagName() A kiválasztó lekéri az azonos címkenévvel rendelkező elemek egy csoportját. Például, ha ki szeretné jelölni az összes h2 egy weboldal elemeit, a következő kódot használhatja:

érték = document.getElementsByTagName('h2')
console.log (érték)

Ez az összes h2 elemet egy value nevű HTML gyűjteményben tárolja.

A getElementsByClassName() használata

A getElementsByClassName() A szelektor azonos osztálynévvel rendelkező elemek gyűjteményét adja vissza.

érték = document.getElementsByClassName('cikkek')
console.log (érték)

A fenti kód beillesztése a JavaScript-fájlba a négy div elemet adja vissza a „cikk” osztálynévvel a böngészőkonzolon.

A querySelectorAll() használata

A querySelectorAll() metódus egy csomópontlistát ad vissza minden olyan elemről, amely megfelel az adott szelektornak. A blog szakasz összes bekezdéselemének eléréséhez használja a következő kódot:

érték = document.querySelectorAll('#blog p')
console.log (érték)

Akár több választót is beilleszthet a karakterláncba, mindegyiket vesszővel elválasztva, akárcsak a CSS-ben:

érték = document.querySelectorAll('h2, .articles')
console.log (érték)

Használjon DOM-választókat dinamikus weboldalak létrehozásához

Ezen a ponton világosan meg kell értenie a DOM-ot és annak működését. Ismernie kell a különböző egyszeres és többszörös választókat, valamint azok használatát.

Ennek ellenére a HTML-elemekhez való hozzáférés csak az első lépés abban, amit a DOM-választókkal megtehet. A DOM-választók nagyban hozzájárulnak webhelye funkcionális szempontjainak fejlesztéséhez, például az onclick és onscroll események kezeléséhez.

Hogyan teheti webhelyét reszponzívvá és interaktívvá CSS és JavaScript segítségével

Webhelyét HTML és CSS használatával állította be, de most logikát kell hozzáadnia. Íme, mit kell tenni.

Olvassa el a következőt

A szerzőről