Aby skript fungoval s nejakým prvkom stránky, musí sa tento prvok najskôr nájsť. Existuje niekoľko spôsobov, ako to urobiť v JavaScripte. Nájdený prvok je zvyčajne priradený k premennej a neskôr prostredníctvom tejto premennej srkipt odkazuje na prvok a vykonáva s ním nejaké akcie.

Hľadať podľa id

Ak je atribút id nastavený pre prvok v kóde stránky, prvok možno nájsť podľa id. Toto je najjednoduchší spôsob. Prvok sa hľadá pomocou metódy getElementById (). globálny objekt dokument.

document.getElementById (id)

Parametre:

id – id prvku, ktorý sa má nájsť. id je reťazec, preto ho treba uviesť v úvodzovkách.

Poďme vytvoriť stránku, pridať na ňu prvok a priradiť jej ID a nájsť tento prvok v skripte:

HTML kód:

JavaScript:

var block = document.getElementById ("blok"); console.log (blok);

Nájdený prvok sme priradili k bloku premenných a vytlačili premennú do konzoly. Otvorte konzolu prehliadača, mala by tam byť uvedená položka.

Keďže vyhľadávanie podľa id je najjednoduchší a najpohodlnejší spôsob, často sa používa. Ak potrebujete pracovať s nejakým prvkom v skripte, potom sa pre tento prvok v kóde stránky nastaví atribút id, aj keď predtým nastavený nebol. A nájdu prvok podľa ID.

Hľadajte podľa triedy

Metóda getElementsByClassName () vám umožňuje nájsť všetky prvky patriace do konkrétnej triedy.

document.getElementsByClassName (trieda)

Parametre:

class – trieda prvkov, ktoré treba nájsť

Metóda vracia pseudopole obsahujúce nájdené prvky. Nazýva sa to pseudo-pole, pretože mnohé z metód poľa preň nefungujú. Ale hlavná vlastnosť zostáva - môžete odkazovať na akýkoľvek prvok poľa. Aj keď sa nájde iba jeden prvok, stále je v poli.

Pridajme na stránku prvky a dajme im triedu. Niektoré prvky umiestnime do bloku, ktorý sme vytvorili predtým. Vytvorte druhú časť mimo bloku. Význam toho bude jasný o niečo neskôr. Stránka bude teraz vyzerať takto:

HTML kód:

JavaScript:

Teraz sa nájdu len tie prvky, ktoré sa nachádzajú v bloku.

Hľadajte podľa značky

Metóda getElementsByTagName () nájde všetky prvky so špecifickou značkou. Tiež vráti pseudopole s nájdenými prvkami.

document.getElementsByTagName (značka)

Parametre:

tag - tag prvkov, ktoré sa majú nájsť

Poďme nájsť všetky značky p, ktoré sú na stránke:

var p = document.getElementsByTagName ("p"); console.log (p);

Túto metódu možno použiť aj nie na celý dokument, ale na konkrétny prvok. Nájdite všetky p značky nájdené v bloku.

Vyhľadávanie selektorom

Existujú metódy querySelector () a querySelectorAll (), ktoré hľadajú prvky zodpovedajúce konkrétnemu selektoru. To znamená, že sa nájdu prvky, na ktoré by sa štýl použil, ak by bol špecifikovaný takýmto selektorom. Prítomnosť takéhoto selektora v štýle stránky zároveň nie je vôbec potrebná. Tieto metódy nemajú nič spoločné s CSS. Metóda querySelectorAll () nájde všetky prvky, ktoré zodpovedajú selektoru. A metóda querySelector () nájde jeden prvok, ktorý je prvý v kóde stránky. Tieto metódy môžu nahradiť všetky spôsoby hľadania prvkov diskutovaných vyššie, pretože existuje selektor podľa id, selektor podľa značky a mnoho ďalších.

document.querySelector (selektor)

document.querySelectorAll (selektor)

Selektory sú napísané rovnakým spôsobom ako v CSS, len nezabudnite dať úvodzovky.

Pridajme zoznam na stránku a nájdime ho pomocou selektora. Hľadáme len jeden prvok a s istotou vieme, že bude prvý, pretože na stránke je len jeden. Preto je v tomto prípade vhodnejšie použiť metódu querySelector (). Pri použití tejto metódy však musíte vziať do úvahy, že v budúcnosti môžu byť na stránku pridané rovnaké prvky. To však platí pre väčšinu metód.

HTML kód:

Tieto metódy môžu tiež vyhľadávať prvky nie v celom dokumente, ale vo vnútri konkrétneho prvku.

V príklade sme použili iba selektory podľa značky. Skúste nájsť prvky stránky pomocou iných selektorov.

Susedné prvky

Pre nájdený prvok môžete nájsť susedov. Každý prvok je objekt a susedné prvky možno získať prostredníctvom vlastností tohto objektu. Vlastnosť previousElementSibling obsahuje predchádzajúci prvok a vlastnosť nextElementSibling obsahuje nasledujúci prvok.

element.previousElementSibling

element.nextElementSibling

Nájdite prvok nasledujúci za blokom:

Detské prvky

Vlastnosť deti obsahuje pole detí.

prvok.deti

Poďme nájsť deti bloku.

Model objektu dokumentu - DOM nie je nič iné ako stromová štruktúra pozostávajúca z existujúcich značiek Html dokument.

Všetky tieto prvky máme Html umiestnené vedľa seba, ktoré chceme prijímať, a následne v nich čítať alebo meniť údaje. Existuje mnoho spôsobov, ako nájsť tieto značky, pretože sú usporiadané v stromovej štruktúre. V tomto článku sa dozviete, ako používať dve vstavané funkcie JavaScript, ako querySelector a querySelectorAll na vyhľadávanie html značky.

Metóda QuerySelector

Pochopiť podstatu fungovania metód querySelector a querySelectorAll pozrite si nasledujúci HTML:

V tomto príklade máme jeden div s id hlavný a štyri vnorené prvky div a img, z ktorých každý má hodnotu triedy obrázkový kontajner a profilový obrázok resp. V niekoľkých nasledujúcich častiach použijeme funkcie querySelector a querySelectorAll Na toto HTML kód a uvidíte, čo sa stane.

querySelector

Funkcia querySelector funguje takto:

Element var = document.querySelector ("< CSS selector >");

Funkcia QuerySelector berie argument a tento argument je Selektor CSS pre prvok, ktorý chcete nájsť. Čo sa vracia funkcia querySelector, je prvý prvok, ktorý nájde, aj keď existujú ďalšie prvky, ktoré môžu byť podobné tomuto selektoru.

Pozerajúc sa na Html z nášho predchádzajúceho príkladu, ak chceme pristupovať div ktorého id je hlavný, musíte napísať nasledovné:

Element Var = document.querySelector ("# main");

Pokiaľ ide o hlavný je identifikátor, syntax selektora na jeho získanie by bola #hlavný... Rovnako aj selektor triedy obrázkový kontajner :

Element Var = document.querySelector (. Pic-container");

Prvý blok sa vráti div ktorého triedna hodnota je obrázkový kontajner... Zostávajúce prvky div s triednou hodnotou obrázkový kontajner sú jednoducho ignorované.

Syntax selektora pre túto funkciu nebola špeciálne vytvorená, takže môžete použiť presnú syntax, ktorú by ste použili pre selektory vo svojej šablóne so štýlmi!

To je všetko a v ďalšom článku vám poviem o nasledujúcej funkcii querySelectorAll.

Ako viete, pri vývoji veľkej JS aplikácie, kde sa používa najpopulárnejšia knižnica jQuery, prichádza čas, kedy nastáva problém s výkonom. Všetky sily sa ponáhľajú do strieľne profilera, každá výzva je dôsledne skúmaná, každý funkčne zaťažený kus implementácie je očuchaný zo všetkých strán a narovnaný. Problém však prichádza z nesprávnej strany, odkiaľ to 90 % vývojárov očakáva. Selektory- Koľko z tohto slova.
Pozrime sa, ako táto mágia funguje a prečo môže vyhľadávanie prvkov DOM spôsobiť pokles výkonu aplikácie.

Ako jQuery analyzuje selektor

V samotnej knižnici slúži na vyhľadávanie prvkov engine Sizzle, ktorý má množstvo funkcií. Budeme ich zvažovať.

querySelectorAll ()

V nových prehliadačoch sa objavili vynikajúce funkcie querySelectorAll () a querySelector (), ktoré dokážu vyhľadávať prvky pomocou možností prehliadača (najmä tých, ktoré sa používajú pri prezeraní CSS a priraďovaní vlastností prvkom). Pracovné túto funkciu nie vo všetkých prehliadačoch, ale iba v FF 3.1+, IE8 + (iba štandardný režim IE8), Opera 9.5+(?) a Safari 3.1+... Sizzle teda vždy zistí prítomnosť tejto funkcie a pokúsi sa cez ňu vykonať akékoľvek vyhľadávanie. Je tu však niekoľko prekvapení - pre úspešné použitie querySelectorAll () musí byť náš selektor platný.
Uvediem jednoduchý príklad:
Dva vyššie uvedené selektory sú prakticky rovnaké a vrátia rovnakú sadu prvkov. Prvý selektor však vráti výsledok querySelectorAll () a druhý vráti výsledok normálneho filtrovania podľa prvkov.
$ ("# vstup my_form")
$ ("# vstup my_form")

Analýza a vyhľadávanie selektora

Ak querySelectorAll () zlyhá, Sizzle sa pokúsi použiť normálne funkcie prehliadača getElementById (), getElementsByName (), getElementsByTagName () a getElementByClass (). Väčšinou sú dosť, ale (sic!) V IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
Vo všeobecnosti Sizzle analyzuje selektor sprava doľava. Na ilustráciu tejto funkcie uvediem niekoľko príkladov:
$ (. divs .my_class")
Najprv sa nájdu prvky My_class a potom budú filtrované iba tie, ktoré majú vo svojich rodičoch divs. Ako vidíme, ide o pomerne nákladnú operáciu a použitie kontextu problém nerieši (o kontexte si povieme nižšie).
Ako som povedal - vo väčšine prípadov Sizzle analyzuje selektor sprava doľava, ale nie v prípade použitia prvku s ID:
$ ("# divs .my_class")
V tomto prípade sa selektor bude správať podľa očakávania a prvok #divs sa okamžite použije ako kontext.

Kontext

Druhý parameter odovzdaný spolu so selektorom do funkcie $ () sa nazýva kontext. Je navrhnutý tak, aby zúžil vyhľadávanie položiek. Pri analýze je však kontext pripojený na začiatok selektora, čo neprináša žiadnu výhodu. Víťazná kombinácia použitia kontextu je platným selektorom pre querySelectorAll (), pretože túto funkciu možno použiť nielen v mene dokumentu, ale aj v prvku. Potom sa selektor s kontextom obrazne transformuje do nasledujúcej konštrukcie:
$ (. divs", document.getElementById ("wrapper"));
document.getElementById ("obal"). querySelectorAll (. divs"); // ak je to možné, použite querySelectorAll ()

V tento príklad ak querySelectorAll () nemožno použiť, Sizzle bude filtrovať prvky jednoduchou iteráciou.
Ešte jedna poznámka ku kontextu (nehovoríme o selektoroch) - ak prejdete ako druhý parameter do selektora pre funkciu live () objekt jQuery- udalosť bude zachytená v dokumente (!), a ak ide o objekt DOM, tak udalosť bude prebublávať iba po tento prvok. Snažím sa nezapamätávať si takéto jemnosti, ale používať .delegate ().

Filtre a hierarchia členov

Na vyhľadanie vnorených prvkov môžete použiť nasledujúci selektor:
$ (. root> .child")
Ako vieme, analýza selektora a vyhľadávanie sa začne od všetkých prvkov .child na stránke (za predpokladu, že querySelectorAll () nie je k dispozícii). Táto operácia je dosť drahá a selektor môžeme transformovať takto:
$ (". dieťa", $ (. root")); // použitie kontextu neuľahčí nájdenie
$ (. root"). find (". dieťa"); // prečo potrebujeme iterovať cez všetky prvky vnútri .root?
$ (. root"). deti (". dieťa"); // najsprávnejšia možnosť

Ak je však potrebné použiť filtre pre niektoré atribúty (: viditeľné,: eq atď.) a selektor vyzerá takto:
$ (. some_images: viditeľné")
potom sa filter aplikuje ako posledný - t.j. opäť sa odkláňame od pravidla „sprava doľava“.

výsledky

• Vždy, keď je to možné, použite správne selektory zodpovedajúce dotazu querySelectorAll ()
• Nahradiť poddotazy v selektoroch poddotazmi (.children (...) atď.)
• Upravte kontext selektora
• Filtrujte čo najmenšiu prednastavenú sadu prvkov

Rýchly výber pre vás v novom roku! Všetci prichádzajúci!

Na základe majstrovskej triedy

Úlohou, s ktorou sa veľmi často stretávajú začínajúci vývojári javascriptu, je výber prvku na webovej stránke podľa atribútu id.

Predpokladajme, že na stránke máme nejaký kód.

Ako môžete vybrať prvok s id = "elem" a vykonať s ním množstvo akcií?

Existuje niekoľko možností riešenia problému. Poďme sa na ne teraz pozrieť.

Možnosť 1. Použite metódu Javascript getElementById.

Existuje spôsob, ako môžete odkazovať na prvok podľa jeho ID pomocou „čistého“ kódu javascript bez použitia knižníc tretích strán. Týmto spôsobom je možné použiť metódu ggetElementById ("element_id"). Na prvok, ktorý potrebujeme, teda odkazujeme jeho id.

Pozrime sa, ako to funguje na jednoduchom príklade.

Všimnite si, že tieto riadky kódu (skript) sú pod samotným prvkom. Toto požadovaný stav dielo tohto skriptu, tk. Kód Javascript sa spustí pri načítaní stránky. Ak umiestnime kód vyššie, tak budeme odkazovať na prvok na stránke, ktorý ešte nebol načítaný, t.j. v čase spustenia skriptu ešte v kóde nebude. Existujú spôsoby, ako sa tomu vyhnúť, ale to je nad rámec tohto článku.

V dôsledku toho, ak všetko funguje správne, dostaneme vyskakovacie okno. Toto okno zobrazí text, ktorý sa nachádza vo vnútri bloku div.

Pozrime sa teraz, ako môžete tento problém vyriešiť iným spôsobom.

Možnosť 2. Použitie knižnice Jquery.

Druhou možnosťou výberu prvku podľa jeho id je použitie knižnice Jquery. V praxi sa v moderných skriptoch tento spôsob používa najčastejšie. Je to oveľa pohodlnejšie a ľahšie zapamätateľné.

Aby ste mohli odkazovať na prvok jeho ID, musíte použiť štruktúru:

$ ("# prvok")

Tu je elem názov obsiahnutý v atribúte id.

Pretože budeme používať knižnica tretích strán Javascript, ktorý sa nazýva Jquery, potom musí byť táto knižnica najprv pripojená.

Pridáva sa v sekcii , jedným zo spôsobov, ako to urobiť, je pridať nasledujúci riadok kódu:

Na načítanie knižnice musí byť internetové pripojenie.

Samotný skript, ako v predchádzajúcom príklade, musí byť umiestnený pod kódom prvku, s ktorým chcete interagovať.

Preto sme analyzovali dva spôsoby, ako môžete vybrať prvok na webovej stránke podľa atribútu id a interagovať s ním. Vyberte si spôsob, ktorý vám vyhovuje a použite ho v praxi.

Metóda dokumentu JavaScript .querySelector () vráti prvý prvok v dokumente (objekt Element), ktorý zodpovedá zadanému selektoru alebo skupine selektorov. Ak sa nenájde žiadna zhoda, vráti sa hodnota null.

Upozorňujem na to, čo nie je dovolené pomocou CSS pseudoprvky ako hodnota selektora na nájdenie prvkov, v takom prípade bude vrátená hodnota vždy nulová.

Ak potrebujete zoznam všetkých prvkov, ktoré zodpovedajú zadanému selektoru alebo selektorom, použite na to metódu querySelectorAll ().

Metóda .querySelector () je definovaný aj na objekte Element, z tohto dôvodu ho možno vyvolať na akomkoľvek elemente, nielen na objekte dokumentu. Prvok, na ktorý sa volá, sa použije ako koreňový prvok pre vyhľadávanie.

Podpora prehliadača

Syntax JavaScriptu:

dokument .querySelector ( selektory) selektory- Šnúrka

Špecifikácia

Selektory API úrovne 1

Hodnoty parametrov

Parameter

Popis

selektory

Argument sa musí zhodovať s platným reťazcom selektora, ktorý obsahuje jeden alebo viacero selektorov. Pri zadávaní viacerých selektorov oddeľte hodnoty čiarkami. V tomto prípade sa vyberie prvý nájdený prvok z daných selektorov. Ak z nejakého dôvodu používate v názvoch selektora znaky, ktoré nie sú súčasťou štandardnej syntaxe CSS, potom pri vyhľadávaní musia byť takéto znaky ukončené spätnou lomkou ( "\" ). Keďže spätná lomka je tiež zvláštny charakter (uniknúť) v JavaScript, potom pri zadávaní doslovného reťazca musí byť kódovaný dvakrát. Požadovaný parameter.

Výnimky

Príklad použitia

Tlačiť ma

Prvý blok

class = "blok"> Druhý blok

class = "blok"> Tretí blok

V tomto príklade používame atribút udalosti onclick, keď sa klikne na tlačidlo ( HTML prvok ) zavolajte funkciu myFunc (), ktorá pomocou JavaScript metóda document .querySelector () vyberie nasledujúce prvky:

• najprv prvok s triedou blokovať v dokumente a nastaviť čierna farba pozadia nájdeného prvku.
• najprv prvok z daných selektorov (prvok s triedou najprv, prvok s triedou blokovať) a nastavte farbu textu nájdeného prvku na červenú. V tomto prípade sa vyberie najprv nájdený prvok z daných selektorov.
• Element
  ktorý je druhý potomka svojho rodiča a nastavený na nájdený prvok zelená farba textu.
• Element
  , ktorý je posledným z prvkov svojho rodiča a nastavený na nájdený prvok Modrá farba textu.

Výsledok nášho príkladu.