Selectoare Javascript și Jquery. Selectarea unui element după id. Metoda GetElementById - Selectarea unui element prin identificatorul ID Căutarea unui element pe o pagină javascript

În ultima lecție ne-am uitat la metoda getElementsByTagName, care returnează o matrice ( grup) elemente de pagină după numele etichetei.

Continuă aici munca practica cu javascript și se va lua în considerare metoda getElementById, care returnează un link către un element, concentrându-se pe acesta identificator unic id.

Metoda getElementById, precum getElementsByTagName, este o metodă a obiectului document.

Numele metodei este tradus literal: obțineți un element prin id.

Orice element ( tegu) unui document web i se poate atribui propriul id, datorită căruia elementul devine unic și poate fi accesat pentru a lucra cu el.

Vă rugăm să rețineți: în numele metodei nu există litera s la sfârșitul cuvântului Element ( spre deosebire de metoda getElementsByTagName). Acest lucru se face pentru comoditate și indică faptul că metoda este utilizată pentru a selecta un element.

/* Adăugați un link la eticheta img folosind id-ul pinguin la variabila unică */

O mică clarificare pentru fragmentul de cod de mai sus...

• etichetă img ( imagini e) are un pinguin id-identificator;
• folosind metoda getElementById, această etichetă img particulară este selectată de identificatorul pinguin;
• variabila unică conține un link către eticheta selectată;
• Apoi puteți lucra cu eticheta ca și cu un obiect prin variabila unică, așa cum ați lucrat cu obiectul Date printr-o variabilă arbitrară.

După accesarea elementului ( tegu) a unei pagini web prin id folosind metoda getElementById, lucrăm deja cu ea ca și cu un Object, ceea ce înseamnă că obținem acces la atributele etichetei ca proprietăți ale unui obiect.

Prin urmare, valorile atributelor sunt deja valori ale proprietăților.

Să continuăm cu exemplul anterior...

„Pingguin gânditor” >

var unic = document .getElementById ("pingguin");

alert(unique.alt); /* Afișează valoarea proprietății alt unui obiect unic (valoarea atributului alt al etichetei img) */

Explicații pentru exemplul de cod...

• etichetă img ( imagini e) are anumite atribute: src - adresa fisierului, latimea si inaltimea - latimea si inaltimea imaginii, alt - text alternativ;
• Accesând eticheta folosind metoda getElementById ca obiect, accesăm atributele etichetei ca proprietăți ale obiectului;
• Și valorile atributelor sunt acum valori de proprietate;
• În javascript, proprietățile obiectului sunt accesate printr-un punct. Apoi, afișăm alt - textul alternativ al etichetei img folosind metoda de alertă pe ecran.

Sper să nu fii confuz de toate acestea. Trebuie să înțelegeți simultan ce se întâmplă la nivel de program javascript și la nivel de marcare a documentului.

Eticheta img este un Obiect unic;

Atributele etichetei width și alt sunt proprietăți ale obiectului;

Valorile atributelor „128” și „Thoughtful Penguin” sunt valori de proprietate;

// Iată cum arată din perspectivă javascript:

var unic = (

latime: "128" ,

alt: „Pingguin gânditor”

}

Acesta este modul în care funcționează metoda getElementById, returnând un link către orice element ( etichetă) pagină web, dacă are un ID de identificare unic. În continuare, lucrăm cu acest element la nivel de javascript ca obiect...

Vă rugăm să rețineți că: ca și în lecția anterioară, aici - când lucrați cu metoda getElementById, linia de apel script ar trebui să fie plasată la sfârșitul documentului html

jQuery are alte opțiuni pentru selectarea elementelor dintr-un document web.

O sarcină cu care se confruntă foarte des dezvoltatorii JavaScript începători este selectarea unui element pe o pagină web după atributul său id.

Să presupunem că avem cod pe pagină.

Blocați conținutul.

Cum puteți selecta un element cu id="elem" și să efectuați o serie de acțiuni cu acesta?

Există mai multe opțiuni pentru a rezolva problema. Să ne uităm la ele acum.

Opțiunea 1: Utilizați metoda Javascript getElementById.

Există o modalitate de a accesa un element prin id-ul său folosind cod javascript „pur”, fără a utiliza biblioteci terțe. Această metodă este de a utiliza metoda ggetElementById(„element_id”). Astfel, accesăm elementul de care avem nevoie prin id-ul său.

Să vedem cum funcționează acest lucru cu un exemplu simplu.

Blocați conținutul. alert(document.getElementById("elem").innerHTML);

Vă rugăm să rețineți că aceste linii de cod (script) sunt situate sub elementul în sine. Aceasta este o condiție prealabilă pentru funcționarea acestui script, deoarece... Codul Javascript este executat pe măsură ce pagina se încarcă. Dacă plasăm codul mai sus, vom accesa un element din pagină care nu s-a încărcat încă, adică. nu va fi încă în cod în momentul în care scriptul este executat. Există modalități de a evita acest lucru, dar este dincolo de scopul acestui articol.

Ca urmare, dacă totul funcționează corect, vom obține o fereastră pop-up. Această fereastră va afișa textul care se află în blocul div.

Să vedem acum cum putem rezolva această problemă într-un alt mod.

Opțiunea 2. Utilizarea bibliotecii Jquery.

A doua opțiune pentru selectarea unui element după id-ul său este utilizarea bibliotecii Jquery. În practică, în scripturile moderne, această metodă este cel mai des folosită. Este mult mai convenabil și mai ușor de reținut.

Pentru a face referire la un element prin id-ul său, trebuie să utilizați următoarea construcție:

$("#elem")

Aici elem este numele conținut în atributul id.

Deoarece Vom folosi o bibliotecă Javascript terță parte numită Jquery, apoi această bibliotecă trebuie mai întâi inclusă.

Este adăugat în secțiune, unul dintre modalitățile prin care se poate face acest lucru este să adăugați următoarea linie de cod:

Pentru ca biblioteca să fie încărcată, trebuie să existe o conexiune la Internet.

Blocați conținutul. alert($("#elem").html());

Scriptul în sine, ca în exemplul anterior, ar trebui să fie situat sub codul elementului cu care doriți să interacționați.

Astfel, am discutat două moduri prin care puteți selecta un element pe o pagină web prin atributul său id și interacționa cu acesta. Alege metoda care ti se potriveste si pune-o in practica.

Ultima actualizare: 1/11/2015

Pentru a lucra cu structura DOM în JavaScript, se folosește obiectul document, care este definit în obiectul fereastră globală. Obiectul document oferă o serie de proprietăți și metode pentru gestionarea elementelor paginii.

Căutați elemente

Următoarele metode sunt utilizate pentru a căuta elemente pe o pagină:

getElementById(value) : selectează elementul al cărui atribut id este valoare

getElementsByTagName(valoare): selectează toate elementele a căror etichetă este valoare

getElementsByClassName(valoare) : selectează toate elementele care au valoare de clasă

querySelector(value) : selectează primul element care se potrivește cu valoarea selectorului css

querySelectorAll(valoare): selectează toate elementele care se potrivesc cu valoarea selectorului css

De exemplu, să găsim un element după id:

Antet bloc var headerElement = document.getElementById("header"); document.write("Text antet: " + headerElement.innerText);

Folosind apelul document.getElementById("header") găsim elementul cu id="header". Și folosind proprietatea innerText puteți obține textul elementului găsit.

Căutați după o anumită etichetă:

Titlu

Primul paragraf

Al doilea paragraf

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

Folosind apelul document.getElementsByTagName("p") găsim toate elementele de paragraf. Acest apel returnează o matrice de elemente găsite. Prin urmare, pentru a obține elemente individuale matrice, trebuie să treceți prin ele.

Dacă trebuie să obținem doar primul element, atunci putem accesa primul element al colecției de obiecte găsite:

Var pElement = document.getElementsByTagName("p"); document.write("Textul paragrafului: " + pElement.innerText);

Obținerea unui element după clasă:

Titlul articolului

Primul paragraf

Al doilea paragraf

var articleDiv = document.getElementsByClassName("articol"); console.log(articleDiv); var textElems = document.getElementsByClassName("text"); pentru (var i = 0; i< textElems.length; i++) { console.log(textElems[i]); }

Selectare prin selector CSS:

Rezumat al articolului

Primul paragraf

Al doilea paragraf

var elem = document.querySelector(".annotation p"); document.write("Selector text: " + elem.innerText);

Expresia document.querySelector(".annotation p") găsește elementul care se potrivește cu selectorul.annotation p . Dacă pe pagină există mai multe elemente care se potrivesc cu selectorul, metoda îl va selecta pe primul. Ca rezultat, browserul va afișa:

Rezumat articol Primul paragraf Al doilea paragraf Text de selecție: Rezumat articol

Pentru a obține toate elementele pentru un selector, puteți utiliza metoda document.querySelectorAll într-un mod similar, care returnează o matrice a elementelor găsite:

Rezumat al articolului

Primul paragraf

Al doilea paragraf

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

Ieșire browser:

Rezumat articol Primul paragraf Al doilea paragraf Textul de selectare 0: Primul paragraf Textul de selectare 1: Al doilea paragraf

Proprietatea se potrivește cu șirul specificat. Deoarece ID-urile elementelor trebuie să fie unice dacă sunt specificate, acestea reprezintă o modalitate utilă de a obține rapid acces la un anumit element.

Dacă trebuie să obțineți acces la un element care nu are un ID, puteți utiliza querySelector() pentru a găsi elementul folosind orice selector .

Sintaxă var element = document .getElementById(id); Parametrii id ID-ul elementului de localizat. ID-ul este un șir sensibil la majuscule și minuscule, care este unic în document; doar un element poate avea un ID dat. Valoare returnată

Un obiect Element care descrie obiectul element DOM care se potrivește cu ID-ul specificat sau nul dacă nu a fost găsit niciun element care se potrivește în document.

Exemplu Exemplu HTML getElementById

Un text aici

albastru roșu Funcția JavaScript changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; ) Rezultat Note de utilizare

Scrierea cu majuscule a lui „Id” în numele acestei metode trebuie sa să fie corect pentru ca codul să funcționeze; getElementByID() este nu valid și nu va funcționa, oricât de firesc ar părea.

Spre deosebire de alte metode de căutare a elementelor, cum ar fi Document.querySelector() și Document.querySelectorAll() , getElementById() este disponibil doar ca metodă a obiectului document global și nu disponibilă ca metodă pe toate obiectele element din DOM. Deoarece valorile ID trebuie să fie unice în întregul document, nu este nevoie de versiuni „locale” ale funcției.

Document de exemplu

salut cuvânt1

salut cuvânt 2

salut cuvânt3

salut cuvânt4

var parentDOM = document.getElementById("parent-id"); var test1 = parentDOM.getElementById("test1"); //Eroare de aruncare //Eroare de tip neprins: parentDOM.getElementById nu este o funcție

Dacă nu există niciun element cu id-ul dat, această funcție returnează null. Rețineți că parametrul id face distincție între majuscule și minuscule, deci document.getElementById("M ain") va returna null în loc de element, deoarece "M" și "m" sunt diferite în sensul acestei metode.

Elementele care nu se află în document nu sunt căutate de getElementById() . Când creați un element și îi atribuiți un ID, trebuie să introduceți elementul în arborele documentului cu sau o metodă similară înainte de a-l putea accesa cu getElementById() :

Var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el va fi nul!

Documente non-HTML. Implementarea DOM trebuie să aibă informații care să spună ce atribute sunt de tip ID. Atributele cu numele „id” nu sunt de tip ID decât dacă sunt definite astfel în DTD-ul documentului. Atributul id este definit ca fiind de tip ID în cazurile obișnuite de XHTML , XUL și altele. Implementări care nu știu dacă atributele sunt de tip ID sau nu se așteaptă să returneze null.

Specificație Comentariu privind starea specificației

Specificații de nivel 1 pentru modelul obiectului documentului (DOM).	Învechit	Definiție inițială pentru interfață
Document Object Model (DOM) Nivelul 2 Core Specification Definiția „getElementById” din specificația respectivă.	Învechit	Înlocuiește DOM 1
Document Object Model (DOM) Nivelul 3 Core Specification Definiția „getElementById” din specificația respectivă.	Învechit	Înlocuiește DOM 2
DOM Definiția „getElementById” din specificația respectivă.	Nivel de trai	Intenționați să înlocuiți DOM 3

Compatibilitate browser

Tabelul de compatibilitate de pe această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.

Actualizați datele de compatibilitate pe GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android Webview Chrome pentru Android Firefox pentru Android Opera pentru Android Safari pe iOS Samsung InternetgetElementById

Suport complet Chrome 1	Edge Suport complet 12	Suport complet pentru Firefox 1	IE Suport complet 5.5	Opera Suport complet 7	Suport complet Safari 1	WebView Android Suport complet Da	Chrome Android Suport complet 18	Firefox Android Suport complet Da	Opera Android Suport complet 10.1	Safari iOS Suport complet 1	Samsung Internet Android?

Legendă Asistență completă Asistență completă Compatibilitate necunoscută Compatibilitate necunoscută

Standardul DOM oferă mai multe mijloace de găsire a unui element. Aceste metode sunt getElementById, getElementsByTagName și getElementsByName.

Bibliotecile JavaScript oferă metode de căutare mai puternice.

Căutați după id

Cel mai convenabil mod de a găsi un element în DOM este să îl obțineți prin id. Pentru a face acest lucru, utilizați apelul document.getElementById(id)

De exemplu, următorul cod va schimba culoarea textului în albastru în div "e c id="dataKeeper":

Document.getElementById("dataKeeper").style.color = "albastru"

Căutați după etichetă

Următorul mod este să obțineți toate elementele cu o anumită etichetă și să căutați pe cel de care aveți nevoie printre ele. Document.getElementsByTagName(tag) este folosit pentru aceasta. Returnează o serie de elemente care au acea etichetă.

De exemplu, puteți obține al doilea element (numerotarea din matrice începe de la zero) cu eticheta li:

Document.getElementsByTagName("LI")

Interesant, getElementsByTagName poate fi apelat nu numai pentru document , ci în general pentru orice element care are o etichetă (nu text).

În acest caz, vor fi găsite doar acele obiecte care se află sub acest element.

De exemplu, următorul apel primește lista elementelor LI care se află în prima etichetă div:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Luați toți copiii

Apelarea elem.getElementsByTagName("*") va returna o listă cu toți copiii nodului elem în ordinea în care sunt plimbate.

De exemplu, pe acest DOM:

Acest cod:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i