Úlohou, ktorej veľmi často čelia začínajúci vývojári javascriptu, je výber prvku na webovej stránke podľa atribútu id.
Povedzme, že na stránke máme kód.
Ako môžem vybrať prvok s id="elem" a vykonať s ním nejaké akcie?
Tu je niekoľko možností riešenia problému. Poďme sa na ne teraz pozrieť.
Možnosť 1. Použitie Javascript metóda getElementById.
Existuje spôsob, ako pristupovať k prvku podľa jeho ID pomocou „čistého“ kódu javascript bez použitia knižníc tretích strán. Táto metóda používa 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 je predpokladom pre fungovanie tohto skriptu, pretože. 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ý sa ešte nenačítal, t.j. nebude v kóde v čase vykonávania skriptu. 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ôžeme 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ť konštrukciu:
$("#elem")
Tu elem je názov obsiahnutý v atribúte id.
Pretože použijeme tretiu stranu Javascript knižnica, 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:
Aby sa knižnica načítala, musí byť k dispozícii internetové pripojenie.
Samotný skript, rovnako ako v predchádzajúcom príklade, by mal byť 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.
V minulej lekcii sme uvažovali o metóde getElementsByTagName, ktorá vracia pole ( skupina) prvky stránky podľa názvu značky.
Tu sa pokračuje praktická práca s javascriptom a metódou getElementById sa bude brať do úvahy, čo je vráti odkaz na prvok na základe svojho jedinečného ID .
metóda getElementById, rovnako ako getElementsByTagName je metóda objektu dokumentu.
Názov metódy je doslovne preložený: získať prvok podľa ID.
Akýkoľvek prvok ( tegu) webového dokumentu je možné priradiť vlastné id - identifikátor, vďaka ktorému prvok sa stáva jedinečným a môžete k nemu pristupovať, aby ste s ním mohli pracovať.
dávaj pozor e: v názve metódy na konci slova Element nie je žiadne s ( na rozdiel od metódy getElementsByTagName). Je to pre pohodlie a znamená to, že metóda sa používa na výber prvku.
Nejaké vysvetlenie útržku kódu vyššie...
- img tag ( snímky f) má id - identifikátor tučniaka ;
- pomocou metódy getElementById je táto značka img vybraná pomocou identifikátora tučniaka;
- do premennej jedinečný je zadaný odkaz na vybranú značku;
- potom môžete pracovať s tagom, ako pri objekte cez premennú jedinečný , rovnako ako práca s objektom Date prostredníctvom ľubovoľnej premennej.
Po prístupe k prvku ( tegu) web page by id pomocou metódy getElementById, už s ňou pracujeme ako s Object, čiže získavame prístup k atribútom tagu ako vlastnosti Object.
Preto sú hodnoty atribútov už hodnotami vlastností.
Pokračujme v predchádzajúcom príklade...
"Zamyslený tučniak">
Vysvetlenia k príkladu kódu...
- img tag ( snímky f) má určité atribúty: src - adresa súboru, šírka a výška - šírka a výška obrázka, alt - alternatívny text;
- po prístupe k značke pomocou metódy getElementById ako objektu získame prístup k atribútom značky, ako vlastnosti objektu;
- ALE hodnoty atribútov sú teraz hodnoty majetku;
- v javascripte sa k vlastnostiam objektu pristupuje cez bodku. Ďalej zobrazíme alt - alternatívny text značky img pomocou metódy upozornenia na obrazovke.
Dúfam, že z toho všetkého nie ste zmätení. Musíte súčasne pochopiť, čo sa deje na úrovni programu javascript a na úrovni označenia dokumentu.
Značka img je jedinečný objekt;
Atribúty width a alt tagu sú vlastnosti objektu;
Hodnoty atribútu „128“ a "Zamyslený tučniak" sú majetkové hodnoty;
// Takto to vyzerá z pohľadu javascriptu:
var jedinečný = (
šírka: "128",
alt : "Zamyslený tučniak"
}
Takto funguje metóda getElementById, ktorá vracia odkaz na ľubovoľný prvok ( tag) webovej stránky, ak má jedinečné ID. Ďalej s týmto prvkom pracujeme na úrovni javascriptu. ako s predmetom...
Malo by sa to vziať do úvahy: ako v predchádzajúcej lekcii, aj tu - pri práci s metódou getElementById by mal byť riadok volania skriptu umiestnený na koniec html dokumentu
jQuery poskytuje ďalšie možnosti výberu prvkov webového dokumentu.
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 cez túto premennú skript k prvku pristupuje a vykonáva s ním nejaké akcie.
Hľadať podľa id
Ak je prvku priradený atribút id 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álneho objektu dokumentu.
document.getElementById(id)
Možnosti:
id – id prvku, ktorý sa má nájsť. id je reťazec, takže musí byť v úvodzovkách.
Poďme vytvoriť stránku, pridať na ňu prvok a dať jej id a nájsť tento prvok v skripte:
HTML kód:
JavaScript:
| var block = document.getElementById("blok"); konzolový denník (blok); |
Nájdený prvok sme priradili do blokovej premennej a premennú sme zobrazili v konzole. Otvorte konzolu prehliadača, mala by obsahovať prvok.
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 nebol nastavený. A nájdite 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(class)
Možnosti:
class - trieda prvkov, ktoré sa majú nájsť
Metóda vracia pseudopole obsahujúce nájdené prvky. Nazýva sa pseudo-pole, pretože veľa metód poľa preň nefunguje. Hlavná vlastnosť však zostáva - môžete sa odvolávať 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 budú umiestnené vo vnútri bloku, ktorý sme vytvorili predtým. Druhá časť bude vytvorená mimo bloku. Význam toho bude jasný o niečo neskôr. Teraz bude stránka vyzerať takto:
HTML kód:
JavaScript:
Teraz sa nájdu iba 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)
Možnosti:
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"); konzolový denník(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 v bloku.
Hľadajte podľa selektora
Existujú metódy querySelector() a querySelectorAll(), ktoré hľadajú prvky, ktoré zodpovedajú danému selektoru. To znamená, že sa nájdu prvky, na ktoré by bol štýl aplikovaný, ak by bol špecifikovaný v takomto selektore. Zároveň prítomnosť takéhoto selektora v štýle stránky 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ým prvkom v kóde stránky. Tieto metódy môžu nahradiť všetky spôsoby hľadania prvkov, o ktorých sme hovorili vyššie, pretože existuje selektor ID, selektor tagov a mnoho ďalších.
document.querySelector(selektor)
document.querySelectorAll(selektor)
Selektory sú písané rovnako 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 to bude prvý, pretože je na stránke jediný. Preto je v tomto prípade vhodnejšie použiť metódu querySelector(). Ale pri použití tejto metódy musíte vziať do úvahy, že rovnaké prvky môžu byť pridané na stránku v budúcnosti. 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 v rámci jedného 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 za blokom:
Detské prvky
Vlastnosť deti obsahuje pole detí.
prvok.deti
Poďme nájsť detské prvky blokovať.
Okrem toho, že umožňujeme webovým stránkam vyberať prvky podľa ich id, môžeme prvky vyberať aj podľa ich atribútu triedy.
Úloha je tiež veľmi častá. Keď píšem svoje skripty, musím tento selektor používať veľmi často.
Povedzme, že na stránke máme nasledujúci kód.
Úloha je jednoduchá, musíte vybrať prvok s triedou class = "elem" a vykonať s ním nejaké akcie pomocou Javascriptu.
Pozrime sa na niekoľko možností, ako to možno urobiť.
Možnosť 1: Použite metódu Javascript getElementsByClassName.
Ak nepoužívate žiadne ďalšie knižnice, potom môžete pristupovať k prvku pomocou metódy getElementsByClassName("class_name").
Napríklad vo vzťahu k zdrojový kód, môžete pridať nasledujúce riadky kódu.
V dôsledku toho, ak všetko funguje správne, dostaneme vyskakovacie okno, v ktorom sa zobrazí text, ktorý je vo vnútri bloku div.
Upozorňujeme, že výsledkom spustenia metódy getElementsByClassName bude pole prvkov. Na stránke môže byť niekoľko prvkov s rovnakou triedou.
Preto na konci konštrukcie document.getElementsByClassName("elem") musíte uviesť, že je zobrazený nulový prvok poľa (). Počítanie v Javascripte začína na nule, nie na jednotke.
Problém s použitím metódy getElementsByClassName je však v tom, že táto metóda nie je podporovaná v starších verziách prehliadačov.
Existuje niekoľko trikov, ako to obísť, ale je to nadbytočný kód. Môžete napríklad použiť regulárne výrazy:
If(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); pre (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };
Toto je jeden zo spôsobov, ako vyriešiť problém. Ale, aby som bol úprimný, nie je pre mňa príliš prijateľné zanášať stránku nepotrebným kódom, takže najčastejšie používam druhé riešenie problému.
Možnosť 2. Použitie knižnice Jquery.
Použitie knižnice Jquery výrazne uľahčuje riešenie problému výberu prvkov podľa ich atribútu triedy. Musíte použiť konštrukciu:
Tu elem je názov triedy priradený prvku.
Treba mať na pamäti, že aby to fungovalo, musí byť najprv zahrnutá knižnica Jquery. Pridáva sa v sekcii
, jedným zo spôsobov, ako to urobiť, je pridať nasledujúci riadok kódu:Aby sa knižnica načítala, musí byť k dispozícii internetové pripojenie.
Pozrime sa, ako to funguje na príklade.
Samotný skript, rovnako ako v predchádzajúcom príklade, by mal byť pod kódom prvku, s ktorým chcete interagovať.
Existujú teda dva spôsoby interakcie s prvkami, ktoré majú nastavený atribút class. Vyberte si ten, ktorý vám najviac vyhovuje a využite ho v praxi.
Vlastnosť sa zhoduje so zadaným reťazcom. Keďže identifikátory prvkov musia byť jedinečné, ak sú špecifikované, sú užitočným spôsobom, ako rýchlo získať prístup ku konkrétnemu prvku.
Ak potrebujete získať prístup k prvku, ktorý nemá ID, môžeš použite querySelector() na nájdenie prvku pomocou ľubovoľného selektora.
Syntax
var element = document.getElementById(id);Parametre
id ID prvku, ktorý sa má nájsť. ID je reťazec, v ktorom sa rozlišujú malé a veľké písmená, ktorý je v rámci dokumentu jedinečný; iba jeden prvok môže mať dané ID.návratová hodnota
Objekt Element popisujúci objekt prvku DOM, ktorý sa zhoduje so zadaným ID, alebo má hodnotu null, ak sa v dokumente nenašiel žiadny zodpovedajúci prvok.
príklad
HTML
Tu je nejaký text
JavaScript
function changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; )výsledok
Poznámky k použitiu
Veľké písmená "Id" v názve tejto metódy musieť aby kód fungoval správne; getElementByID() je nie platné a nebude fungovať, akokoľvek sa to môže zdať prirodzené.
Na rozdiel od niektorých iných metód vyhľadávania prvkov, ako sú Document.querySelector() a Document.querySelectorAll() , getElementById() je k dispozícii iba ako metóda globálneho objektu dokumentu a nie dostupná ako metóda pre všetky elementové objekty v DOM. Pretože hodnoty ID musia byť jedinečné v celom dokumente, neexistuje potrebu„lokálne“ verzie funkcie.
príklad
ahoj slovo 1
ahoj slovo 2
ahoj slovo 3
ahoj slovo 4
Ak neexistuje žiadny prvok s daným ID, funkcia vráti hodnotu null. Všimnite si, že parameter id rozlišuje veľké a malé písmená, takže document.getElementById(" M ain") vráti hodnotu null namiesto prvku
Prvky, ktoré nie sú v dokumente nie sú vyhľadávané pomocou getElementById() . Pri vytváraní prvku a priraďovaní jeho ID musíte prvok vložiť do stromu dokumentu pomocou alebo podobnej metódy, aby ste k nemu mohli pristupovať pomocou getElementById() :
var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el bude null!
Dokumenty iné ako HTML. Implementácia DOM musí mať informácie, ktoré hovoria, ktoré atribúty sú typu ID. Atribúty s názvom "id" nie sú typu ID, pokiaľ to nie je definované v DTD dokumentu. Atribút id je definovaný ako typ ID v bežných prípadoch XHTML , XUL a iných. Implementácie, ktoré nevedia, či atribúty sú typu ID alebo sa neočakáva, že vrátia hodnotu null.
Špecifikácia
| Špecifikácia | Postavenie | Komentujte |
|---|---|---|
| Špecifikácia modelu objektu dokumentu (DOM) úrovne 1 |
Zastaraný | Počiatočná definícia rozhrania |
| Základná špecifikácia 2. úrovne modelu objektu dokumentu (DOM). Definícia „getElementById“ v tejto špecifikácii. |
Zastaraný | Nahrádza DOM 1 |
| Základná špecifikácia 3. úrovne modelu objektu dokumentu (DOM). Definícia „getElementById“ v tejto špecifikácii. |
Zastaraný | Nahrádza DOM 2 |
| DOM Definícia „getElementById“ v tejto špecifikácii. |
Štandard bývania | Zamýšľa nahradiť DOM 3 |
Kompatibilita prehliadača
Tabuľka kompatibility na tejto stránke je vygenerovaná zo štruktúrovaných údajov. Ak by ste chceli prispieť k údajom, pozrite si https://github.com/mdn/browser-compat-data a pošlite nám žiadosť o stiahnutie.
Aktualizujte údaje o kompatibilite na GitHub
| Desktop | Mobilné | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | hrana | Firefox | internet Explorer | Opera | safari | android webview | Chrome pre Android | Firefox pre Android | Opera pre Android | Safari na iOS | Internet Samsung | |
| getElementById | Plná podpora prehliadača Chrome 1 | Úplná podpora Edge 12 | Plná podpora Firefoxu 1 | Plná podpora IE 5.5 | Plná podpora Opera 7 | Plná podpora Safari 1 | WebView Plná podpora Androidu Áno | Chrome Plná podpora pre Android 18 | Firefox Plná podpora Androidu Áno | Opera Android Plná podpora 10.1 | Safari iOS Plná podpora 1 | Samsung Internet Android? |