Questa lezione riguarda la lettura e la modifica degli attributi degli elementi in jQuery.
Gli attributi sono una coppia nome/valore assegnata agli elementi in un tag. Esempi di attributi ( href, titolo, src, classe):
Ecco il testo riassuntivo
Questa lezione tratta i metodi attr() e removeAttr().
Esistono speciali metodi jQuery per lavorare con le classi CSS, descritti in un altro tutorial. Quando si lavora su un progetto in jQuery, è molto comune manipolare le classi CSS e l'attributo class può contenere diversi nomi di classe, il che rende molto più difficile lavorare rispetto ad altri attributi.
Se hai intenzione di lavorare con i valori dei campi di input, è meglio utilizzare il metodo val(), che non solo fornisce una versione semplificata dell'attributo value, ma può anche leggere e impostare i valori negli elementi selezionati del selezionare elenco.
Lettura del valore di un attributoLeggere il valore di un attributo dell'elemento è semplice. Tutto quello che devi fare è chiamare il metodo attr() sull'oggetto jQuery che contiene l'elemento, passandogli il nome dell'attributo da leggere. Il metodo restituisce il valore dell'attributo:
// Visualizza il valore dell'attributo "href" dell'avviso dell'elemento #myLink ($("a#myLink").attr("href"));
Se il tuo oggetto jQuery contiene più elementi, il metodo attr() legge solo i valori degli attributi per il primo elemento del set.
Impostazione dei valori degli attributiIl metodo attr() può essere utilizzato anche per aggiungere o modificare i valori degli attributi:
Esistono tre modi per utilizzare il metodo attr() per aggiungere o modificare gli attributi:
Per impostare o modificare un attributo di un elemento, chiama il metodo attr() con il nome e il valore dell'attributo. Per esempio:
// Cambia il valore dell'attributo "href" dell'elemento #myLink in "http://www.example.com/" // (se l'attributo "href" non esiste, verrà creato automaticamente) $( "a#myLink"). attr("href", "http://www.example.com/");
È anche possibile impostare lo stesso attributo su più elementi:
Impostazione di più attributi utilizzando una mappaPuoi impostare più attributi contemporaneamente su uno o più elementi utilizzando una mappa. È un elenco di coppie nome/valore simile a questo:
( nome1: valore1, nome2: valore2, ... )
L'esempio seguente imposta contemporaneamente due attributi sull'elemento img:
// Imposta gli attributi "src" e "alt" per l'elemento img #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo" )) ;
Puoi anche impostare attributi su più elementi:
// Imposta gli attributi "src" e "alt" per tutti gli elementi img $("img").attr(( "src": "mypic.jpg", "alt": "My Photo" ));
Impostazione degli attributi utilizzando la funzione di richiamataInvece di passare i valori degli attributi al metodo attr(), puoi passare il nome della funzione di callback. In questo modo puoi impostare dinamicamente i valori degli attributi per più elementi in base alla posizione dell'elemento, a un valore di attributo esistente o ad altre proprietà.
La funzione di ritorno deve accettare due argomenti:
Il valore restituito dalla funzione viene utilizzato per sostituire il valore dell'attributo.
Oltre alla posizione corrente dell'elemento e al vecchio valore dell'attributo, la tua funzione può accedere all'elemento stesso utilizzando la parola chiave this. In questo modo puoi accedere a qualsiasi proprietà o metodo di un elemento da una funzione di callback.
L'esempio utilizza un callback per aggiungere un attributo alt a ciascuna immagine sulla pagina in base alla posizione dell'immagine e al suo attributo src:
$(init); function init() ( // Imposta l'attributo "alt" per tutti gli elementi "img" $("img"). attr("alt", setAltText); function setAltText(index, attributeValue) ( return ("Image " + (indice +1) + ": " + this.src); ) ) 
Dopo aver eseguito il codice, la prima immagine avrà un attributo alt con il valore "Picture 1: myphoto.jpg" e la seconda immagine avrà un attributo alt con il valore "Picture 2: yourphoto.jpg" .
Eliminazione di un attributoPer rimuovere un attributo da un elemento, chiama il metodo removeAttr(), passandogli il nome dell'attributo da rimuovere. Per esempio:
// Rimuove l'attributo "title" dall'elemento #myLink $("a#myLink").removeAttr("title");
Puoi anche chiamare il metodo removeAttr() su un oggetto jQuery che contiene più elementi. Il metodo removeAttr() rimuoverà l'attributo dato da tutti gli elementi:
// Rimuovi l'attributo "title" da tutti i link $("a").removeAttr("title");
RiepilogoIn questo tutorial, abbiamo trattato i problemi relativi all'utilizzo degli attributi degli elementi in jQuery:
La lezione riguarderà l'inizio dell'argomento: il modello a oggetti documento (javaScript DOM) - le basi dell'HTML dinamico, verranno studiati i metodi di accesso agli oggetti e verranno considerati i modi di gestire gli eventi javascript
In precedenza, abbiamo già iniziato a familiarizzare con il concetto in javascript.
Diamo un'occhiata al diagramma gerarchia degli oggetti in JavaScript e dove nella gerarchia si trova l'oggetto documento in questione.
L'elemento script ha attributi:
Esempio:
/* Consente ai file js di essere caricati in parallelo ed eseguiti immediatamente dopo il caricamento senza attendere l'elaborazione del resto della pagina */ /* Consente al browser di avviare il caricamento dei file js in parallelo senza interrompere l'ulteriore elaborazione della pagina. La loro esecuzione avviene dopo un parsing completo modello a oggetti documento */
Proprietà e attributi dell'oggetto documento in javaScriptL'oggetto documento rappresenta una pagina web.
Importante: per accedere alle proprietà e ai metodi di un oggetto in javaScript, come quando si lavora con altri oggetti, viene utilizzata la notazione punto:
quelli. si scrive prima l'oggetto stesso, poi si indica con un punto e senza spazi la sua proprietà, attributo o metodo
oggetto.proprietà oggetto.attributo oggetto.metodo()Considera un esempio:
Esempio: lascia che ci sia un tag nel documento html
Il mio elemento
e specifico per lui stile CSS(anche due stili, il secondo è utile per il compito):
| .small( colore : rosso ; font-size : small ; ) .big( color : blue ; font-size : big; ) |
.small( colore:rosso; font-size:small; ) .big( colore:blue; font-size:big; )
Necessario:
Da quel momento linguaggio javascript, quindi l'oggetto può essere inventato e impostare qualsiasi proprietà con qualsiasi valore. Ma prima, accediamo all'oggetto (l'accesso all'oggetto sarà discusso in dettaglio più avanti in questa lezione):
// ottenere l'accesso all'oggetto tramite il suo id var element = document.getElementById("MyElem"); elemento.myProperty = 5; // assegna proprietà alert(element.myProperty); // visualizza nella finestra di dialogo
L'attività successiva è correlata all'attributo dell'oggetto. Gli attributi dell'oggetto sono attributi di tag. Quelli. nel nostro caso ce ne sono due: l'attributo class con valore small e l'attributo id. Lavoreremo con l'attributo class.
Ora aggiungiamo del codice javascript per visualizzare il valore dell'attributo del nostro oggetto. Il codice deve essere Dopo tag principali:
// ottenere l'accesso all'oggetto tramite il suo id var element = document.getElementById("MyElem"); alert(elemento.getAttribute("classe")); // visualizza nella finestra di dialogo
E l'ultimo compito: modificare il valore dell'attributo. Per questo abbiamo preparato uno stile grande. Cambia il valore dell'attributo class in questo stile:
// ottenere l'accesso all'oggetto tramite il suo id var element = document.getElementById("MyElem"); element.setAttribute("class","big");
Di conseguenza, il nostro elemento diventerà più grande e diventerà blu (classe grande).
Ora diamo un'occhiata più da vicino ai metodi utilizzati nell'esempio per lavorare con gli attributi.
Gli attributi possono essere aggiunti, rimossi e modificati. Ci sono metodi speciali per questo:
getAttribute(attr)
rimuoviAttributo(attr)
Diversi modi di lavorare con gli attributi
Esempio: visualizzare il valore dell'attributo value di un blocco di testo.
varelem = document.getElementById("MyElem"); var x = "valore";
| elem.getAttribute("valore" ) |
elem.getAttribute("valore")
2. notazione punto:
| elem.attributi .valore |
elem.attributi.valore
3. notazione tra parentesi:
elemento var = document.getElementById("t1"); alert(...) elemento.setAttribute(...);
var x = "chiave"; // chiave - nome attributo, val - valore attributo // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" chiave "] = "val" // 4. elem.setAttribute(x, "val")
proprietà degli elementi del corpoAttraverso l'oggetto documento, puoi accedere al corpo del documento - il body tag - con alcune delle sue utili proprietà.
Ad esempio, il tag body ha due proprietà: la larghezza e l'altezza della finestra del client:
document.body.clientHeight - altezza della finestra del client
document.body.clientWidth - larghezza della finestra del client
Ma la cosa più importante, come abbiamo già appreso, è che tramite l'oggetto documento, tramite appositi metodi, si accede a tutti gli elementi della pagina, ovvero i tag.
Importante: quando si accede a tag di pagina come questo, lo script deve trovarsi alla fine dell'albero degli elementi, prima di chiudere il corpo! Poiché al momento dell'esecuzione dello script, tutti gli elementi dovrebbero già essere "disegnati" dal browser sullo schermo
Lavoro js8_1 . Stampa un messaggio sulle dimensioni della finestra del browser: ad esempio, "dimensioni finestra browser 600 x 400"
Accesso agli elementi del documento in JavaScriptEsistono diverse opzioni per l'accesso agli oggetti o la ricerca di oggetti:
Consideriamo ciascuna delle opzioni in modo più dettagliato.
Sintassi: documento.getElementById(id)
Il metodo getElementById() restituisce l'elemento stesso, che può quindi essere utilizzato per accedere ai dati
Esempio: nella pagina è presente un campo di testo con l'attributo id="cake" :
...
Necessario
alert(document.getElementById("cake").value); // restituisce "numero di torte"
Puoi fare lo stesso implementando un accesso all'oggetto tramite una variabile:
var a=document.getElementById("torta"); alert(a.valore); // emette il valore dell'attributo value, ad es. testo "numero di torte"
Importante: lo script deve essere posizionato dopo il tag!
Sintassi:
document.getElementsByTagName(nome);
Esempio: la pagina ha un campo di testo (tag di input), con un attributo value:
...
Obbligatorio: stampa il valore del suo attributo value
Il metodo getElementsByTagName fornisce l'accesso a tutti gli elementi di input (ovvero un array di elementi di input) tramite una variabile, anche se questo elemento è l'unico sulla pagina. Per fare riferimento ad un elemento specifico, ad esempio, al primo, ne specifichiamo l'indice (l'array parte dall'indice zero).
✍ Soluzione:
var a =document.getElementsByTagName("input"); alert(a.valore); // restituisce "numero di torte"
Sintassi:
documento.getElementsByName(nome);
Il metodo getElementsByName("...") restituisce un array di oggetti il cui attributo name è uguale al valore specificato come parametro del metodo. Se nella pagina è presente un solo elemento di questo tipo, il metodo restituisce comunque un array (con un solo elemento singolo).
Esempio: supponiamo che ci sia un elemento nel documento:
elemento var = document.getElementsByName("MyElem"); alert(elemento.valore);
IN questo esempio c'è solo un elemento, ma il riferimento è all'elemento zero dell'array.
Importante: Il metodo funziona solo con quegli elementi per i quali l'attributo name è esplicitamente fornito nella specifica: questi sono i tag form , input , a , select , textarea e un numero di altri tag meno comuni.
Il metodo document.getElementsByName non funzionerà su altri elementi come div , p , ecc.
Gli elementi figlio sono accessibili in javascript tramite la proprietà childNodes. La proprietà appartiene all'oggetto padre.
| document.getElementById (padre) .childNodes ; |
document.getElementById(parent).childNodes;
Considera un esempio in cui i tag immagine sono racchiusi in un contenitore, un tag div. Pertanto, il tag div è il genitore di queste immagini e gli stessi tag img, rispettivamente, sono figli del tag div:
Ora andiamo in uscita a finestra modale valori degli elementi dell'array con discendenti, ad es. tag img:
var myDiv=document.getElementById("div_for_img"); // accedi al contenitore padre var childMas=myDiv.childNodes; // array di figli per (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }
Si noti che è conveniente usare un ciclo per iterare sugli elementi di un array di figli. Quelli. nel nostro esempio, otteniamo un ciclo:
| ... for (var a in childMas) ( alert(childMas[ a] .src ) ; ) |
For (var a in childMas)( alert(childMas[a].src); )
Diamo un'occhiata ad altri modi con un esempio:
| 1 3 4 |
1 3 4
Accesso:
| ... // funzioni di accesso agli elementi indesiderate e obsolete: alert(document.forms [ 0 ] .name ); // f alert(document.forms [ 0 ] .elements [ 0 ] .type ); // text alert(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ); // o2 alert(document.f .b .type ); // pulsante alert(document.f .s .name ); // ss alert(document.f .s .options [ 1 ] .id ); // o2 // funzioni di accesso elemento preferite alert(document.getElementById ("t" ) .type ) ; // avviso di testo(document.getElementById("s" ) .name ) ; // ss alert(document.getElementById ("s" ) .options [ 1 ] .id ); // 02 alert(document.getElementById("o3" ) .text ) ; //4... |
... // funzioni di accesso agli elementi indesiderate e obsolete: alert(document.forms.name); // f alert(document.forms.elements.type); // avviso di testo(document.forms.elements.options.id); // o2 alert(document.f.b.type); // pulsante alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // funzioni di accesso agli elementi preferite alert(document.getElementById("t").type); // avviso di testo(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); //4...
Esempio: creare un pulsante e un campo di testo in un documento html. Utilizzando uno script, colora lo sfondo del pulsante (la proprietà style.backgroundColor del pulsante) e visualizza un'iscrizione "Ciao!" nel campo di testo (attributo valore).
Codice HTML:
document.getElementById("t1").value = "Ciao!"; document.getElementById("b1").style.backgroundColor = "red";!}
Opzione 2:
| document.getElementById ("t1" ) .setAttribute ("valore" , "Ciao!" ) ; document.getElementById("b1" ) .style .backgroundColor = "rosso" ; |
document.getElementById("t1").setAttribute("value","Ciao!"); document.getElementById("b1").style.backgroundColor = "rosso";
Compito Js8_2. Crea tag di campo di testo in base all'immagine nella figura. Assegnare loro i valori dell'attributo id appropriati (mostrati nella figura). Utilizzando lo script, aggiungi il valore " 0 " a tutti i campi numerici (assumendo valori numerici) 
Il campo è lasciato vuoto?
I dati forniti dall'utente non possono essere attendibili. È irragionevole presumere che gli utenti li controllino durante l'inserimento dei dati. Quindi è necessario utilizzare javascript per questo.
Per verificare se il campo di testo è lasciato vuoto (ad esempio, dopo che l'utente ha compilato i dati di un questionario), occorre fare riferimento alla proprietà value. Se il valore della proprietà è riga vuota(""), quindi è necessario in qualche modo avvisare l'utente di questo.
if(document.getElementById("name").value=="") ( qualche azione, ad esempio, la visualizzazione di un messaggio con l'obbligo di compilare il campo );
Inoltre, puoi fare a meno di uno script. Il tag di input di un campo di testo ha un attributo pattern. come è indicato il suo valore espressione regolare per convalidare i dati nel campo di testo del modulo specificato. Se l'attributo è presente modello, il modulo non verrà inviato fino a quando il campo di testo non sarà compilato correttamente.
Ad esempio, per verificare se un campo è lasciato vuoto:
Testo invece di un valore numerico: la funzione isNaN
Se il campo richiede l'immissione di un valore numerico e invece l'utente immette del testo, è necessario utilizzare la funzione isNaN. "Non è un numero?") che controlla il tipo di input e restituisce true se l'input è testo anziché numerico.
Quello. se viene restituito true, all'utente dovrebbe essere richiesto di inserire il formato corretto, ad es. numero.
if(isNaN(document.getElementById("minutes").value))( avviso numerico );
Data una pagina con elementi da compilare: 
frammento di codice html:
| 1 2 3 4 5 6 7 8 9 10 11 12 | Nome: Numero di ciambelle: Minuti: Totale parziale: Imposta: Risultato: ... |
Nome:
Numero di ciambelle:
Minuti:
Totale parziale:
Imposta:
Risultato:
...
Necessario:
Riempi gli spazi vuoti nello snippet di codice sottostante che controlla che due campi di testo siano compilati correttamente: Nome(id="nome") e minuti(id="minuti"). Utilizzare un segno di spunta per lasciare il campo vuoto ("") e il formato corretto per la compilazione del campo numerico (isNaN).
* Fai il lavoro anche con l'attributo pattern dei campi di testo usando .
Frammento di sceneggiatura:
Il codice viene utilizzato per creare condizioni complesse passate in precedenza.
Un nuovo concetto per te sta chiamando una funzione come gestore di eventi del pulsante:
onclick="placeOrder();"
Quando si fa clic sul pulsante, verrà chiamata la funzione placeOrder().
È possibile creare un'associazione di associazione personalizzata che controllerà il valore di uno specifico osservabile valore booleano prima di aggiungere o meno attributi. Guarda questo esempio:
Ko.bindingHandlers.attrIf = ( aggiorna: funzione (elemento, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (mostra) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(elemento).removeAttr(k); ) ) ) ) ); collegamento
Vorrei poter rispondere a @gbs ma non posso. La mia soluzione sarebbe quella di avere due elementi HTML identici: uno con un attributo, senza di esso, e una condizione di knockout per aggiungerne uno in base all'elemento. Sono anche consapevole di questa solita attesa, ma quale soluzione è più efficiente?
In questo articolo, faremo conoscenza con le proprietà e gli attributi DOM, considereremo come differiscono e come lavorare correttamente con loro. Vediamo quali metodi ha JavaScript per eseguire operazioni sugli attributi.
In che modo un attributo è diverso da una proprietà DOM?Gli attributi sono entità HTML con le quali possiamo aggiungere determinati dati agli elementi nel codice HTML.
Quando un browser richiede una pagina, riceve il suo codice HTML sorgente. Successivamente, analizza questo codice e crea un DOM basato su di esso. Durante questo processo, gli attributi HTML degli elementi vengono tradotti nelle proprietà DOM appropriate.
Ad esempio, il browser, durante la lettura della seguente riga di codice HTML, creerà le seguenti proprietà DOM per questo elemento: id , className , src e alt .
Queste proprietà sono accessibili nel codice JavaScript come proprietà dell'oggetto. L'oggetto qui è un nodo DOM (elemento).
Un esempio in cui otteniamo i valori delle proprietà DOM per l'elemento sopra e stampiamo i loro valori nella console:
// ottieni l'elemento var brandImg = document.querySelector("#brand"); // visualizza i valori delle proprietà DOM dell'elemento console.log(brandImg.id); // "brand" console.log(brandImg.className); // "marca" console.log(marcaImg.src); // "/logo.svg?6" console.log(brandImg.alt); // "logo del sito"
Alcuni nomi di proprietà DOM non corrispondono ai nomi degli attributi. Uno di questi è l'attributo class. Questo attributo corrisponde alla proprietà DOM className . Questa differenza a causa del fatto che la classe è parola chiave in JavaScript, è riservato e non può essere utilizzato. Per questo motivo, gli sviluppatori dello standard hanno deciso di utilizzare un altro nome da abbinare, che è stato scelto come className .
Un'altra sfumatura è legata al fatto che la traduzione degli attributi HTML specificati in codice sorgente document, le proprietà DOM non sono sempre implementate uno a uno.
Se un elemento ha un attributo HTML non standard, non viene creata alcuna proprietà corrispondente nel DOM.
// ottieni l'elemento mydiv = document.querySelector("#mydiv"); // ottiene il valore della proprietà alt dell'elemento e lo stampa sulla console console.log(mydiv.alt); // undefined // Ottieni il valore dell'attributo alt dell'elemento e stampalo sulla console console.log(mydiv.getAttribute("alt")); // "..."
Un'altra differenza è che i valori di determinati attributi HTML e le loro proprietà DOM corrispondenti possono essere diversi. Quelli. un attributo può avere un valore e una proprietà DOM creata da esso può avere un altro valore.
Uno di questi attributi è selezionato .
Il valore dell'attributo HTML verificato in questo casoè una stringa vuota. Tuttavia, la proprietà corrispondente all'attributo specificato nel DOM verrà impostata su true . Perché secondo le regole dello standard, per impostare true, è sufficiente solo menzionare questo attributo nel codice HTML, e non importa quale valore avrà.
In questo caso, anche se non specifichiamo l'attributo verificato nel codice HTML per l'elemento di input con il tipo di casella di controllo, la proprietà verificato verrà comunque creata per esso nel DOM, ma sarà uguale a false .
Inoltre, JavaScript ti consente anche di lavorare con gli attributi. Esistono metodi speciali nell'API DOM per questo. Ma è consigliabile utilizzarli solo quando è veramente necessario lavorare con i dati in questo modo.
In questo caso, devi sapere che quando cambiamo la proprietà DOM di un elemento, cambia anche l'attributo ad esso corrispondente, e viceversa. Ma questo processo nei browser non viene sempre eseguito uno a uno.
Le principali differenze tra le proprietà e gli attributi DOM sono:
Lavorare con le proprietà degli elementi in JavaScript, come notato sopra, viene eseguito come con le proprietà degli oggetti.
Ma per riferirsi alla proprietà di un elemento, deve prima essere ottenuto. Puoi ottenere un elemento DOM in JavaScript, ad esempio, utilizzando il metodo querySelector generico e una raccolta di elementi DOM, ad esempio, utilizzando querySelectorAll .
Come primo esempio, considera il seguente elemento HTML:
Il testo del messaggio di avviso... var alert = document.querySelector("#alert"); // recupera l'elemento
Sulla base di esso, analizzeremo come vengono ottenute, modificate e aggiunte nuove proprietà DOM.
Lettura dei valori delle proprietà DOM:
// ottiene il valore DOM della proprietà id var alertId = alert.id; // "alert" // ottiene il valore della proprietà DOM className var alertClass = alert.className; // "alert alert-info" // ottiene il valore DOM della proprietà title var alertId = alert.title; // "Testo suggerimento..."
Modifica dei valori delle proprietà DOM:
// per modificare il valore di una proprietà DOM, devi solo assegnarle un nuovo valore alert.title = "Nuovo testo del tooltip"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}
Aggiunta delle proprietà DOM:
Alert.lang = "ru"; // imposta la proprietà lang su "ru" alert.dir = "ltr"; // imposta la proprietà dir su "ltr"
Un esempio in cui inviamo alla console tutti i valori di classe che gli elementi p hanno sulla pagina:
Var paragrafi = document.querySelectorAll("p"); for (var i = 0, lunghezza = paragrafi. lunghezza ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }
Un esempio in cui impostiamo la proprietà lang di tutti gli elementi con la classe di contenuto su "ru":
Contenuto var = document.querySelectorAll(".content"); for (var i = 0, lunghezza = contenuto.lunghezza; i< length; i++) { contents[i].lang = "ru"; }
Attributi degli elementi e metodi per lavorarciGli attributi sono inizialmente impostati nel codice HTML. Sebbene siano collegati, in qualche modo, alle proprietà, non sono la stessa cosa. Nella maggior parte dei casi, dovresti lavorare con le proprietà e accedere agli attributi solo quando ne hai veramente bisogno.
I valori degli attributi, a differenza delle proprietà DOM, come notato sopra, sono sempre stringhe.
JavaScript ha quattro metodi per eseguire operazioni relative agli attributi:
Considera esempi.
Un esempio molto interessante con l'attributo value.
Esempio con attributo valore var name = document.querySelector("input"); // recupera l'elementoOttieni il valore dell'attributo value e la proprietà value DOM:
// ottiene il valore dell'attributo value dell'elemento name.getAttribute("value"); // "Bob" // ottiene il valore della proprietà DOM name.value; // "Bob" // aggiorna il valore dell'attributo value, impostalo su un nuovo valore name.setAttribute("value", "Tom"); // "Tom" // ottiene il valore DOM del valore della proprietà name.value; // "Tommaso"
Questo esempio mostra che quando l'attributo value cambia, il browser modifica automaticamente la proprietà DOM del valore di conseguenza.
Ora facciamo il contrario, ovvero cambiamo il valore della proprietà DOM e controlliamo se cambia il valore dell'attributo:
// imposta un nuovo valore al valore della proprietà DOM name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}
Questo esempio mostra che la modifica di una proprietà DOM non comporta sempre una modifica corrispondente nell'attributo. Quelli. in questo caso, la modifica del valore della proprietà DOM non ne modifica l'attributo corrispondente.
Lo stesso accadrà quando l'utente inserisce il testo in questo campo. La proprietà value DOM conterrà il valore effettivo e l'attributo corrispondente conterrà il valore originale o quello che abbiamo impostato, ad esempio, utilizzando il metodo setAttribute.
Questo esempio mostra che è più corretto lavorare sempre con le proprietà DOM, ed è necessario accedere all'attributo solo quando è veramente necessario.
Anche nel caso in cui sia necessario ottenere il valore iniziale che abbiamo impostato nell'HTML, è possibile utilizzare la proprietà. La proprietà che contiene il valore iniziale dell'attributo value è chiamata defaultValue .
Nome.valorepredefinito; // Tom
Un altro esempio molto interessante, ma ora con l'attributo href.
esempio hrefUn esempio in cui dobbiamo ottenere il valore del collegamento così come è stato impostato nell'HTML.
var page2 = document.querySelector("#link"); page2.getAttribute("href"); // pagina2.html pagina2.href; // URL completo, ad esempio: http://localhost/page2.html
In questo esempio, l'attributo href e la proprietà href DOM hanno valori diversi. L'attributo href è ciò che abbiamo impostato nel codice e la proprietà DOM è l'URL completo. Questa distinzione è dettata dallo standard secondo cui il browser deve trasmettere il valore href all'URL completo.
Pertanto, se dobbiamo ottenere ciò che è nell'attributo, in questo caso non possiamo fare a meno del metodo getAttribute.
Infine, diamo un'occhiata all'attributo selezionato.
Esempio selezionatoUn esempio che mostra come ottenere il valore dell'opzione select selezionata:
no score 1 2 3 4 5 // ottieni l'elemento select var mark = document.querySelector("#mark"); // 1 via mark.querySelector("option:checked").value; // mark.value a 2 vie;
Un esempio che mostra come ottenere i valori delle opzioni selezionate in un elemento select:
no score 1 2 3 4 5 // ottieni l'elemento select var mark = document.querySelector("#mark"); // 1 modo (attraverso la creazione di un array e il riempimento con i valori delle opzioni selezionate) var arr = ; for (var i = 0, length = mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>opzione.valore)
Un altro modo di lavorare con gli attributi (proprietà degli attributi)In JavaScript, ogni elemento ha una proprietà attribute che può essere utilizzata per recuperare tutti i suoi attributi come oggetto NamedNodeMap.
Questo metodo può essere utilizzato quando è necessario, ad esempio iterare su tutti gli attributi di un elemento.
Si accede a un attributo in questa raccolta tramite il relativo indice o utilizzando il metodo item. Gli attributi in questa raccolta vengono contati a partire da 0.
Ad esempio, mostriamo tutti gli attributi di alcuni elementi nella console:
ADORO JAVASCRIPT
// recupera l'elemento tramite il suo id message var message = document.querySelector("#message"); // ottiene i suoi attributi var attrs = message.attributes; // itera su tutti gli attributi usando un ciclo (attrs.length è il numero di attributi) for (var i = 0, length = attrs.length; i< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "informazioni"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;Inoltre, puoi anche lavorare con questa raccolta utilizzando i seguenti metodi:
Un esempio di utilizzo degli attributi tramite i metodi getNamedItem, setNamedItem e removeNamedItem:
ADORO JAVASCRIPT
// recupera l'elemento tramite il suo id message var message = document.querySelector("#message"); // ottiene i suoi attributi var attrs = message.attributes; // Attività n. 1. Ottenere il valore dell'attributo id console.log(attrs.getNamedItem("id")); // Attività n. 2. Imposta l'attributo (se esiste, cambia il suo valore, altrimenti aggiungine uno nuovo) // crea l'attributo style e salvalo nella variabile attrStyle var attrStyle = document.createAttribute("style"); // assegna un valore all'attributo utilizzando la proprietà value attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !} CompitiImposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario, viene aggiunto un nuovo attributo con il nome e il valore specificati.
Sintassi elemento.setAttribute( nome, valore); Parametri name Una DOMString che specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene convertito automaticamente in tutto minuscolo quando setAttribute() viene richiamato su un elemento HTML in un documento HTML. value Una DOMString contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.Gli attributi booleani sono considerati veri se sono presenti sull'elemento, indipendentemente dal loro valore effettivo; di norma, dovresti specificare la stringa vuota ("") in value (alcune persone usano il nome dell'attributo; funziona ma non è standard). Vedi sotto per una dimostrazione pratica.
Poiché il valore specificato viene convertito in una stringa, specificare null non fa necessariamente ciò che ti aspetti. Invece di rimuovere l'attributo o impostarne il valore su null , imposta invece il valore dell'attributo sulla stringa "null" . Se desideri rimuovere un attributo, chiama removeAttribute() .
Valore restituito Eccezioni InvalidCharacterError Il nome dell'attributo specificato contiene uno o più caratteri non validi nei nomi dell'attributo. esempioNell'esempio seguente, setAttribute() viene utilizzato per impostare gli attributi su un file .
HTML Hello World JavaScript var b = document.querySelector("button"); b.setAttribute("nome", "helloButton"); b.setAttribute("disabilitato", "");Questo dimostra due cose:
Metodi DOM che trattano gli attributi dell'elemento:
| impostaAttributo(DOM 1) | setAttributeNS | setAttributeNode | setAttributeNodeNS |
| getAttributo(DOM 1) | getAttributeNS | getAttributeNode | getAttributeNodeNS |
| haAttributo(DOM2) | hasAttributeNS | - | - |
| rimuoviAttributo(DOM 1) | removeAttributeNS | removeAttributeNode | - |
La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, controlla https://github.com/mdn/browser-compat-data e inviaci una richiesta pull.
Aggiorna i dati di compatibilità su GitHub
| Cellulare da tavolo | |||||||||||
| Chrome BordoFirefox Internet Explorer Opera Safari Android webview Chrome per Android Firefox per Android Opera per Android Safari su iOS Samsung Internet | |||||||||||
| Chrome Supporto completo Sì | Edge Supporto completo 12 | Supporto completo per Firefox Sì | IE Pieno supporto 5 Appunti Assistenza completa 5Appunti Appunti In Internet Explorer 7 e versioni precedenti, setAttribute non imposta gli stili e rimuove gli eventi quando tenti di impostarli. | Opera Pieno supporto Sì | Safari Pieno supporto 6 | WebView Android Supporto completo Sì | Chrome Android Supporto completo Sì | Firefox Android Supporto completoSì | Opera Android Pieno supporto Sì | Safari iOS Supporto completo Sì | Samsung Internet Android Supporto completo Sì |
L'utilizzo di setAttribute() per modificare determinati attributi, in particolare value in XUL, funziona in modo incoerente, poiché l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, usa Element.value invece di Element.setAttribute() .
