În această lecție, luăm în considerare metodele obiectului de documente, care sunt concepute pentru a căuta un nod sau o colecție de noduri pe tot parcursul documentului. Precum și metodele obiectului nod (nod) care îndeplinesc acțiuni similare, dar deja între filialele lor.

Metode concepute pentru a căuta un nod sau o colecție de noduri în copac

În lecția anterioară, am revizuit proprietățile cu care putem să ne mișcăm în jurul copacului și să găsim nodurile de care avem nevoie. Dar, căutarea nodurilor cu proprietățile ocupației este foarte dificilă și nu eficientă. Prin urmare, pentru a găsi noduri într-un copac, dezvoltatorii de web utilizează de obicei metode special concepute de document sau obiect nod (nod).

Gelelementbyid ()

Metoda GetelementByid (ElementId) returnează un element într-un document care are identificatorul specificat (ID \u003d "elementid"), ca obiect nod (nod). Dacă elementul cu identificatorul specificat nu există, această metodă returnează valoarea nulă.

În conformitate cu standardul, nu puteți avea mai multe elemente cu aceeași valoare a atributului ID, adică Valoarea identificatorului trebuie să fie unică într-un singur document. Cu toate acestea, dacă aveți mai multe elemente cu ID-ul specificat în document, metoda GetelementByid () va returna primul element găsit.

document.getelementbyid (elementid)

Această metodă are un parametru necesar (elementid), care este un șir care conține valoarea atributului ID-ului elementului pe care doriți să îl primiți.

De exemplu, schimbați culoarea textului elementului care are id \u003d "namearicie".

Titlul articolului

• 1 punct
• 2 puncte
• 3 punct

Metodă GETELEMENTSBYCLASSNAME ()

Metoda GetelementsMyClassName (clasaName) returnează toate elementele găsite din document (pentru document) sau printre nodurile copilului (pentru nod) cu numele clasei specificate (clasa \u003d "clasa"), sub forma unui obiect nodelist ( Colecții noduri). Cu alte cuvinte, această metodă returnează un obiect novelist, care este o colecție de elemente (noduri) care au numele clasei specificate în metoda parametrilor.

Pentru a obține numărul de noduri găsite, trebuie să utilizați proprietatea Lungime NODELIST. Și pentru a muta toate nodurile din colecție, puteți utiliza următorul ciclu:

Var elementeList \u003d document.getelEmentsbyclassname ("Lista"); pentru (var i \u003d 0; i

document.getelementyclassname (clasaName);
Nod (nod) .gelementyclassname (clasaName);

Această metodă are un parametru necesar (clasă), care este un șir care conține numele clasei elementelor pe care doriți să le primiți. Dacă doriți să obțineți elemente cu mai multe clase specificate, ele trebuie împărțite în parametrul acestei metode folosind un spațiu. De exemplu, obțineți o colecție de noduri având clase de clasă și clasa2:

Document.getelementsyclassname ("clasa class2");

De exemplu, schimbați culoarea fundalului elementelor care au o clasă de listă:

Titlul articolului

• 1 punct
• 2 puncte
• 3 punct

• 1 punct
• 2 puncte

De exemplu, pentru a obține o colecție de elemente (noduri) având o clasă de listă. Înainte de a obține 2 noduri în această colecție, adică. Nodul având index 1. După aceea, schimbați culoarea de fundal a nodului obținut.

// obțineți o colecție de elemente cu lista Vars ElementsList \u003d Document.GetelementsMyClasSNASS Class ("Lista"); // obțineți 2 noduri în colecția Var Secondlist \u003d elemente; // modificați culoarea de fundal a dispozitivului secundar.style.backgroolor \u003d "roșu" element;

Metoda GetelementsByTagname ()

Metoda GetelementsByTagname (eticheta) returnează toate elementele găsite din document (pentru document) sau printre nodurile copilului (pentru nod) cu eticheta specificată, sub forma obiectului nodelist (colecția de noduri). Primirea unui nod specific în colectare se efectuează prin index. Elemente de numărare (noduri) în colecția începe cu 0.

document.getelementsbytagname (eticheta);
Nod (nod) .gelementsbytagname (eticheta);

Această metodă are un parametru obligatoriu (tagname), care este un șir care conține numele etichetei indicate prin majuscule litere. Dacă specificați un șir care conține starrel ("*") ca parametru, atunci vom obține toate elementele din document (pentru obiectul documentului) sau toate elementele copilului ale nodului (pentru obiectul nodului).

Pentru a obține numărul de noduri găsite în colecție, trebuie să utilizați proprietatea Lungime NODELIST. Și pentru a muta toate nodurile din colecție, puteți utiliza următorul ciclu:

Var elementeList \u003d document.getelEmentsbytaGame ("Li"); pentru (var i \u003d 0; i

De exemplu, schimbați culoarea fundalului elementelor Li:

Titlul articolului

• 1 punct
• 2 puncte
• 3 punct

De exemplu, obțineți o colecție de elemente UL. Apoi, obțineți 1 nod în această colecție, adică. Nodul având index 0. După aceea, pentru a obține o colecție de filiale ale Li pentru acest nod. Și în concluzie, schimbați dimensiunea fontului fiecărui element din această colecție.

// obțineți o colecție de elemente UL Var Elementsul \u003d document.getelementsbytagname ("ul"); // obține 1 nod în această colecție var elementul \u003d elementul; // obțineți o colecție de elemente de copil Li elementsul var elementeli \u003d element.gelementsli \u003d element.getelementsbytagname ("Li"); // pierdeți toate elementele din The (Var I \u003d 0; i

Metoda GetelementsByName ()

Metoda GetelementSyName (Nume) Returnează toate elementele găsite din documentul care au numele specificat (valoarea atributului nume), ca un nodelist obiect (colecția de noduri).

Elemente (noduri) sunt adăugate la colecția în ordinea în care se găsesc în copac. Primirea unui nod specific în colectare se efectuează prin index. Elemente de numărare (noduri) în colecția începe cu 0.

Var ElementsList \u003d document.getelementsbyName ("telefon"); pentru (var i \u003d 0; i

Notă: În HTML5, atributul de nume este recunoscut ca fiind depășită și a fost înlocuit pentru majoritatea elementelor ID atribut.

document.getelementsbyName (nume)

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

De exemplu, schimbați culoarea de fundal a elementelor care au atributul de nume cu valoarea telefonului (nume \u003d "telefon"):

Telefon: Un alt telefon:

QuerySelector ()

Metoda QuerySelector () returnează primul element găsit în document (pentru document) sau printre nodurile copilului (pentru nod), care corespunde selectorului CSS specificat ca parametru al acestei metode. Dacă niciun element nu corespunde selectorului CSS, atunci această metodă returnează NULL.

document.QuerySelector (CSSSSESSLECTOR)
NODE.QUERYSELECTOR (CSSSSESLECTOR)

Această metodă are un parametru obligatoriu (CSSSSESLECTOR), care este un șir care conține selectorul CSS, în conformitate cu care este selectat elementul.

De exemplu, schimbați culoarea textului primului element găsit corespunzător selectorului #main P:

De exemplu, pentru a obține o colecție de elemente DIV în document. Apoi, obțineți 1 nod în această colecție, adică. Un nod care are index 0. Pentru acest nod, primul element, care corespunde selectorului CSS H1 + P, se găsește printre nodurile sale subsidiare. După aceea, schimbați dimensiunea fontului acestui articol.

// obțineți o colecție de elemente DIF Var ElementsDiv \u003d Document.GetelementsByTagname ("div"); // obține 1 nod în această colecție var elemendiv \u003d elementeDiv; // obțineți un nod P, situat imediat după nodul H1 // nodul de căutare pentru a produce printre filialele nodului, care este stocat în variabila elementadiv var elementa \u003d elementdiv.querySelector ("H1 + P"); // redimensionați elementul font elementp.style.fontsize \u003d "30px";

QuerySelectorall ()

Metoda QuerySelectoral () returnează toate elementele găsite din document (pentru document) sau printre nodurile copilului (pentru nod), care corespund selectorului CSS specificat ca parametru al acestei metode, ca obiect nodelist (colecție de noduri) . Apelul la noduri din colecție se desfășoară prin index. Elemente de numărare (noduri) în colecția începe cu 0.

Pentru a obține numărul de noduri găsite, este necesar să utilizați proprietatea Lungime NODELIST. Și pentru a muta toate nodurile din colecție, puteți utiliza următorul ciclu:

Var elementeList \u003d document.QuerySelectorall ("# Main P"); pentru (var i \u003d 0; i

document.QuerySelectorall (CSSSSESSLECTOR);
Nod (nod) .QuerySelectorall (CSSSSESSLECTOR);

Această metodă are un parametru obligatoriu (CSSSSESLECTOR), care este un șir care conține selectorul CSS, în conformitate cu elementele selectate. Pentru a specifica mai mulți selectori în parametrul acestei metode, acestea trebuie împărțite într-o virgulă.

De exemplu, schimbați culoarea textului elementelor corespunzătoare selectorului #main P:

De exemplu, obțineți un nod copil care are un atribut ID cu valoarea barei laterale. Schimbați culoarea fundalului elementelor subsidiare P NODE PRIMAT ÎN PASUL ÎNVOCAȚIE:

// obțineți un element (nod), care are id \u003d "bara laterală" var sidebar \u003d document.getelementbyid ("bara laterală"); // obțineți o colecție de noduri corespunzătoare selectorului "P" elementelorListp \u003d sidebar.QuerySelectorall ("p"); // pierdeți toate elementele din The (Var I \u003d 0; i

Sarcina

Scrieți codul în JavaScript utilizând GetelementByid (), GetelementsMyclassName (), GetelementsBytaGName (), GetelementsBytaGName (), QuerySelector (), QuerySelectorall () pentru următoarele sarcini:

1. Obțineți toate elementele P aflate în blocul principal;
2. Obțineți blocul deoparte situat în containerul DIV;
3. Obțineți blocul de subsol situat în recipientul corpului.

Fiecare sarcină este de a efectua cât mai multe metode diferite.

După cum știți - în dezvoltarea unei aplicații JS Voluminoinoase în care cea mai populară bibliotecă JQuery vine atunci când problema de performanță este ascuțită. Toate forțele sunt aruncate pe Ambrusura de profiler, fiecare provocare a fost investigată cu scrupulozitate, fiecare bucată de vânzare încărcată funcțional de snug-in din toate laturile și este destinată. Dar problemele nu provin de cealaltă parte, de unde așteaptă 90% dintre dezvoltatori. Selectori - Cât de mult din acest cuvânt.
Să ne dăm seama - cum funcționează această magie și de ce căutarea elementelor DOM poate provoca scăderea productivității aplicației.

Cum jQuery dezasamblează selectorul

În biblioteca însăși să caute articole, motorul Sizzle are o serie de caracteristici. Ne vom uita la ele.

querySelectorall ()

În noile browsere, a apărut o funcție excelentă QuerySelectorall () și QuerySelector (), care știe cum să caute elemente care utilizează capabilități de browser (în special - utilizate atunci când sunt vizualizate CSS și atribuie proprietăți elementelor). Această caracteristică nu funcționează în toate browserele, ci numai în FF 3.1+, IE8 +. (numai în modul standard IE8), Opera 9.5+(?) și Safari 3.1+. Deci, Sizzle definește întotdeauna prezența acestei funcții și încercarea oricărei căutări de a efectua prin ea. Cu toate acestea, aici nu fără surprize - pentru utilizarea cu succes a QuerySelectorall (), selectorul nostru trebuie să fie valabil.
Voi da un exemplu simplu:
Cei doi selectori premium nu sunt practic diferiți și returnează același set de elemente. Cu toate acestea, primul selector va returna rezultatul funcționării QuerySelectorall (), iar al doilea este rezultatul filtrării normale de către articole.
$ ("# # My_form input")
$ ("# # My_form input")

Analiza și căutarea selectorului

Dacă nu ați reușit să utilizați QuerySelectorall (), Sizzle va încerca să utilizeze browserul uzual GetelementByid (), getelementsbyname (), getelementsytagname () și gelelementyclass (). În majoritatea cazurilor, ele sunt suficiente, dar (SIC!) În IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
În cazul general, Sizzle dezasamblează selectorul spre stânga spre stânga. Pentru a ilustra această caracteristică, voi da câteva exemple:
$ ("Divs .my_class")
În primul rând, elementele vor fi găsite .my_class, iar apoi acelea care au.DIV-urile sunt filtrate în părinți. După cum vedem, aceasta este o operațiune destul de cost, iar utilizarea contextului nu rezolvă problema (vom vorbi despre contextul de mai jos).
Așa cum am spus - în majoritatea cazurilor, Sizzle va dezasambla selectorul spre stânga spre stânga, dar nu în cazul utilizării unui element cu ID:
$ ("# Divs .my_class")
În acest caz, selectorul se va comporta așa cum era de așteptat și va fi luat imediat element #Divs pentru utilizare sub forma unui context.

Context

Al doilea parametru transmis împreună cu selectorul la funcția $ () se numește contextul. El este conceput pentru a restrânge gama de elemente de identificare. Cu toate acestea, atunci când analizați contextul docuri la începutul selectorului, că câștigarea nu permite câștigarea. Combinația de utilizare a contextului câștigător este un selector valid pentru QuerySelectorall (), deoarece această funcție poate fi aplicată nu numai în numele documentului, ci și din element. Apoi selectorul cu contextul este format transformat următorul design:
$ ("Divs", document.getelementbyid ("wrapper"));
Document.getelementbyid ("wrapper"). QuerySelectoral ("DIFS"); // Dacă aveți ocazia de a utiliza QuerySelectoral ()

În acest exemplu, dacă nu este posibil să utilizați QuerySelectorall (), Sizzle va filtra elementele prin bust simplu.
O altă remarcă despre context (nu despre selectors) - dacă al doilea parametru din selector pentru funcția.Live () este obiectul jQuery - evenimentul va fi prins pe document (!), Și dacă obiectul DOM este de a pop up un eveniment numai la acest articol. Astfel de subtilități încerc să nu memorez, dar folosesc .delect ().

Filtre și elemente de ierarhie

Pentru a căuta elemente imbricate, puteți utiliza următorul selector:
$ ("Rădăcină\u003e .child")
După cum știm - parsarea lui Saler și căutarea vor începe pe elementele All.Child pe pagină (cu condiția ca QuerySelectorall () să nu fie disponibilă). O astfel de operațiune este destul de cost și putem transforma selectorul ca:
$ ("Copil", $ ("rădăcină")); // Utilizarea contextului nu va facilita căutarea
$ ("rădăcină"). Găsiți ("copilul"); // De ce trebuie să batăm toate elementele din interiorul .root?
$ ("Rădăcină"). Copiii ("copil"); // opțiunea cea mai corectă

Cu toate acestea, dacă este nevoie să utilizați filtre pentru orice atribute (: Vizibil, EQ, etc.) și selectorul arată astfel:
$ ("Unele_images: vizibil")
Filtrul va fi aplicat ultima dată - adică Ne retragem din nou din regula "Dreptul la stânga".

Rezultate

• Dacă este posibil, utilizați selectorii potriviți potriviți pentru QuerySelectorall ()
• Înlocuiți subordonarea în interiorul selectorilor pentru subquerie (... ...), etc.)
• Specificați contextul selectorului
• Se filtrează ca un set de element finit mai mic

Selectori rapizi în Anul Nou! Toate în venirea!

Bazat pe clasa Master

Document model de obiect - Dom. - Nu este altceva decât o structură de copaci constând din etichete existente în HTML. Document.

Avem toate aceste elemente HTML.Situat lângă celălalt, vrem să obținem și apoi să citiți datele din ele sau să schimbăm. Există multe modalități de a găsi aceste etichete, deoarece acestea sunt situate în structura copacului. În acest articol veți învăța cum să utilizați două funcții încorporate. JavaScript., la fel ca querySelector. și querySelectorall. Pentru căutare hTML. Etichete.

Metoda QuerySelectorului

Pentru a înțelege esența metodelor de metode querySelector. și querySelectorall. Uită-te la următoarea HTML:

În acest exemplu avem unul div cu identificator principal. și patru elemente investite în ea div și img., fiecare dintre acestea având valoarea clasei pic-container. și imagine de profil. respectiv. În următoarele secțiuni, aplicăm funcții. querySelector. și querySelectorall. Pe aceasta Codul HTML. Și să vedem ce se întâmplă.

querySelector.

Funcţie querySelector. Funcționează după cum urmează:

Var element \u003d document.querySelector ("< CSS selector >");

Caracteristica QuerySelectorului ia un argument și acest argument este Selector CSS. Pentru elementul pe care doriți să îl găsiți. Se intoarce caracteristica QuerySelectorului, Acesta este primul element pe care îl găsește, chiar dacă există alte elemente care pot fi similare cu acest selector.

Uitandu-ma la HTML. Din exemplul nostru anterior, dacă vrem să accesăm dival cărui identificator este principal.Trebuie să scrieți următoarele:

Var element \u003d document.querySelector ("# principal");

În măsura în care principal. este identificatorul, sintaxa selectorului pentru a obține acest lucru va fi #Principal. . În mod similar, un selector de clasă pic-container. :

Var element \u003d document.querySelector ("pic-container");

Primul bloc este returnat div , a cărui valoare este pic-container. . Alte elemente div Clasă pic-container. Doar ignorate.

Sintaxa selectorilor pentru această funcție nu a fost creată în mod specific, astfel încât să puteți utiliza sintaxa exactă pe care ați folosi pentru selectori în foaia de stil!

Asta-i tot, iar în următorul articol voi spune despre următoarea funcție querySelectorall..

JavaScript, cum ar fi CSS, are o funcționalitate care vă permite să accesați elementele HTML pentru a converti conținutul paginii. În CSS se realizează prin scrierea selectorilor. În JavaScript există mai multe moduri de a organiza această funcționalitate, iar aici este una dintre ele:

Var Primarheads \u003d document.getelementsytagname ("H1");

Acest cod extrage toate anteturile H1 și, aproximativ vorbind, le plasează în variabila primară. Dacă există mai multe anteturi pe pagină, atunci toate vor fi plasate într-o matrice.

Var ou812 \u003d document.getelementbyid ("eddie");

Acest cod selectează un element cu id \u003d "eddie".

Var Ghitars \u003d Document.GetelEmentsBlassNasnaSname ("Axe");

De asemenea, putem alege elemente după numele clasei lor.

Adăugați un mic sizzle

Un alt tip de FreymWorks JavaScript va oferi propriile lor capabilități ale selectorilor. Unul dintre cei mai de succes a fost Sizzle, care mai târziu sa transformat în jQuery. Spre deosebire de descendentul său, Sizzle nu putea decât să lucreze cu Dom și să le manipuleze. Dacă nu aveți nevoie de restul funcționalității jQuery, atunci astăzi puteți descărca Sizzle ca o bibliotecă separată.

Odată cu dezvoltarea acestor biblioteci, selectorii de scriere au scăzut semnificativ și au transformat:

$ ("# Dave"). Css ()

Acest cod preia elementul HTML cu ID \u003d "Dave" și vă permite să lucrați cu stilurile sale CSS.

Sizzle nu este singura bibliotecă JavaScript pentru manipularea codului HTML. Există, de asemenea, alte opțiuni, de exemplu, rangy. Cu toate acestea, după părerea mea, toate cele de mai sus sunt depășite înainte de a vă aștepta în continuare în acest articol.

Nivelul JavaScript de nivel nou

Mulți dezvoltatori au început adesea să folosească jQuery, care nici măcar nu a observat schimbările cardinale în JavaScript în sine.

"JavaScript selector API" este partea oficială a specificației HTML5, poate fi utilizată și când scrieți pagini XHTML. Noua sintaxă este foarte simplă:

Document.QuerySelector ("# Eddie")

Acest cod este un document absolut echivalent.GetelementByid ("Eddie"). Nu impresionant? Ce zici de asta:

Document.querySelector ("# Eddie H1 + P")

Noua funcționalitate vă permite să manipulați DOM, folosind expresii complexe CSS.

Metoda QuerySelectorului preia numai primul element. Pentru a extrage tot ce trebuie să utilizați QuerySelectorall:

Var Hifrets \u003d Document.QuerySelectorall ("Tabelul # Frets TR: NTH-COPIL (3)")

Acest cod preia fiecare a treia linie de la masă cu ID \u003d "Frets".

Câteva puncte foarte importante

Există mai multe restricții pe care ar trebui să știți dacă utilizați metoda QuerySelector / Toate:

Nu toate browserele suportă funcții noi. Dacă este important să lucrați la IE6-7, este mai bine să utilizați biblioteci care pot manipula dom: Sizzle sau JQuery.

Selectorii trebuie să fie pregătiți foarte atent, altfel browserele nu le vor înțelege, iar metodele de mai sus vor reveni NULL. În general, fiți foarte atenți, mai ales atunci când utilizați selectoare CSS3.

Spre deosebire de getlementsbytagname, metoda QuerySelectorall returnează o listă statică de elemente extrase în forma în care sunt pe pagină în acest moment. Aceasta înseamnă că atunci când faceți modificări dinamice ale codului (adăugarea, ștergerea elementelor prin JavaScript), va fi necesar să profitați de metoda QuerySelectorall.

Încercați noi caracteristici pentru a scăpa de nevoia de a descărca diferite tipuri de bibliotecă.

Ultima actualizare: 1.11.2015

Pentru a lucra cu structura DOM în JavaScript, obiectul de documente este destinat, care este definit în obiectul Global Window. Obiectul documentului oferă o serie de proprietăți și metode pentru gestionarea elementelor paginii.

Elemente de căutare

Următoarele metode sunt aplicate pentru căutarea elementelor de pe pagină:

gETELEMENTBYID (valoare): Selectează un element în care atributul ID este egal cu valoarea

gETELEMENTSBYTAGNAME (valoare): Selectează toate elementele pe care eticheta este egală cu valoarea

gETELEMENTSBYCLASSNAME (valoare): alege toate elementele care au clasa de valoare

querySelector (valoare): Selectează primul element care corespunde selectorului valoric CSS

querySelectoral (valoare): Selectează toate elementele care se potrivesc cu valoarea selectorului CSS

De exemplu, găsiți un element prin ID:

Utilizarea documentului de apel.getelementbyid ("antet") găsim un element din care id \u003d "antet". Și folosind proprietatea inertext, puteți obține textul articolului găsit găsit.

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

Folosind documentul de document.getelementsbytagname ("p"), găsim toate elementele paragrafelor. Acest apel returnează o serie de elemente găsite. Prin urmare, pentru a obține elemente separate ale matricei, trebuie să le rulați pe ele în ciclu.

Dacă trebuie doar să obținem primul element, puteți merge la primul element al colecțiilor de obiecte găsite:

Var pelement \u003d document.getelementsbytagname ("p"); Document.write ("Sexx paragraf:" + pelement.inrtext);

Obținerea unui element în clasă:

Selectarea selectorului CSS:

Expresia documentului.QuerySelector ("adnotare p" găsește un element care corespunde selectorului. Non Notation p. Dacă pagina are mai multe elemente corespunzătoare selectorului, metoda va selecta prima. Ca rezultat, browserul se va retrage:

ANNOTAȚIE Articolul primul paragraf al doilea paragraf al selectorului: articol abstract

Pentru a obține toate elementele de pe selector, puteți dori metoda document.querySelectorall, care returnează gama de elemente găsite:

Ieșire de browser:

ANNOTATION Articol Primul paragraf Selector de text al doilea paragraf 0: Primul paragraf Selector de text 1: al doilea paragraf