salut cuvânt1

salut cuvânt2

salut cuvânt3

salut cuvânt4

Elemente care nu sunt în document nu sunt căutate de getElementById (). Când creați un element și îi atribuiți un ID, trebuie să inseraț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ă conțină informații care să indice care sunt atributele de tip ID. Atributele cu numele „id” nu sunt de tip ID, cu excepția cazului în care este definit în DTD-ul documentului. Atributul id este definit ca fiind de tip ID în cazurile obișnuite ale XHTML, XUL și altele. Implementări care nu știu dacă atributele sunt de tip ID sau nu se așteaptă să returneze nul.

Specificație

Compatibilitate browser

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

Actualizați datele de compatibilitate pe GitHub

Legendă

Lecția va acoperi începutul subiectului: modelul obiectului documentului (javaScript DOM) este baza HTML-ului dinamic, metodele de accesare a obiectelor vor fi studiate și modul de gestionare a evenimentelor javascript

• În general un obiect- aceasta este tip compozit date care combină multe valori în modul comunși vă permite să stocați și să recuperați valorile la cerere după numele lor.

Anterior, am început deja cunoașterea conceptului în javascript.

• În javascript există un astfel de lucru ca DOM - Model de obiect document- modelul obiect al paginii web (pagini html).
• Etichetele de document sau, după cum se spune, nodurile de document sunt obiectele sale.

Să ne uităm la diagramă ierarhizarea obiectelor în JavaScript, și unde în ierarhie este obiectul documentului discutat în acest subiect.

Elementul script are atribute:

Exemplu:

Proprietățile și atributele obiectului document în javaScript

Obiectul document reprezintă o pagină web.

Important: Pentru a accesa proprietățile și metodele unui obiect în javaScript, ca și în cazul altor obiecte, se utilizează notația punct:

acestea. mai întâi, obiectul în sine este scris, apoi proprietatea, atributul sau metoda acestuia sunt indicate printr-o perioadă și fără spații

Să luăm în considerare un exemplu:

Exemplu: lăsați documentul html să aibă o etichetă

și specific pentru el stil css(chiar și două stiluri, al doilea este util pentru sarcină):

Necesar:

1. setați o nouă proprietate a obiectului, atribuiți-i o valoare și afișați această valoare;
2. afișează valoarea unui atribut al unui obiect;
3. modificați valoarea unui atribut al unui obiect.

Deoarece acesta este un limbaj javascript, un obiect poate fi inventat și setat orice proprietate cu orice valoare. Dar mai întâi, să obținem acces la obiect (accesul la obiect va fi discutat în detaliu mai târziu în această lecție):

// obțineți acces la obiect prin id-ul său element var = document.getElementById ("MyElem"); element.myProperty = 5; // atribuirea alertei de proprietate (element.myProperty); // afișați în caseta de dialog

Următoarea sarcină este legată de un atribut al unui obiect. Atribut obiect Sunt atributele etichetei. Acestea. în cazul nostru există două: atributul de clasă cu o valoare mică și atributul id. Vom lucra cu atributul clasei.

Acum să adăugăm cod javascript pentru a afișa valoarea atributului obiectului nostru. Codul ar trebui să fie localizat după etichete principale:

// obțineți acces la obiect prin id-ul său element var = document.getElementById ("MyElem"); alert (element.getAttribute ("clasa")); // afișați în caseta de dialog

Și ultima sarcină: modificați valoarea atributului. Pentru aceasta am pregătit un stil "Mare"... Să înlocuim valoarea atributului clasei cu acest stil:

// obțineți acces la obiect prin id-ul său element var = document.getElementById ("MyElem"); element.setAttribute („clasă”, „mare”);

Ca urmare, elementul nostru va deveni dimensiune mai mareși va deveni albastru (clasa mare).

Acum să aruncăm o privire mai atentă asupra metodelor utilizate în exemplu pentru lucrul cu atribute.

Metode de atribut în JavaScript

Atributele pot fi adăugate, eliminate și modificate. Există metode speciale pentru aceasta:

• Adăugarea unui atribut (setarea unei noi valori pentru acesta):

getAttribute (attr)

• Verificarea prezenței unui atribut dat:

removeAttribute (attr)

Diferite moduri de lucru cu atribute

Exemplu: Imprimați valoarea atributului de valoare al blocului de text.

• Să avem un bloc de text:

var elem = document.getElementById ("MyElem"); var x = "valoare";

• Să luăm în considerare mai multe moduri de a obține valoarea unui atribut (pentru ieșire, utilizați metoda de alertă()):

elem.getAttribute („valoare”)

elem.getAttribute („valoare”)

2. notare punct:

elem.atribute .valor

elem.attributes.value

3. notație de paranteză:


Setați valorile atributelor de asemenea, în mai multe moduri:

var x = "cheie"; // cheia este numele atributului, val este valoarea atributului // 1. elem.setAttribute ("cheie", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes ["key"] = "val" // 4. elem.setAttribute (x, "val")

Proprietățile elementului corpului

Prin intermediul obiectului document, puteți face referire la corpul documentului - eticheta corp - cu unele dintre proprietățile sale utile.

De exemplu, eticheta corpului are două proprietăți: lățimea și înălțimea ferestrei clientului:

document.body.clientHeight - înălțimea ferestrei clientului
document.body.clientWidth - lățimea ferestrei clientului


Dar cel mai important lucru, așa cum am aflat deja, este că prin obiectul document, prin metode speciale, se realizează accesul la toate elementele paginii, adică la etichete.

Important: Cu acest tip de referință la etichetele de pagină, scriptul trebuie să fie la sfârșitul arborelui elementului, înainte de a închide corpul! Deoarece până la executarea scriptului, toate elementele trebuie deja „desenate” de browser pe ecran

Job js8_1... Afișați un mesaj despre dimensiunea ferestrei browserului: de exemplu, „Dimensiunea ferestrei browserului 600 x 400”

Accesarea elementelor documentului în javaScript

Există mai multe opțiuni pentru accesarea obiectelor sau căutarea obiectelor:

1. Căutare după id(sau metoda getElementById), returnează un anumit element
2. Căutați după numele etichetei(sau metoda getElementsByTagName), returnează o serie de elemente
3. Căutați după atributul de nume(sau metoda getElementsByName), returnează o serie de elemente
4. Prin elemente părinte(obțineți toți descendenții)

Să luăm în considerare fiecare dintre opțiuni mai detaliat.

1. Accesarea unui element prin atributul său id

Sintaxă: document.getElementById (id)

Metoda getElementById () returnează elementul în sine, care poate fi apoi utilizat pentru a accesa datele

Exemplu: Pagina are un câmp de text cu un atribut id = "tort":

...

Necesar



✍ Soluție:

alert (document.getElementById ("tort"). valoare); // returnează „numărul de prăjituri”

Puteți face același lucru prin implementarea unui apel obiect printr-o variabilă:

var a = document.getElementById ("tort"); alertă (valoare a); // tipăriți valoarea atributului valoare, adică text „număr de prăjituri”

Important: Scriptul trebuie plasat după etichetă!

Sintaxă:
document.getElementsByTagName (nume);

Exemplu: Pagina are un câmp de text (etichetă de intrare) cu un atribut de valoare:

...

Necesar: tipăriți valoarea atributului său de valoare

Metoda getElementsByTagName printr-o variabilă organizează accesul la toate elementele de intrare (adică la o serie de elemente de intrare), chiar dacă acest element este singurul de pe pagină. Pentru a ne referi la un element specific, de exemplu, la primul, atunci indicăm indexul acestuia (matricea începe de la indexul zero).

✍ Soluție:

Referindu-ne la un anumit element după index:

var a = document.getElementsByTagName ("input"); alertă (valoare a); // returnează „numărul de prăjituri”

Sintaxă:
document.getElementsByName (nume);

Revine metoda getElementsByName ("...") matrice de obiecte, în care atributul nume este egal cu valoarea specificată ca parametru de metodă. Dacă există doar un astfel de element pe pagină, atunci metoda returnează încă o matrice (cu un singur element).

Exemplu: să presupunem că există un element în document:

element var = document.getElementsByName ("MyElem"); alert (element.value);

V acest exemplu există un singur element, dar se face referire la elementul zero al tabloului.

Important: Metoda funcționează numai cu acele elemente pentru care atributul nume este furnizat în mod explicit în specificație.: acestea sunt formularul de etichete, introducere, a, select, textarea și o serie de altele, mai rare.

Metoda document.getElementsByName nu va funcționa cu alte elemente precum divs, p etc.

Accesarea descendenților în javascript se întâmplă prin proprietatea childNodes. Proprietatea aparține obiectului părinte.

document.getElementById (roditel) .childNodes;

document.getElementById (roditel) .childNodes;

Luați în considerare un exemplu în care etichetele de imagine sunt plasate într-un container - o etichetă div. Astfel, eticheta div este părintele datelor imaginii, iar etichetele img în sine sunt copii ai etichetei div:

Acum vom afișa în fereastra modală valorile elementelor matrice cu descendenți, adică etichete img:

var myDiv = document.getElementById ("div_for_img"); // consultați containerul părinte var childMas = myDiv.childNodes; // matrice de descendenți pentru (var i = 0; i< childMas.length;i++){ alert(childMas[i].src); }

Rețineți că este convenabil să utilizați o buclă pentru a itera peste elementele matricei descendente. Acestea. în exemplul nostru obținem o buclă:

Pentru (var a în childMas) (alert (childMas [a] .src);)

Alte moduri pe care le vom lua în considerare De exemplu:

Acces:

... // accesorii de elemente nedorite și învechite: alert (document.forms.name); // f alertă (document.forms.elements.type); // alertă text (document.forms.elements.options.id); // alertă o2 (document.f.b.type); // alertă buton (document.f.s.name); // ss alert (document.f.s.options.id); // o2 // alertă metodă accesor preferată (document.getElementById ("t"). tip); // alertă text (document.getElementById („s”). nume); // ss alert (document.getElementById ("s"). options.id); // 02 alertă (document.getElementById ("o3"). Text); // 4 ...

Exemplu:În documentul html creați butonul și caseta de text. Utilizarea unui script pentru a colora fundalul butonului (proprietatea style.backgroundColor a butonului) și a afișa legenda "Hei!"în caseta text (valoare tribut).

Cod HTML:

document.getElementById ("t1"). value = "(! LANG: Bună ziua!"; document.getElementById("b1").style.backgroundColor = "red";!}

Opțiunea 2:

document.getElementById ("t1"). setAttribute ("valoare", "Bună ziua!"); document.getElementById ("b1"). style.backgroundColor = "roșu";

Js8_2. Creați etichete de casetă text în funcție de imaginea din imagine. Setați-le la valorile corespunzătoare ale atributului id (prezentate în figură). Adăugați valoarea „0” la toate câmpurile numerice (presupunând valori numerice) folosind scriptul

Verificarea faptului că datele formularului sunt introduse corect

Este câmpul gol?

Datele introduse de utilizatori nu pot fi de încredere. Nu este rezonabil să presupunem că utilizatorii vor verifica datele pe măsură ce le introduc. Aceasta înseamnă că trebuie să utilizați javascript pentru aceasta.

Pentru a verifica este caseta de text goală(de exemplu, după ce utilizatorul a completat datele oricărui chestionar), ar trebui să vă referiți la proprietatea value. Dacă valoarea proprietății este un șir gol (""), atunci este necesar să anunțați cumva utilizatorul despre acest lucru.

if (document.getElementById ("nume"). valoare == "") (unele acțiuni, de exemplu, afișarea unui mesaj care vă cere să completați câmpul);

În plus, puteți face fără un script. Eticheta de introducere a casetei de text are un atribut tipar. valoarea sa este o expresie regulată pentru validarea datelor în acest câmp text al formularului. Dacă atributul este prezent model atunci formularul nu va fi trimis până când această casetă de text nu este completată corect.
De exemplu, pentru a verifica dacă un câmp este lăsat gol:

Text în loc de valoare numerică: funcția isNaN

Dacă câmpul sugerează introducere numerică, iar în schimb utilizatorul introduce text, atunci trebuie să utilizați funcția isNaN (din limba engleză. - Nu este un număr?), care verifică tipul de date de intrare și returnează adevărat dacă sunt introduse date text în locul datelor numerice.

Acea. dacă este returnat adevărat, atunci este necesar să anunțați utilizatorul să introducă formatul corect, adică număr.

if (isNaN (document.getElementById ("minute"). valoare)) (alertă care solicită date numerice);

A fost dată o pagină cu elemente de completat:


Fragment cod html:

Necesar:
Completați spațiile libere din fragmentul de cod de mai jos, care verifică dacă cele două câmpuri de text sunt corecte: Nume(id = "nume") și minute(id = „minute”). Utilizați verificarea pentru a lăsa câmpul gol ("") și formatul corect pentru completarea unui câmp numeric (isNaN).

* Efectuați atribuirea folosind și atributul model al câmpurilor de text folosind.

Fragment al scenariului:

Codul este utilizat pentru a crea condiții complexe trecute mai devreme.

Un nou concept pentru dvs. apelează la o funcție ca handler pentru un eveniment de buton:
onclick = "placeOrder ();"
Când se face clic pe buton, se va apela funcția placeOrder ()

Pentru ca scriptul să funcționeze cu un element al paginii, acest element trebuie întâi găsit. Există mai multe moduri de a face acest lucru în JavaScript. Elementul găsit este de obicei atribuit unei variabile, iar mai târziu, prin această variabilă, srkipt se referă la element și efectuează câteva acțiuni cu acesta.

Căutare după cod

Dacă atributul id este setat pentru un element din codul paginii, atunci elementul poate fi găsit de id. Acesta este cel mai simplu mod. Elementul este căutat folosind metoda getElementById () a obiectului document global.

document.getElementById (id)

Opțiuni:

id - id-ul elementului de găsit. id este un șir, deci trebuie să fie citat.

Să creăm o pagină, să îi adăugăm un element și să îi atribuim un id și să găsim acest element în script:

Cod HTML:

JavaScript:

Am atribuit elementul găsit blocului variabil și am imprimat variabila pe consolă. Deschideți consola browserului, ar trebui să aibă un articol listat.

Deoarece navigarea după id este cea mai simplă și mod convenabil, îl folosesc adesea. Dacă trebuie să lucrați cu un element din script, atunci atributul id este setat pentru acest element în codul paginii, chiar dacă nu a fost setat mai devreme. Și găsesc elementul după id.

Căutare după clasă

Metoda getElementsByClassName () vă permite să găsiți toate elementele care aparțin unei anumite clase.

document.getElementsByClassName (clasă)

Opțiuni:

clasă - clasa elementelor de găsit

Metoda returnează un pseudo-tablou care conține elementele găsite. Se numește pseudo-matrice, deoarece multe dintre metodele matrice nu funcționează pentru aceasta. Dar proprietatea principală rămâne - puteți face referire la orice element al matricei. Chiar dacă se găsește un singur element, acesta se află încă în matrice.

Să adăugăm elemente la pagină și să le oferim o clasă. Vom plasa câteva dintre elementele în interiorul blocului pe care l-am creat mai devreme. Să creăm cealaltă parte în afara blocului. Sensul acestui lucru va fi clar puțin mai târziu. Pagina va arăta astfel:

Cod HTML:

JavaScript:

Acum se găsesc doar acele elemente care se află în bloc.

Căutare după etichetă

Metoda getElementsByTagName () găsește toate elementele cu o etichetă specifică. De asemenea, returnează un pseudo-tablou cu elementele găsite.

document.getElementsByTagName (etichetă)

Opțiuni:

tag - eticheta elementelor de găsit

Să găsim toate etichetele p care sunt pe pagină:

Această metodă poate fi de asemenea aplicată nu întregului document, ci unui anumit element. Găsiți toate etichetele p din bloc.

Căutare selector

Există metode querySelector () și querySelectorAll () care găsesc elemente care se potrivesc cu un selector specific. Adică se vor găsi elemente cărora li s-ar fi aplicat stilul dacă ar fi fost specificat cu un astfel de selector. În același timp, prezența unui astfel de selector în stilul paginii nu este deloc necesară. Aceste metode nu au nicio legătură cu CSS. Metoda querySelectorAll () găsește toate elementele care se potrivesc cu selectorul. Și metoda querySelector () găsește un element care este primul din codul paginii. Aceste metode pot înlocui toate modalitățile de a găsi elemente discutate anterior, deoarece există un selector după id, un selector după etichetă și multe altele.

document.querySelector (selector)

document.querySelectorAll (selector)

Selectoarele sunt scrise exact la fel ca în CSS, nu uitați să puneți ghilimele.

Să adăugăm o listă la pagină și să o găsim de selector. Căutăm un singur element și știm cu siguranță că va fi primul, deoarece există doar unul pe pagină. Prin urmare, în acest caz, este mai convenabil să utilizați metoda querySelector (). Dar atunci când utilizați această metodă, trebuie să luați în considerare faptul că aceleași elemente pot fi adăugate pe pagină în viitor. Cu toate acestea, acest lucru se aplică majorității metodelor.

Cod HTML:

Aceste metode pot căuta, de asemenea, elemente nu în întregul document, ci în interiorul unui anumit element.

În exemplu, am folosit selectoare numai după etichetă. Încercați să găsiți elemente de pagină folosind alți selectori.

Elemente vecine

Pentru elementul găsit, puteți găsi vecini. Fiecare element este un obiect, iar elementele învecinate pot fi obținute prin proprietățile acestui obiect. Proprietatea previousElementSibling conține elementul anterior, iar proprietatea nextElementSibling conține elementul următor.

element.previousElementSibling

element.nextElementSibling

Să găsim elementul care urmează blocului:

Elemente copil

Proprietatea pentru copii conține o serie de copii.

element.copii

Să găsim copiii blocului.

Ultima actualizare: 1.11.2015

Obiectul document, care este definit în obiectul ferestrei globale, este utilizat pentru a lucra cu structura DOM în JavaScript. Obiectul document oferă o serie de proprietăți și metode pentru manipularea elementelor paginii.

Găsiți articole

Următoarele metode sunt utilizate pentru a găsi elemente pe o pagină:

getElementById (valoare): selectează un element al cărui atribut id este valoare

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

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

querySelector (valoare): selectează primul element care se potrivește valorii selectorului css

querySelectorAll (valoare): Selectează toate elementele care se potrivesc cu selectorul de valoare CSS

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

Apelați document.getElementById („header”) pentru a găsi elementul cu id = „header”. Și folosind proprietatea innerText, puteți obține textul elementului găsit.

Căutați o anumită etichetă:

Apelați document.getElementsByTagName („p”) pentru a găsi toate elementele de paragraf. Acest apel returnează o serie de elemente găsite. Prin urmare, pentru a obține elemente individuale matrice, trebuie să le parcurgeți într-o buclă.

Dacă trebuie să obținem doar primul element, atunci putem merge la 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ă:

Selectare prin selector CSS:

Expresia document.querySelector (". Adnotare 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, atunci metoda o va selecta pe prima. Ca urmare, browserul va afișa:

Rezumat articol Prim paragraf Al doilea paragraf Text selector: Rezumat articol

Pentru a obține toate elementele printr-un selector, puteți utiliza în mod similar metoda document.querySelectorAll, care returnează o serie de elemente găsite:

Ieșire browser:

Rezumatul articolului Primul paragraf Al doilea paragraf Text selector 0: Primul paragraf Text selector 1: Al doilea paragraf

În această lecție, vom analiza metodele obiectului document, care sunt concepute pentru a căuta un nod sau o colecție de noduri în întregul document. Și, de asemenea, metode ale obiectului nod (nod), care efectuează acțiuni similare, dar deja printre nodurile copilului lor.

Metode pentru găsirea unui nod sau a unei colecții de noduri într-un copac

În lecția anterioară, ne-am uitat la proprietățile cu care putem naviga în copac și să găsim nodurile de care avem nevoie. Dar, găsirea nodurilor folosind proprietățile lor este foarte dificilă și ineficientă. Prin urmare, pentru a găsi noduri într-un copac, dezvoltatorii web utilizează de obicei metode dedicate pe obiectul documentului sau nodul.

Metoda GetElementById ()

Metoda getElementById (elementID) returnează elementul din document cu identificatorul specificat (id = "elementID") ca obiect Node. Dacă elementul cu identificatorul specificat nu există, atunci aceasta metoda se intoarce nul.

Conform standardului, documentul dvs. nu poate avea mai multe elemente cu aceeași valoare a atributului id, adică valoarea identificatorului trebuie să fie unică în cadrul aceluiași document. Cu toate acestea, dacă aveți mai multe elemente cu id-ul specificat în document, atunci metoda getElementById () va returna primul element găsit.

document.getElementById (elementID)

Această metodă are un parametru obligatoriu (elementID), care este un șir care conține valoarea atributului id al elementului pe care doriți să îl preluați.

De exemplu, modificați culoarea textului unui element cu id = "nameArticie".

Titlul articolului

• 1 punct
• 2 puncte
• 3 puncte

Metoda GetElementsByClassName ()

Metoda getElementsByClassName (className) returnează toate elementele găsite în document (pentru document) sau printre nodurile copil (pentru nod) care au numele clasei specificat (class = "className") ca obiect NodeList (colecție de noduri). Cu alte cuvinte, această metodă returnează un obiect NodeList, care este o colecție de elemente (noduri) care au numele clasei specificat în parametrul acestei metode.

Pentru a obține numărul de noduri găsite, trebuie să utilizați proprietatea length a obiectului NodeList. Și pentru a itera pe toate nodurile din colecție, puteți utiliza următoarea buclă:

Var elementsList = document.getElementsByClassName ("listă"); pentru (var i = 0; i

document.getElementByClassName (className);
nod (nod) .getElementByClassName (className);

Această metodă are un parametru obligatoriu (className), care este un șir care conține numele clasei de elemente pe care doriți să le primiți. Dacă doriți să obțineți elemente care au mai multe clase specificate, atunci acestea trebuie separate prin utilizarea unui spațiu în parametrul acestei metode. De exemplu, obțineți o colecție de noduri care au clase classl și class2:

Document.getElementsByClassName ("classl class2");

De exemplu, modificați culoarea de fundal a elementelor care au o clasă de listă:

Titlul articolului

• 1 punct
• 2 puncte
• 3 puncte

• 1 punct
• 2 puncte

De exemplu, obțineți o colecție de elemente (noduri) care au clasa listă. Apoi, obțineți 2 noduri în această colecție, adică nod cu index 1. Apoi schimbați culoarea de fundal a nodului rezultat.

// Obțineți o colecție de elemente care au clasa listă var elementsList = document.getElementsByClassName ("listă"); // Obțineți al doilea nod din colecția var SecondList = elementsList; // Schimbați culoarea de fundal a elementului secondList.style.backgroundColor = "roșu";

Metoda GetElementsByTagName ()

Metoda getElementsByTagName (tagname) returnează toate elementele găsite în document (pentru document) sau printre nodurile copil (pentru nod) care au eticheta specificată ca obiect NodeList (colecție de noduri). Obținerea unui anumit nod într-o colecție se face prin index. Numărarea elementelor (nodurilor) din colecție începe de la 0.

document.getElementsByTagName (tagname);
nod (nod) .getElementsByTagName (tagname);

Această metodă are un parametru necesar (tagname), care este un șir care conține numele etichetei cu litere mari. Dacă specificați un șir care conține un asterisc ("*") ca parametru, atunci obținem toate elementele din document (pentru obiectul document) sau toate elementele copil ale nodului (pentru obiectul nod).

Pentru a obține numărul de noduri găsite conținute în colecție, trebuie să utilizați proprietatea length a obiectului NodeList. Și pentru a itera pe toate nodurile din colecție, puteți utiliza următoarea buclă:

Var elementsList = document.getElementsByTagName ("LI"); pentru (var i = 0; i

De exemplu, modificați culoarea de fundal a elementelor LI:

Titlul articolului

• 1 punct
• 2 puncte
• 3 puncte

De exemplu, obțineți o colecție de articole UL. Apoi, obțineți 1 nod în această colecție, adică nod cu index 0. Apoi obțineți colecția de noduri copil LI pentru acest nod. În cele din urmă, modificați dimensiunea fontului pentru fiecare articol din această colecție.

// Obțineți colecția de elemente UL var elementsUL = document.getElementsByTagName ("UL"); // Obțineți 1 nod în această colecție var elementUL = elementsUL; // Obțineți colecția de copii LI ai nodului elementUL var elementsLI = elementUL.getElementsByTagName ("LI"); // iterați peste toate elementele din colecție pentru (var i = 0; i

Metoda GetElementsByName ()

Metoda getElementsByName (nume) returnează toate elementele găsite în document care au numele specificat (valoarea atributului nume) ca obiect NodeList (colecție de noduri).

Elementele (nodurile) sunt adăugate la colecție în ordinea în care apar în arbore. Obținerea unui anumit nod într-o colecție se face prin index. Numărarea elementelor (nodurilor) din colecție începe de la 0.

Var elementsList = document.getElementsByName ("telefon"); pentru (var i = 0; i

Notă: HTML5 a depreciat atributul nume și l-a înlocuit cu atributul id pentru majoritatea elementelor.

document.getElementsByName (nume)

Această metodă are un parametru necesar (nume), care este un șir care conține valoarea atributului nume.

De exemplu, modificați culoarea de fundal a elementelor care au un atribut de nume cu valoarea telefon (nume = "telefon"):

Telefon: Un alt telefon:

Metoda QuerySelector ()

Metoda querySelector () returnează primul element găsit în document (pentru document) sau printre nodurile copil (pentru nod) care se potrivește cu selectorul CSS specificat ca parametru pentru această metodă. Dacă niciun element nu se potrivește cu selectorul CSS, atunci această metodă returnează nul.

document.querySelector (cssSelector)
node.querySelector (cssSelector)

Această metodă are un parametru necesar (cssSelector), care este un șir care conține selectorul CSS conform căruia este selectat elementul.

De exemplu, modificați culoarea textului primului element găsit care se potrivește cu selectorul #main p:

De exemplu, obțineți o colecție de elemente DIV într-un document. Apoi, obțineți 1 nod în această colecție, adică nod cu index 0. Pentru acest nod, găsiți printre copiii săi primul element care se potrivește cu selectorul CSS h1 + p. Apoi modificați dimensiunea fontului acestui element.

// Obțineți o colecție de elemente DIV var elementsDIV = document.getElementsByTagName ("DIV"); // Obțineți 1 nod în această colecție var elementDIV = elementsDIV; // Obțineți nodul p imediat după nodul h1 // Căutați nodul între nodurile copil ale nodului, care este stocat în variabila elementDIV var elementP = elementDIV.querySelector ("h1 + p"); // modificați dimensiunea fontului elementului elementP.style.fontSize = "30px";

Metoda QuerySelectorAll ()

Metoda querySelectorAll () returnează toate elementele găsite în document (pentru document) sau printre nodurile copil (pentru nod) care se potrivesc cu selectorul CSS specificat ca parametru pentru această metodă, ca obiect NodeList (colecție de noduri). Nodurile din colecție sunt menționate prin index. Numărarea elementelor (nodurilor) din colecție începe de la 0.

Pentru a obține numărul de noduri găsite, utilizați proprietatea length a obiectului NodeList. Și pentru a itera pe toate nodurile din colecție, puteți utiliza următoarea buclă:

Var elementsList = document.querySelectorAll ("# p principal"); pentru (var i = 0; i

document.querySelectorAll (cssSelector);
nod (nod) .querySelectorAll (cssSelector);

Această metodă are un parametru necesar (cssSelector), care este un șir care conține un selector CSS în funcție de care elemente sunt selectate. Pentru a specifica mai mulți selectori într-un parametru al acestei metode, aceștia trebuie separați prin virgule.

De exemplu, modificați culoarea textului elementelor care se potrivesc cu selectorul #main p:

De exemplu, obțineți un nod copil care are un atribut id setat la bara laterală. Schimbați culoarea de fundal a p copiii nodului obținut în pasul anterior:

// obțineți elementul (nod) cu id = "sidebar" var sidebar = document.getElementById ("sidebar"); // obțineți colecția de noduri care se potrivesc cu selectorul "p" var elementsListP = sidebar.querySelectorAll ("p"); // iterați peste toate elementele din colecție pentru (var i = 0; i

Exercițiu

Scrieți cod JavaScript folosind getElementById (), getElementsByClassName (), getElementsByTagName (), querySelector (), querySelectorAll () pentru următoarele sarcini:

1. Obțineți toate elementele p situate în blocul principal;
2. Obțineți blocul deoparte situat în divul containerului;
3. Obțineți blocul de subsol situat în containerul caroseriei.

Efectuați fiecare sarcină în cât mai multe moduri diferite posibil.