Utolsó frissítés: 1.11.2015

A JavaScript DOM-struktúrájának használatához a dokumentumobjektumot a globális ablakobjektumban kell megadni. A dokumentumobjektum számos tulajdonságot és módszert biztosít az oldalelemek kezeléséhez.

Elemek keresése

A következő módszerek használhatók az oldalon lévő elemek keresésére:

getElementById(value) : kiválasztja azt az elemet, amelynek id attribútuma egyenlő az értékkel

getElementsByTagName(value) : kiválasztja az összes olyan elemet, amelynek a címkéje egyenlő az értékkel

getElementsByClassName(value) : kijelöli az összes olyan elemet, amelynek osztályértéke van

querySelector(value) : kiválasztja az első elemet, amely megfelel a css választó értékének

querySelectorAll(érték) : kijelöli az összes olyan elemet, amely megfelel a css választó értékének

Például, elemet találni azonosító szerint:

Blokkfejléc var headerElement = document.getElementById("fejléc"); document.write("Fejléc szövege: " + headerElement.innerText);

A document.getElementById("header") meghívásával megtaláljuk az id="header" elemet. Az innerText tulajdonság segítségével pedig megkaphatja a talált elem szövegét.

Keresés adott címke alapján:

fejléc

Első bekezdés

Második bekezdés

var pElements = document.getElementsByTagName("p"); for (var i = 0; i< pElements.length; i++) { document.write("Текст параграфа: " + pElements[i].innerText + "
"); }

A document.getElementsByTagName("p") meghívásával minden bekezdéselemet megtalálunk. Ez a hívás talált elemek tömbjét adja vissza. Ezért ahhoz, hogy a tömb egyes elemeit megkapjuk, ciklusban kell végigfutni rajtuk.

Ha csak az első elemet kell megszereznünk, akkor elérhetjük a talált objektumgyűjtemény első elemét:

VarpElement = document.getElementsByTagName("p"); document.write("Bekezdés szövege: " + pElement.innerText);

Elem beszerzése osztályonként:

Cikk címe

Első bekezdés

Második bekezdés

var articleDiv = document.getElementsByClassName("cikk"); console.log(articleDiv); var textElems = document.getElementsByClassName("szöveg"); for (var i = 0; i< textElems.length; i++) { console.log(textElems[i]); }

Választás szerint css választó:

Cikk absztrakt

Első bekezdés

Második bekezdés

varelem = document.querySelector(".annotation p"); document.write("Szövegválasztó: " + elem.innerText);

A document.querySelector(.annotation p") kifejezés talál egy elemet, amely megfelel a selector.annotation p -nek. Ha az oldalon több olyan elem is található, amely megfelel a választónak, akkor a metódus kiválasztja közülük az elsőt. Ennek eredményeként a böngésző a következőket jeleníti meg:

Cikk annotációja Első bekezdés Második bekezdés Kiválasztó szöveg: Cikk annotációja

A szelektor összes elemének megjelenítéséhez hasonlóképpen használhatja a document.querySelectorAll metódust, amely a talált elemek tömbjét adja vissza:

Cikk absztrakt

Első bekezdés

Második bekezdés

varelems = document.querySelectorAll(.text p"); for (var i = 0; i< elems.length; i++) { document.write("Текст селектора " + i + ": " + elems[i].innerText + "
"); }

Böngésző kimenet:

Cikk annotációja Első bekezdés Második bekezdés Kijelölő szöveg 0: Első bekezdés Kijelölő szöveg 1: Második bekezdés

A JavaScript dokumentum .querySelector() metódusa visszaadja a dokumentum első elemét (egy elem objektumot), amely megfelel a megadott választónak vagy kijelölők csoportjának. Ha nem található egyezés, nullát ad vissza.

Felhívom a figyelmet arra, hogy CSS pszeudoelemek nem használhatók kiválasztó értékként az elemek kereséséhez, ebben az esetben a visszatérési érték mindig null lesz.

Ha szüksége van egy listára az összes olyan elemről, amely megfelel a megadott kijelölőnek vagy választóknak, használja ehhez a querySelectorAll() metódust.

A .querySelector() metódus az Element objektumon is definiálva van, ezért bármely elemen meghívható, nem csak a dokumentum objektumon. Az az elem, amelyen meg van hívva, a keresés gyökérelemeként lesz használva.

Böngésző támogatja a JavaScript szintaxist: document .querySelector( válogatók) válogatók- String Specification Selectors API 1. szintű paraméterértékek Paraméter Leírás

válogatók

Az argumentumnak meg kell egyeznie egy érvényes kiválasztó karakterlánccal, amely egy vagy több választót tartalmaz. Több választó megadásakor az értékeket vesszővel kell elválasztani. Ebben az esetben az adott szelektorok közül az első talált elem kerül kiválasztásra. Ha valamilyen okból olyan karaktereket használ a kiválasztók nevében, amelyek nem részei a szabványos szintaxisnak css, akkor az ilyen karaktereket fordított perjellel ( "\" ). Mivel a fordított perjel is különleges karakter (menekülni) V JavaScript, akkor a literális karakterlánc beírásakor kétszer kell kihagyni. Kötelező paraméter.

Kivételek Használati példa a JavaScript document.querySelector() metódusának használata Click Me First Block Második blokk Harmadik blokk függvény myFunc() ( hadd firstBlock = document .querySelector(.block "), // jelölje ki az elemet osztályblokk elsőként = document .querySelector( ".first, .block "), // keresse meg az első elemet a megadott kijelölők közül second = document .querySelector("div:nth-of-type(2) "), // válassza ki az egyes div elemeket, amelyek a második gyermek saját szülőelemének harmadik = document .querySelector("div:last-of-type "); // minden div elem megkeresése, amely a szülőelemének utolsó eleme firstBlock.style.background = "fekete"; // az elem háttérszínének módosítása első.style.color = "piros"; második.style.color = "zöld"; // módosítja az elem szövegszínét harmadik.style.color = "kék"; // az elem szövegszínének módosítása )

Ebben a példában az onclick esemény attribútumot használjuk, amikor a gombra kattintunk ( HTML elem) hívjuk a myFunc() függvényt, amely segítségével JavaScript A dokumentum .querySelector() metódusa a következő elemeket választja ki:

• Első elem osztály blokkal a dokumentumban és halmazban fekete a talált elem háttérszíne.
• Első elemet a megadott kijelölőkből (elem első osztályú elemmel , osztályblokk elemmel ), és állítsa be a talált elem szövegszínét pirosra. Ebben az esetben ez lesz kiválasztva első a talált elemet az adott szelektorokból.
• Az elem, ami van második szülőelemének gyermekeleme, és beállítva talált elemre zöld szöveg szín.
• Az az elem, amely a szülőelem utolsó eleme, és a talált elemre van állítva kék szöveg szín.

Példánk eredménye.

Mint tudják, egy nagy JS-alkalmazás fejlesztése során, amely a legnépszerűbb jQuery könyvtárat használja, eljön az idő, amikor a teljesítményprobléma akuttá válik. Minden erő a profilozó kiskapujába rohan, minden hívást alaposan megvizsgálnak, minden funkcionálisan betöltött megvalósítási darabot minden oldalról megszagolnak és kiegyenesítenek. De a baj a rossz oldalról jön, ahol a fejlesztők 90%-a ezt várja. Választók – Hány ebben a szóban.
Nézzük meg, hogyan működik ez a varázslat, és miért okozhatják a DOM-elemek keresései az alkalmazások teljesítményének csökkenését.

Hogyan elemzi a jQuery a kiválasztót A könyvtár maga a Sizzle motort használja az elemek keresésére, amely számos funkcióval rendelkezik. Vessen egy pillantást rájuk. querySelectorAll() Az új böngészők már rendelkeznek a kiváló querySelectorAll() és querySelector() függvényekkel, amelyek a böngésző képességeit használva képesek elemeket keresni (különösen a CSS megtekintésére és az elemekhez tulajdonságok hozzárendelésére használtakat) . Művek adott funkciót nem minden böngészőben, hanem csak FF 3.1+ , IE8+ esetén (csak IE8 szabványos módban), Opera 9.5+ (?) és Safari 3.1+ . Tehát a Sizzle mindig észleli ennek a funkciónak a jelenlétét, és megpróbálja végrehajtani a keresést rajta. Ez azonban nem mentes meglepetésektől – a querySelectorAll() sikeres használatához a szelektorunknak érvényesnek kell lennie.
Mondok egy egyszerű példát:
A két látható választó gyakorlatilag ugyanaz, és ugyanazt az elemkészletet adja vissza. Az első választó azonban a querySelectorAll() eredményét adja vissza, a második pedig a normál elemek szerinti szűrés eredményét.
$("#my_űrlap bevitel")
$("#my_form input") Kiválasztó elemzése és keresése Ha a querySelectorAll() sikertelen, a Sizzle megpróbálja használni a normál böngészőfüggvényeket getElementById(), getElementsByName(), getElementsByTagName() és getElementByClass(). A legtöbb esetben elég, de (sic!) IE-ben< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
Általában a Sizzle jobbról balra elemzi a választót. Íme néhány példa a funkció illusztrálására:
$(.divs .my_class")
Először a .my_class elemeket találja meg, majd csak azokat szűri ki, amelyeknek a szüleiben .div van. Amint látjuk, ez egy meglehetősen költséges művelet, és a kontextus használata nem oldja meg a problémát (a kontextusról lentebb lesz szó).
Mint mondtam - a legtöbb esetben a Sizzle jobbról balra elemzi a választót, de nem azonosítóval rendelkező elem használata esetén:
$("#divs .my_class")
Ebben az esetben a választó a várt módon fog viselkedni, és a #divs elem azonnal felhasználható kontextusként Kontextus A második paramétert, amelyet a választóval együtt a $() függvénynek továbbítunk, kontextusnak nevezzük. Úgy tervezték, hogy szűkítse az elemek keresését. Az elemzés során azonban a kontextus a választó elejéhez kapcsolódik, ami egyáltalán nem ad nyerést. A kontextus használatának nyerő kombinációja a querySelectorAll() érvényes választója, mivel ez a függvény nem csak a dokumentum nevében, hanem az elemen is alkalmazható. Ezután a kontextussal rendelkező szelektor képletesen a következő konstrukcióvá alakul:
$(.divs", document.getElementById("wrapper"));
document.getElementById("wrapper").querySelectorAll(.divs"); // használja a querySelectorAll() függvényt, ha lehetséges

BAN BEN ezt a példát ha nem lehetséges a querySelectorAll() használata, a Sizzle egyszerű iterációval szűri az elemeket.
Még egy megjegyzés a kontextussal kapcsolatban (nem a kiválasztókkal kapcsolatban) - ha a .live() függvény szelektorának második paramétere egy jQuery objektum, akkor az esemény elkapja a dokumentumot (!), Ha pedig a DOM objektum, akkor a esemény csak ehhez az elemhez fog felbukkanni. Igyekszem nem emlékezni az ilyen finomságokra, hanem a .delegate() -t használom.

Szűrők és elemhierarchia A következő választó segítségével kereshet beágyazott elemeket:
$(".root > .child")
Mint tudjuk, a szelektor elemzésre kerül, és a keresés az oldalon lévő összes .child elemen elindul (feltéve, hogy a querySelectorAll() nem érhető el). Egy ilyen művelet meglehetősen költséges, és a szelektort így alakíthatjuk át:
$(".child", $(.root")); // A kontextus használata nem teszi könnyebbé a keresést
$(".root").find(.child"); // miért kell a .root-on belüli összes elemet iterálnunk?
$(.root").children(.child"); // a leghelyesebb opció

Ha azonban szükség van szűrők használatára néhány attribútumnál (:visible, :eq, stb.), és a választó így néz ki:
$(.some_images:visible")
akkor a szűrő kerül utoljára - pl. ismét eltérünk a jobbról balra szabálytól.

Eredmények

• Amikor csak lehetséges, használjon megfelelő kiválasztókat, amelyek megfelelnek a querySelectorAll()
• Cserélje le a kijelölőkön belüli segédlekérdezéseket segédlekérdezésekkel (.childs(...) stb.)
• A választó kontextusának finomítása
• Szűrje le a lehető legkisebb kész elemkészletet

Gyors válogatók nektek az új évben! Minden a jövőben!

A mesterkurzus alapján

Ahhoz, hogy a szkript működjön az oldal valamely elemével, először ezt az elemet kell megtalálni. Ezt többféleképpen is megteheti JavaScriptben. A talált elemet általában hozzárendeljük egy változóhoz, és később ezen a változón keresztül a script hozzáfér az elemhez, és végrehajt vele néhány műveletet.

Keresés azonosító alapján

Ha az elemhez id attribútumot adunk az oldal kódjában, akkor az elem az id alapján található. Ez a legegyszerűbb módja. Az elem keresése a dokumentum globális objektum getElementById() metódusával történik.

document.getElementById(id)

Lehetőségek:

id - a keresendő elem azonosítója. Az id egy karakterlánc, ezért idézőjelben kell lennie.

Hozzunk létre egy oldalt, adjunk hozzá egy elemet és adjunk neki egy azonosítót , és keressük meg ezt az elemet a szkriptben:

HTML kód:

JavaScript:

var blokk = document.getElementById("blokk"); konzolnapló(blokk);

A blokkváltozóhoz rendeltük a talált elemet, és megjelenítettük a változót a konzolban. Nyissa meg a böngésző konzolt, annak tartalmaznia kell az elemet.

Mivel az azonosító szerinti keresés a legegyszerűbb és kényelmes módja, gyakran használja. Ha valamilyen elemmel kell dolgoznia egy szkriptben, akkor az id attribútum ehhez az elemhez lesz beállítva az oldal kódjában, még akkor is, ha korábban nem volt beállítva. És keresse meg az elemet azonosítóval.

Keresés osztály szerint

A getElementsByClassName() metódus lehetővé teszi egy adott osztályhoz tartozó összes elem megtalálását.

document.getElementsByClassName(osztály)

Lehetőségek:

osztály - a megtalálandó elemek osztálya

A metódus a talált elemeket tartalmazó pszeudotömböt ad vissza. Pszeudotömbnek hívják, mert sok tömbmódszer nem működik rá. De a fő tulajdonság megmarad - a tömb bármely elemére hivatkozhat. Még ha csak egy elemet találunk is, az továbbra is benne van a tömbben.

Adjunk hozzá elemeket az oldalhoz, és adjunk nekik osztályt. Egyes elemek a korábban létrehozott blokkon belül lesznek elhelyezve. A másik rész a blokkon kívül jön létre. Ennek jelentése kicsit később derül ki. Az oldal most így fog kinézni:

HTML kód:

JavaScript:

Most csak azok az elemek találhatók, amelyek a blokkban találhatók.

Keresés címke alapján

A getElementsByTagName() metódus megkeresi az összes elemet egy adott címkével. A talált elemekkel egy pszeudotömböt is ad vissza.

document.getElementsByTagName (címke)

Lehetőségek:

tag - a keresendő elemek címkéje

Keressük meg az oldalon található összes p címkét:

var p = document.getElementsByTagName("p"); konzolnapló(p);

Ez a módszer nem a teljes dokumentumra, hanem egy adott elemre alkalmazható. Keresse meg az összes p címkét a blokkban.

Keresés választóval

Léteznek querySelector() és querySelectorAll() metódusok, amelyek megkeresik az adott szelektornak megfelelő elemeket. Ez azt jelenti, hogy a rendszer olyan elemeket fog találni, amelyekre a stílust alkalmazták volna, ha egy ilyen szelektorhoz adták volna meg. Ugyanakkor egy ilyen választó jelenléte az oldalstílusban egyáltalán nem szükséges. Ezeknek a módszereknek semmi közük a CSS-hez. A querySelectorAll() metódus megtalálja az összes olyan elemet, amely megfelel a választónak. És a querySelector() metódus talál egy elemet, amely az oldalkód első eleme. Ezek a módszerek helyettesíthetik a korábban tárgyalt elemek keresésének összes módját, mivel létezik azonosító-választó, címkeválasztó és sok más.

document.querySelector(selector)

document.querySelectorAll(választó)

A kijelölőket ugyanúgy írják, mint a CSS-ben, csak ne felejts el idézőjeleket tenni.

Adjunk hozzá egy listát az oldalhoz, és keressük meg a választó segítségével. Csak egy elemet keresünk, és biztosan tudjuk, hogy ez lesz az első, mert ez az egyetlen az oldalon. Ezért be ez az eset kényelmesebb a querySelector() metódus használata. Ennek a módszernek a használatakor azonban figyelembe kell vennie, hogy a jövőben ugyanazok az elemek hozzáadhatók az oldalhoz. Ez azonban a legtöbb módszerre vonatkozik.

HTML kód:

Ezek a módszerek nem a teljes dokumentumban, hanem egyetlen elemen belül is kereshetnek elemeket.

A példában csak címke szerinti szelektorokat használtunk. Próbáljon oldalelemeket keresni más választókkal.

Szomszédos elemek

A talált elemhez szomszédokat találhat. Minden elem egy objektum, és a szomszédos elemek az objektum tulajdonságain keresztül szerezhetők be. A previousElementSibling tulajdonság tartalmazza az előző elemet, a nextElementSibling tulajdonság pedig a következő elemet.

element.previousElementSibling

elem.nextElementSibling

Keresse meg az elemet a blokk után:

Gyermek elemek

A gyermekek birtokában egy sor gyermek található.

elem.gyerekek

Keresse meg a blokk gyermekelemeit.

A kezdő JavaScript-fejlesztők gyakran szembesülnek azzal a feladattal, hogy egy weboldal elemet válasszunk ki az id attribútum alapján.

Tegyük fel, hogy van kódunk egy oldalon.

Tartalom letiltása.

Hogyan jelölhetek ki egy elemet az id="elem"-vel és hajthatok végre vele néhány műveletet?

Itt több lehetőség is van a probléma megoldására. Most vessünk egy pillantást rájuk.

1. lehetőség Használat Javascript módszer getElementById.

Lehetőség van egy elemhez az azonosítójával hozzáférni "tiszta" JavaScript kóddal, harmadik féltől származó könyvtárak használata nélkül. Ez a metódus a ggetElementById("element_id") metódus használata. Így a szükséges elemre az id-vel hivatkozunk.

Nézzük meg, hogyan működik ez egy egyszerű példán.

Tartalom letiltása. alert(document.getElementById("elem").innerHTML);

Vegye figyelembe, hogy ezek a kódsorok (script) maga az elem alatt találhatók. Ez a szkript működésének előfeltétele, mert. A Javascript kód az oldal betöltésekor fut le. Ha a fenti kódot elhelyezzük, akkor az oldalon egy olyan elemre fogunk hivatkozni, amely még nem töltődött be, pl. nem lesz benne a kódban a szkript végrehajtásakor. Vannak módszerek ennek elkerülésére, de ez túlmutat e cikk keretein.

Ennek eredményeként, ha minden megfelelően működik, egy felugró ablakot kapunk. Ez az ablak megjeleníti a div blokkon belüli szöveget.

Most nézzük meg, hogyan oldhatjuk meg ezt a problémát más módon.

2. lehetőség: Használat jquery könyvtárak.

A második lehetőség egy elem azonosítója alapján történő kiválasztására a Jquery könyvtár használata. A gyakorlatban a modern szkriptekben ezt a módszert használják leggyakrabban. Sokkal kényelmesebb és könnyebben megjegyezhető.

Ahhoz, hogy egy elemre az azonosítójával hivatkozhasson, a következő konstrukciót kell használnia:

$("#elem")

Itt az elem az id attribútumban szereplő név.

Mert Mivel harmadik féltől származó Jquery nevű Javascript-könyvtárat fogunk használni, először ezt a könyvtárat kell belefoglalni.

Hozzáadjuk a szakaszhoz, ennek egyik módja a következő kódsor hozzáadása:

A könyvtár betöltéséhez internetkapcsolatnak kell lennie.

Tartalom letiltása. figyelmeztetés($("#elem").html());

Magának a szkriptnek, mint az előző példában, annak az elemnek a kódja alatt kell lennie, amellyel kapcsolatba kíván lépni.

Így két módszert elemeztünk, hogyan választhat ki egy elemet a weboldalon az id attribútum alapján, és hogyan tud vele kommunikálni. Válassza ki az Önnek megfelelő módszert, és használja a gyakorlatban.