Js obține valoarea unui atribut. Manipularea atributelor elementului în jQuery

Puteți crea o legătură personalizată legături, care va verifica valoarea unui anumit boolean observabil înainte de a adăuga sau nu atribute. Vezi acest exemplu:

Ko.bindingHandlers.attrIf = (update: function (element, valueAccessor, allBindingsAccessor) (var h = ko.utils.unwrapObservable (valueAccessor ()); var show = ko.utils.unwrapObservable (h._if); if (show) (ko.bindingHandlers.attr.update (element, valueAccessor, allBindingsAccessor);) else (pentru (var k în h) (if (h.hasOwnProperty (k) && k.indexOf ("_")! == 0) ( $ (element) .removeAttr (k);))))); legătură

Aș vrea să pot răspunde doar @gbs, dar nu pot. Soluția mea ar fi să aibă două elemente HTML identice, unul cu un atribut, unul fără și o condiție knockout pentru a adăuga unul dintre ele pentru a se potrivi cu elementul. De asemenea, sunt conștient de această așteptare obișnuită, dar care soluție este mai eficientă?

Acest tutorial este despre citirea și modificarea atributelor elementului în jQuery.

Atributele sunt o pereche nume / valoare care este atribuită elementelor dintr-o etichetă. Exemple de atribute ( href, titlu, src, clasă):

• attr () pentru a citi, adăuga și modifica atribute
• removeAttr () pentru a elimina atributele

Această lecție explică cum să lucrați cu metodele attr () și removeAttr ().

Există metode jQuery speciale pentru lucrul cu clasele CSS, care sunt descrise într-un alt tutorial. Când lucrați la un proiect în jQuery, trebuie să manipulați foarte des clasele CSS, iar atributul clasei poate conține mai multe nume de clase, ceea ce face mult mai dificilă lucrul cu alte atribute.

Dacă aveți de gând să lucrați cu valorile câmpurilor de intrare, atunci este mai bine să utilizați metoda val (), care nu numai că oferă o modalitate simplificată de a lucra cu atributul valoare, dar poate citi și seta valori în elementele selectate din lista de selectare.

Citirea valorii atributului

Citirea valorii unui atribut al unui element este simplă. Trebuie doar să apelați metoda attr () pe obiectul jQuery care conține elementul, trecându-i numele atributului de citit. Metoda returnează valoarea atributului:

// Afișați valoarea atributului "href" al alertei elementului #myLink ($ ("a # myLink"). Attr ("href"));

Dacă obiectul dvs. jQuery conține mai multe elemente, metoda attr () citește numai valorile atributelor pentru primul element din set.

Setarea valorilor atributelor

Metoda attr () poate fi, de asemenea, utilizată pentru a adăuga sau modifica valorile atributelor:

• Dacă atributul nu existaîn element, va fi adăugatși i se va atribui valoarea dată.
• Dacă atributul deja exista, valoarea sa va fi actualizat valoarea specificată.

Există trei moduri de a utiliza metoda attr () pentru a adăuga sau modifica atribute:

1. Puteți adăuga / modifica atribute pentru orice element (sau set de elemente).
2. Puteți adăuga / modifica mai multe atribute simultan pentru un element (sau elemente) specificând o hartă a numelor și valorilor atributelor.
3. puteți adăuga / modifica dinamic un singur atribut pentru mai multe elemente folosind o funcție de apel invers.

Setarea unui atribut

Pentru a seta sau modifica un atribut al unui element, apelați metoda attr () cu numele și valoarea atributului. De exemplu:

// Schimbați valoarea atributului „href” al elementului #myLink la „http://www.example.com/” // (dacă atributul „href” nu există, va fi creat automat) $ ( "a # myLink"). attr ("href", "http://www.example.com/");

De asemenea, este posibil să setați același atribut pentru mai multe elemente:

Setarea câtorva atribute folosind o hartă

Puteți seta mai multe atribute în același timp pentru unul sau mai multe elemente folosind o hartă. Aceasta este o listă de perechi nume / valoare care arată astfel:

(nume1: valoare1, nume2: valoare2, ...)

Următorul exemplu setează două atribute pentru elementul img în același timp:

// Setați atributele „src” și „alt” pentru elementul img #myPhoto $ ("img # myPhoto"). Attr (("src": "mypic.jpg", "alt": "Fotografia mea")) ;

De asemenea, puteți seta atribute pentru mai multe elemente:

// Setați atributele "src" și "alt" pentru toate elementele img $ ("img"). Attr (("src": "mypic.jpg", "alt": "Fotografia mea"));

Setarea atributelor utilizând o funcție de apel invers

În loc să transmiteți valorile atributelor metodei attr (), puteți trece numele funcției de apel invers. Aceasta vă permite să setați dinamic valorile atributelor pentru mai multe elemente în funcție de poziția elementului, valoarea atributului existent sau alte proprietăți.

Funcția de returnare trebuie să ia două argumente:

• Indexul poziției elementului selectat curent în set (începând de la zero)
• vechea valoare a atributului pentru elementul selectat în prezent

Valoarea returnată a funcției este utilizată pentru a înlocui valoarea atributului.

În plus față de poziția actuală a elementului și de vechea valoare a atributului, funcția dvs. poate accesa elementul însuși folosind acest cuvânt cheie. În acest fel, puteți accesa orice proprietate sau metodă a unui element dintr-o funcție de apel invers.

Exemplul folosește o funcție de apel invers pentru a adăuga un atribut alt fiecărei imagini de pe pagină pe baza poziției imaginii și a atributului său src:

După rularea codului, prima imagine va avea un atribut alt cu valoarea „Figura 1: myphoto.jpg”, iar a doua imagine va avea un atribut alt cu valoarea „Figura 2: yourphoto.jpg”.

Eliminarea unui atribut

Pentru a elimina un atribut dintr-un element, apelați metoda removeAttr (), trecându-i numele atributului de eliminat. De exemplu:

// Eliminați atributul „title” din elementul #myLink $ („a # myLink”). RemoveAttr („title”);

De asemenea, puteți apela metoda removeAttr () pe un obiect jQuery care conține mai multe elemente. Metoda removeAttr () va elimina atributul dat din toate elementele:

// Eliminați atributul „title” din toate linkurile $ („a”). RemoveAttr („title”);

rezumat

Această lecție a acoperit problemele legate de lucrul cu atributele elementului în jQuery:

• Citirea valorilor atributelor
• Setarea unui atribut
• Setarea mai multor atribute diferite în același timp
• Utilizarea unei funcții de apel invers pentru a seta dinamic valorile atributelor într-un șablon
• Eliminarea atributelor dintr-un element

Setează valoarea unui atribut pe elementul specificat. Dacă atributul există deja, valoarea este actualizată; în caz contrar, se adaugă un nou atribut cu numele și valoarea specificate.

Sintaxă

Element.setAttribute ( Nume, valoare);

Parametrii

nume Un DOMString specificând numele atributului a cărui valoare urmează să fie setată. Numele atributului este convertit automat în minuscule când setAttribute () este apelat la un element HTML dintr-un document HTML. valoare Un DOMString care conține valoarea de atribuit atributului. Orice valoare non-string specificată este convertită automat într-un șir.

Atributele booleene sunt considerate adevărate dacă sunt „prezente deloc pe element, indiferent de valoarea lor reală; de regulă, ar trebui să specificați șirul gol („ ”) în valoare (unii oameni folosesc numele atributului; aceasta funcționează, dar este non-standard). Vedeți mai jos pentru o demonstrație practică.

Deoarece valoarea specificată devine convertită într-un șir, specificarea nulului nu face neapărat ceea ce vă așteptați. În loc să eliminați atributul sau să setați valoarea acestuia ca fiind nulă, în schimb, setează valoarea atributului "s la șirul" nul ". Dacă doriți să eliminați un atribut, apelați removeAttribute ().

Valoare returnată

Excepții

InvalidCharacterError Numele atributului specificat conține unul sau mai multe caractere care nu sunt valide în numele atributelor.

Exemplu

În exemplul următor, setAttribute () este utilizat pentru a seta atribute pe un.

HTML

Salut Lume

JavaScript

var b = document.querySelector ("buton"); b.setAttribute ("nume", "helloButton"); b.setAttribute ("dezactivat", "");

Acest lucru demonstrează două lucruri:

• Primul apel pentru setAttribute () de mai sus arată schimbarea valorii atributului de nume în „helloButton”. Puteți vedea acest lucru folosind inspectorul de pagini al browserului dvs. (Chrome, Edge, Firefox, Safari).
• Pentru a seta valoarea unui atribut boolean, cum ar fi dezactivat, puteți specifica orice valoare. Un șir gol sau numele atributului sunt valori recomandate. Tot ce contează este că, dacă atributul este prezent, indiferent de valoarea sa reală, valoarea sa este considerată a fi adevărată. Absența atributului înseamnă că valoarea acestuia este falsă. Prin setarea valorii atributului dezactivat la șirul gol (""), setăm dezactivat la adevărat, ceea ce duce la dezactivarea butonului.

Metode DOM care se ocupă de atributele elementului:

Nu sunt conștiente de spațiul de nume, metodele cele mai frecvent utilizate	Variante compatibile cu spațiul de nume (nivelul 2 DOM)	Metode DOM Nivel 1 pentru tratarea directă a nodurilor Attr (rareori folosite)	Metode DOM Nivel 2 conștient de spațiu de nume pentru a trata direct nodurile Attr (rareori utilizate)
setAttribute (DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute (DOM 2)	hasAttributeNS	-	-
removeAttribute (DOM 1)	removeAttributeNS	removeAttributeNode	-

Specificație

• Core DOM Level 2: setAttribute (introdus în DOM Level 1 Core)

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

	Desktop						Mobil
	Crom	Margine	Firefox	Internet Explorer	Operă	Safari	Vizualizare web Android	Chrome pentru Android	Firefox pentru Android	Opera pentru Android	Safari pe iOS	Samsung Internet
setAttribute	Chrome Suport complet Da	Suport Edge complet 12	Firefox Suport complet Da	IE Suport complet 5 Note Suport complet 5 Note Note În Internet Explorer 7 și versiunile anterioare, setAttribute nu setează stiluri și elimină evenimentele atunci când încercați să le setați.	Opera Suport complet Da	Suport complet Safari 6	WebView Android Suport complet Da	Chrome Android Suport complet Da	Firefox Android Suport complet Da	Opera Android Suport complet Da	Safari iOS Suport complet Da	Samsung Internet Android Suport complet Da

Legendă

Suport complet Suport complet Consultați notele de implementare. Consultați notele de implementare.

Notează Gecko

Utilizarea setAttribute () pentru a modifica anumite atribute, în special valoarea în XUL, funcționează neconcordant, deoarece atributul specifică valoarea implicită. Pentru a accesa sau modifica valorile curente, ar trebui să utilizați proprietățile. De exemplu, utilizați Element.value în loc de Element.setAttribute ().

În acest articol, vom face cunoștință cu proprietățile și atributele DOM, vom analiza modul în care acestea diferă și cum să lucrăm corect cu ele. Să aruncăm o privire la ce sunt metodele JavaScript pentru efectuarea operațiunilor pe atribute.

Cum diferă un atribut de o proprietate DOM?

Atributele sunt entități HTML cu care putem adăuga date specifice elementelor din codul HTML.

Când browserul solicită o pagină, primește codul său sursă HTML. După aceea, analizează acest cod și construiește DOM pe baza acestuia. În timpul acestui proces Atributele HTML ale elementelor sunt traduse în proprietăți DOM corespunzătoare.

De exemplu, un browser, atunci când citește următoarea linie de cod HTML, va crea următoarele proprietăți DOM pentru acest element: id, className, src și alt.

Aceste proprietăți sunt accesate în cod JavaScript ca proprietăți ale unui obiect. Obiectul aici este nodul (elementul) DOM.

Un exemplu în care obținem valorile proprietăților DOM pentru elementul de mai sus și le imprimăm valorile în consolă:

// obțineți elementul var brandImg = document.querySelector ("# brand"); // tipăriți pe consolă valorile proprietăților DOM ale elementului console.log (brandImg.id); // „brand” console.log (brandImg.className); // „brand” console.log (brandImg.src); // "/logo.png" console.log (brandImg.alt); // „sigla site-ului”

Unele nume de proprietăți DOM nu se potrivesc cu numele atributelor. Unul dintre acestea este atributul clasei. Acest atribut corespunde proprietății DOM className. Această diferență se datorează faptului că clasa este un cuvânt cheie în JavaScript, este rezervată și nu poate fi utilizată. Din această cauză, dezvoltatorii standardului au decis să folosească un alt nume pentru meci, care a fost ales drept className.

O altă nuanță este legată de faptul că traducerea atributelor HTML specificate în codul sursă al documentului în proprietăți DOM nu se face întotdeauna unul la unu.

Dacă un element are un atribut HTML non-standard, atunci proprietatea care îi corespunde în DOM nu este creată.

O altă diferență este că valorile anumitor atribute HTML și proprietățile DOM corespunzătoare ale acestora pot fi diferite. Acestea. un atribut poate avea o valoare, dar o proprietate DOM creată din acesta poate avea o altă valoare.

Unul dintre aceste atribute este bifat.

Valoarea atributului verificat HTML, în acest caz, este un șir gol. Dar, proprietatea corespunzătoare atributului dat în DOM va avea valoarea true. pentru că conform regulilor standardului, pentru a stabili adevărul, este suficient doar să menționăm acest atribut în codul HTML și nu contează ce valoare va avea.

În același timp, chiar dacă nu specificăm atributul bifat pentru elementul de intrare cu tipul casetei de selectare în codul HTML, atunci proprietatea bifată va fi în continuare creată în DOM pentru aceasta, dar va fi egală cu falsă.

În plus, JavaScript vă permite să lucrați și cu atribute. Există metode speciale pentru acest lucru în API-ul DOM. Dar este recomandabil să le utilizați numai atunci când într-adevăr trebuie să lucrați cu datele în acest fel.

În același timp, trebuie să știți că atunci când schimbăm proprietatea DOM a unui element, se schimbă și atributul corespunzător și invers. Dar acest proces în browsere nu se face întotdeauna unul la unu.

Principalele diferențe dintre proprietățile și atributele DOM sunt:

• valoarea unui atribut este întotdeauna un șir, iar valoarea unei proprietăți DOM este un tip de date specific (nu neapărat un șir);
• numele atributului nu distinge majuscule și minuscule, iar proprietățile DOM sunt sensibile la majuscule și minuscule. Acestea. în codul HTML, putem, de exemplu, să scriem atributul id HTML ca Id, ID etc. Același lucru este valabil și pentru numele atributului, pe care îl specificăm în metode JavaScript speciale pentru a lucra cu acesta. Dar ne putem referi la proprietatea DOM corespunzătoare numai prin id și în nici un alt mod.

Lucrul cu proprietățile DOM ale unui element

După cum sa menționat mai sus, lucrul cu proprietățile elementelor din JavaScript se efectuează ca și cu proprietățile obiectelor.

Dar pentru a accesa o proprietate a unui element, trebuie mai întâi să o obțineți. Puteți obține un element DOM în JavaScript, de exemplu, utilizând metoda generică querySelector și o colecție de elemente DOM, de exemplu, utilizând querySelectorAll.

Ca prim exemplu, luați în considerare următorul element HTML:

Pe baza acestuia, vom analiza modul în care proprietățile DOM sunt obținute, modificate și adăugate altele noi.

Citirea valorilor proprietății DOM:

// obțineți valoarea proprietății DOM id var alertId = alert.id; // "alert" // obține valoarea proprietății DOM className var alertClass = alert.className; // "alert alert-info" // obține valoarea DOM a proprietății titlului var alertId = alert.title; // „Text de tip tooltip ...”

Modificarea valorilor proprietății DOM:

// pentru a modifica valoarea proprietății DOM, trebuie doar să atribuie o nouă valoare alert.title = "(! LANG: Text nou pentru prompt"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Adăugarea proprietăților DOM:

Alert.lang = "ru"; // setați proprietatea lang la "ru" alert.dir = "ltr"; // setați proprietatea dir la "ltr"

Un exemplu în care vom imprima pe consolă toate valorile claselor pe care le au elementele p de pe pagină:

Var paragrafe = document.querySelectorAll ("p"); pentru (var i = 0, lungime = paragrafe. lungime; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Un exemplu în care vom seta toate elementele cu clasa de conținut proprietatea lang cu valoarea „ru”:

Var content = document.querySelectorAll (". Content"); pentru (var i = 0, lungime = conținut.lungime; i< length; i++) { contents[i].lang = "ru"; }

Atributele elementelor și metodele de lucru cu ele

Atributele sunt setate inițial în cod HTML. Deși sunt legate, într-un fel, de proprietăți, nu sunt același lucru. În majoritatea cazurilor, ar trebui să lucrați cu proprietăți și să accesați atributele numai atunci când aveți cu adevărat nevoie.

Valorile atributelor, spre deosebire de proprietățile DOM, așa cum s-a menționat mai sus, sunt întotdeauna un șir.

JavaScript are patru metode pentru efectuarea operațiilor de atribuire:

• .hasAttribute ("attribute_name") - verifică prezența atributului specificat pe element. Dacă elementul are un atribut bifat, atunci această metodă returnează adevărat, altfel - fals.
• .getAttribute ("nume_atribut") - obține valoarea atributului. Dacă elementul nu are atributul specificat, atunci această metodă returnează un șir gol ("") sau nul.
• .setAttribute ("attribute_name", "attribute_value") - setează atributul specificat cu valoarea specificată la element. Dacă elementul are atributul specificat, atunci această metodă își va schimba pur și simplu valoarea.
• .removeAttribute ("attribute_name") - elimină atributul specificat din element.

Să ne uităm la câteva exemple.

Un exemplu foarte interesant cu atributul value.

Exemplu cu atribut valoare

Să obținem valoarea atributului de valoare și valoarea proprietății DOM:

// obțineți valoarea atributului valorii elementului name.getAttribute („valoare”); // „Bob” // obține valoarea proprietății DOM nume.valor; // „Bob” // actualizează valoarea atributului value, setează-l la o valoare nouă name.setAttribute („value”, „Tom”); // „Tom” // obține valoarea proprietății DOM nume.valor; // „Tom”

Din acest exemplu, puteți vedea că atunci când atributul valoare se modifică, browserul modifică automat valoarea proprietății DOM în consecință.

Acum să facem opusul și anume să schimbăm valoarea proprietății DOM și să verificăm dacă valoarea atributului se schimbă:

// setați o nouă valoare la valoarea proprietății DOM name.value = "(! LANG: John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

După cum puteți vedea din acest exemplu, modificarea unei proprietăți DOM nu duce întotdeauna la o modificare corespunzătoare a atributului. Acestea. în acest caz, modificarea valorii proprietății DOM nu modifică atributul corespunzător.

La fel se va întâmpla atunci când utilizatorul introduce text în acest câmp. Valoarea proprietății DOM va conține valoarea reală, iar atributul corespunzător va conține valoarea inițială sau cea pe care o setăm, de exemplu, folosind metoda setAttribute.

Acest exemplu arată că este mai corect să lucrați întotdeauna cu proprietăți DOM și trebuie să accesați atributul numai atunci când este cu adevărat necesar.

Chiar dacă trebuie să obțineți valoarea inițială stabilită în HTML, puteți utiliza proprietatea. Proprietatea care conține valoarea inițială a atributului value se numește defaultValue.

Name.defaultValue; // Tom

Un alt exemplu foarte interesant, dar acum cu atributul href.

Exemplu cu atributul href

Un exemplu în care trebuie să obținem valoarea link-ului așa cum a fost setată în HTML.

În acest exemplu, atributul href și proprietatea DOM href conțin valori diferite. Atributul href este ceea ce setăm în cod, iar proprietatea DOM este adresa URL completă. Această distincție este dictată de standardul potrivit căruia browserul trebuie să potrivească valoarea href cu adresa URL completă.

Prin urmare, dacă trebuie să obținem ceea ce este în atribut, atunci nu putem face fără metoda getAttribute în acest caz.

În cele din urmă, să aruncăm o privire asupra atributului selectat.

Exemplu cu atributul selectat

Un exemplu care arată cum puteți obține valoarea opțiunii selectate selectați:

fără rating 1 2 3 4 5

Un exemplu care arată cum puteți obține valorile opțiunii selectate într-un element selectat:

fără rating 1 2 3 4 5

Un alt mod de a lucra cu atribute (proprietate atribute)

În JavaScript, fiecare element are o proprietate atribute care poate fi utilizată pentru a prelua toate atributele sale ca obiect NamedNodeMap.

Această metodă poate fi utilizată atunci când aveți nevoie, de exemplu, pentru a repeta toate atributele unui element.

Un atribut din această colecție este accesat de indexul său sau folosind metoda articolului. Atributele din această colecție sunt numărate de la 0.

De exemplu, să afișăm toate atributele unui anumit element pentru consolă:

IUBESC JAVASCRIPTUL

In afara de asta, puteți lucra și cu această colecție folosind următoarele metode:

• .getNamedItem ("nume_atribut") - obține valoarea atributului specificat (dacă atributul specificat este absent din element, atunci rezultatul va fi nul).
• .setNamedItem ("attribute_yzel") - adaugă un nou atribut unui articol sau actualizează valoarea unuia existent. Pentru a crea un atribut, trebuie să utilizați metoda document.createAttribute (), căreia trebuie să i se transmită numele atributului ca parametru. După aceea, atributului creat trebuie să i se atribuie o valoare utilizând proprietatea valoare.
• .removeNamedItem ("nume_atribut") - elimină atributul specificat din articol (returnează atributul eliminat ca rezultat).

Un exemplu de lucru cu atribute folosind metodele getNamedItem, setNamedItem și removeNamedItem:

IUBESC JAVASCRIPTUL

Sarcini

• Imprimați pe consolă toate elementele documentului care au atributul id.
• Adăugați atributul titlu la toate imaginile de pe pagină dacă nu au acest atribut. Setați valoarea atributului la valoarea atributului alt.

Lecția va acoperi începutul subiectului: modelul de obiect document (javaScript DOM) - baza HTML-ului dinamic, va explora metodele de accesare a obiectelor și va analiza modul de gestionare a evenimentelor javascript

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

Anterior, am început deja să ne cunoaștem conceptul î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:

amânare (așteptând încărcarea completă a paginii).

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

object.property object.attribute object.method ()

Să luăm în considerare un exemplu:

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

și stilul css definit pentru acesta (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.

Să finalizăm sarcina în ordine:
✍ Soluție:

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 acces la obiect prin id-ul său element var = document.getElementById ("MyElem"); element.setAttribute („clasă”, „mare”);

Ca rezultat, elementul nostru va deveni mai mare și colorat în albastru (clasa mare).

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

Metode de lucru cu atribute î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.

✍ Soluție:

• Să avem un bloc de text:

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

• Să ne uităm la mai multe moduri de a obține valoarea unui atribut (utilizați metoda alert () pentru ieșire):

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 de document în javaScript

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

1. Căutare după cod(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); // imprimați valoarea atributului valoare, adică text „număr de prăjituri”

Important: Scriptul trebuie plasat după etichetă!

Accesarea unei matrice de elemente prin numele numelui etichetei și prin indexul matricei

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”

Accesarea unei matrice de elemente după valoarea atributului nume

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:

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

În 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 elementului părinte

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 ale etichetei div:

<div id = "div_for_img"> <img src = "pic1.jpg" /> <img src = "pic2.jpg" /> <img src = "pic3.jpg" /> <img src = "pic4.jpg" /> </ div>

Acum să afișăm valorile elementelor matricei cu descendenți în fereastra modală, 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);)

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

Alte modalități de a face referire la elemente

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

<corp> <form name = "f"> <input type = "text" id = "t"> <tip de intrare = "buton" id = "b" valoare = "(! LANG: buton" > !} <selectați id = "s" nume = "ss"> <opțiunea id = "o1"> 1</ opțiune> <opțiunea id = "o2"> 3</ opțiune> <opțiunea id = "o3"> 4</ opțiune> </ selectați> </ form>

1 3 4

Acces:

... // accesorii de elemente nedorite și învechite: alert (document.forms [0] .name); // f alertă (document.forms [0] .elements [0] .type); // alertă text (document.forms [0] .elements [2] .options [1] .id); // alertă o2 (document.f .b .tip); // alertă buton (document.f .s .name); // ss alert (document.f .s .options [1] .id); // o2 // metode de accesor preferate pentru elemente alert (document.getElementById ("t") .type); // alertă text (document.getElementById ("s") .name); // ss alert (document.getElementById ("s") .options [1] .id); // 02 alertă (document.getElementById ("o3") .text); // 4 ...

... // 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); // buton alertă (document.f.s.name); // ss alert (document.f.s.options.id); // o2 // metode de accesorizare preferate pentru elemente de alertă (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";

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 nerezonabil 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 unui chestionar), ar trebui să vă referiți la proprietatea valoare. 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 se va trimite 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 de cod html:

1 2 3 4 5 6 7 8 9 10 11 12

<forma> Nume:<input type = "text" id = "name"> Număr de gogoși:<input type = "text" id = "gogoși"> Minute:<input type = "text" id = "minute"> Subtotal:<input type = "text" id = "poditog"> Impozit:<input type = "text" id = "tax"> Rezultat:<input type = "text" id = "itog"> <input type = "submit" value = "(! LANG: order" onclick = "placeOrder();" > !} </ form> <tip de script = "text / javascript"> ... </ script>

Nume:
Număr de gogoși:
Minute:
Subtotal:
Impozit:
Rezultat:

Necesar:
Completați spațiile libere din fragmentul de cod de mai jos care verifică dacă cele două câmpuri de text sunt completate corect: 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 ();"
Făcând clic pe buton, funcția placeOrder () va fi apelată