15 metodi JavaScript per la manipolazione del DOM per gli sviluppatori Web

var ele = document.querySelector (selector);

viene selezionato con il querySelector () metodo e il suo colore è cambiato in rosso.

 
paragrafo uno
 
paragrafo due
 
div uno
 
paragrafo tre
 
div due
 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red'; 

Demo interattivo

Prova il querySelector () metodo nella seguente demo interattiva. Digita semplicemente un selettore corrispondente a quelli che puoi trovare all'interno delle caselle blu (ad es. #tre) e fare clic sul pulsante Seleziona. Si noti che se si digita .bloccare, solo la sua prima istanza sarà selezionato.

2. querySelectorAll ()

diversamente da querySelector () che restituisce solo la prima istanza di tutti gli elementi corrispondenti, querySelectorAll () restituisce tutti gli elementi che corrispondono al selettore CSS specificato.

Gli elementi corrispondenti vengono restituiti come a NodeList oggetto che sarà un oggetto vuoto se non vengono trovati elementi corrispondenti.

Sintassi

var eles = document.querySelectorAll (selector);

• eles - UN NodeList oggetto con tutti gli elementi corrispondenti come valori di proprietà. L'oggetto è vuoto se non vengono trovate corrispondenze.
• selettore - uno o più selettori CSS, come "#FooId", ".FooClassName", " .Class1.class2", o ".class1, .class2"

Esempio di codice

L'esempio seguente utilizza lo stesso codice HTML del precedente. Tuttavia, in questo esempio, tutti i paragrafi sono selezionati con querySelectorAll (), e sono di colore blu.

 
paragrafo uno
 
paragrafo due
 
div uno
 
paragrafo tre
 
div due
 

 var paragraph = document.querySelectorAll ('p'); for (var p of paragraph) p.style.color = 'blue'; 

3. addEventListener ()

eventi fai riferimento a ciò che accade a un elemento HTML, come il clic, la messa a fuoco o il caricamento, a cui possiamo reagire con JavaScript. Possiamo assegnare funzioni JS a ascolta per questi eventi in elementi e fare qualcosa quando si è verificato l'evento.

Ci sono tre modi in cui puoi assegnare una funzione a un determinato evento.

Se foo () è una funzione personalizzata, puoi registrarla come ascoltatore di eventi click (chiamalo quando si fa clic sull'elemento del pulsante) in tre modi:

1.  Mettere in guardia

2.  var btn = document.querySelector ('button'); btn.onclick = foo;

3.  var btn = document.querySelector ('button'); btn.addEventListener ('click', foo);

Il metodo addEventListener () (la terza soluzione) ha alcuni professionisti; è l'ultimo standard - consente l'assegnazione di più di una funzione come ascoltatori di eventi a un evento - e viene fornito con un utile set di opzioni.

Sintassi

ele.addEventListener (evt, listener, [opzioni]);

• ele - L'elemento HTML che verrà ascoltato dal listener di eventi.
• EVT - L'evento mirato.
• ascoltatore - In genere, una funzione JavaScript.
• opzioni - (facoltativo) Un oggetto con un insieme di proprietà booleane (elencate sotto).

Opzioni	Cosa succede, quando è impostato su vero?
catturare	Arresta il bubbling degli eventi, ovvero impedisce la chiamata di qualsiasi listener di eventi per lo stesso tipo di evento negli antenati dell'elemento. Per utilizzare questa funzione, puoi utilizzare 2 sintassi: ele.addEventListener (evt, listener, true) ele.addEventListener (evt, listener, capture: true);
una volta	Il listener viene chiamato solo la prima volta che si verifica l'evento, quindi viene automaticamente rimosso dall'evento e non verrà più attivato da esso.
passivo	L'azione predefinita dell'evento non può essere interrotta con il metodo preventDefault ().

Esempio di codice

In questo esempio, aggiungiamo un listener di eventi click chiamato foo, al Tag HTML.

Cliccami

 var btn = document.querySelector ('button'); btn.addEventListener ( 'click', foo); function foo () alert ('hello'); 

Demo interattivo

Assegna il foo () funzione personalizzata come listener di eventi per uno dei tre seguenti eventi: ingresso, clic o mouseover e attiva l'evento scelto nel campo di immissione in basso passando con il mouse, facendo clic o digitando.

4. removeEventListener ()

Il removeEventListener () metodo scollega un listener di eventi precedentemente aggiunto con il addEventListener () metodo dall'evento per cui sta ascoltando.

Sintassi

ele.removeEventListener (evt, listener, [opzioni]);

Utilizza la stessa sintassi di cui sopra addEventListener () metodo (tranne per il una volta opzione esclusa). Le opzioni sono usate per essere molto specifiche sull'identificazione dell'ascoltatore da staccare.

Esempio di codice

Seguendo l'esempio di codice che abbiamo usato a addEventListener (), qui rimuoviamo il listener dell'evento click chiamato foo dal elemento.

 btn.removeEventListener ( 'click', foo);

5. createElement ()

Il createElement () metodo crea un nuovo elemento HTML usando il nome del tag HTML da creare, come ad esempio 'P' o 'Div'.

È possibile aggiungere successivamente questo elemento alla pagina Web utilizzando diversi metodi per l'inserimento DOM, ad esempio AppendChild () (vedi più avanti in questo post).

Sintassi

document.createElement (tagName);

• tagName - Il nome del tag HTML che desideri creare.

Esempio di codice

Con il seguente esempio, puoi creare un nuovo elemento di paragrafo:

var pEle = document.createElement ('p')

6. appendChild ()

Il appendChild () metodo aggiunge un elemento come ultimo figlio all'elemento HTML che richiama questo metodo.

Il bambino da inserire può essere a elemento appena creato, o un già esistente. In quest'ultimo caso, verrà spostato dalla posizione precedente alla posizione dell'ultimo figlio.

Sintassi

ele.appendChild (childEle)

• ele - L'elemento HTML a cui childEle viene aggiunto come ultimo figlio.
• childEle - L'elemento HTML aggiunto come ultimo figlio di ele.

Esempio di codice

In questo esempio, inseriamo a elemento è come il figlio di a

elemento usando il appendChild () e il sopracitato createElement () metodi.

 var div = document.querySelector ('div'); var strong = document.createElement ('strong'); strong.textContent = 'Ciao'; div.appendChild (forte);

Demo interattivo

Nella seguente demo interattiva, lettere da #un a #r sono gli elementi figli del # Genitore-one, # Genitore-due, e # Genitore-tre selettori di identificazione.

Scopri come appendChild () metodo funziona da digitando un nome di selezione di un genitore e di un figlio nei campi di inserimento sottostanti. Puoi scegliere anche i bambini appartenenti a un altro genitore.

7. removeChild ()

Il removeChild () metodo rimuove un elemento figlio specificato dall'elemento HTML che chiama questo metodo.

Sintassi

ele.removeChild (childEle)

• ele - L'elemento genitore di childEle.
• childEle - L'elemento figlio di ele.

Esempio di codice

In questo esempio, rimuoviamo il elemento che abbiamo aggiunto da bambino a

tag al codice Esempio per il precedente appendChild () metodo.

div.removeChild (forte);

8. replaceChild ()

Il replaceChild () metodo sostituisce un elemento figlio con un altro appartenente all'elemento genitore che chiama questo metodo.

Sintassi

ele.replaceChild (newChildEle, oldChileEle)

• ele - Elemento genitore di cui i bambini devono essere sostituiti.
• newChildEle - Elemento figlio di ele quello sostituirà oldChildEle.
• oldChildEle - Elemento figlio di ele, che sarà sostituito da newChildEle.

Esempio di codice

In questo esempio l'elemento figlio appartenente al

l'elemento genitore viene sostituito con un nuovo creato etichetta.

 
 Ciao 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.replaceChild (em, strong);

9. cloneNode ()

Quando devi creare un nuovo elemento che deve essere il come un elemento già esistente sulla pagina web, puoi semplicemente crea una copia dell'elemento già esistente usando il cloneNode () metodo.

Sintassi

var dupeEle = ele.cloneNode ([deep])

• dupeEle - Copia del ele elemento.
• ele - L'elemento HTML da copiare.
• in profondità - (facoltativo) Un valore booleano. Se è impostato su vero, dupeEle avrà tutti gli elementi figli ele ha, se è impostato su falso sarà clonato senza i suoi figli.

Esempio di codice

In questo esempio, creiamo una copia per il elemento con cloneNode (), quindi lo aggiungiamo al

tag come elemento figlio con il suddetto appendChild () metodo.

Di conseguenza,

conterrà due elementi, entrambi con il Ciao stringa come contenuto.

 
 Ciao 

 var strong = document.querySelector ('strong'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (copia); 

10. insertBefore ()

Il insertBefore () metodo aggiunge un elemento figlio specificato prima di un altro elemento figlio. Il metodo è chiamato dall'elemento genitore.

Se l'elemento figlio referenziato non esiste o si passa esplicitamente nullo al suo posto, viene aggiunto l'elemento figlio da inserire come l'ultimo figlio del genitore (simile a appendChild ()).

Sintassi

ele.insertBefore (newEle, refEle);

• ele - Elemento genitore.
• newEle - Nuovo elemento HTML da inserire.
• refEle - Un elemento figlio di ele prima di che newEle sarà inserito.

Esempio di codice

In questo esempio, creiamo un nuovo elemento con del testo all'interno e aggiungilo prima il elemento dentro il

elemento genitore.

 
 Ciao 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.insertBefore (em, strong); 

Demo interattivo

Questa demo interattiva funziona in modo simile al nostro demo precedente appartenente al appendChild () metodo. Qui è sufficiente digitare i selettori id di due elementi figlio (da #un a #r) nelle caselle di input e puoi vedere come insertBefore () metodo sposta il primo figlio specificato prima il secondo.

11. createDocumentFragment ()

Il createDocumentFragment () il metodo potrebbe non essere noto come gli altri in questa lista, tuttavia è importante, specialmente se lo si desidera inserire più elementi contemporaneamente, come aggiungere più righe a una tabella.

esso crea a DocumentFragment oggetto, che essenzialmente è un nodo DOM che non fa parte dell'albero DOM. È come un buffer in cui possiamo aggiungere e memorizzare altri elementi (ad esempio più righe) prima di aggiungerli al nodo desiderato nell'albero DOM (ad esempio in una tabella).

Perché non aggiungiamo solo elementi direttamente all'albero DOM? Perché l'inserimento DOM causa modifiche al layout, ed è un processo costoso del browser poiché più inserimenti di elementi conseguenti causeranno più modifiche al layout.

D'altra parte, aggiungendo elementi a a DocumentFragment oggetto non causa modifiche al layout, quindi puoi aggiungere tutti gli elementi che desideri prima di passarli all'albero DOM, causando una modifica del layout solo a questo punto.

Sintassi

document.createDocumentFragment ()

Esempio di codice

In questo esempio, creiamo più righe e celle di tabella con createElement () metodo, quindi aggiungili a DocumentFragment oggetto, infine aggiungere quel frammento di documento in un HTML

usando il appendChild () metodo.

Di conseguenza, cinque righe, ognuna contenente una cella con un numero compreso tra 1 e 5 come contenuto, verranno inserite all'interno della tabella.

 var table = document.querySelector ("table"); var df = document.createDocumentFragment (); per (var i = 0; i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

A volte vuoi controlla i valori delle proprietà CSS di un elemento prima di apportare modifiche. Puoi usare il ele.style proprietà di fare lo stesso, tuttavia il getComputedStyle () metodo è stato fatto solo per questo scopo, esso restituisce i valori calcolati di sola lettura di tutte le proprietà CSS di un elemento HTML specificato.

Sintassi

var style = getComputedStyle (ele, [pseudoEle])

• stile - UN CSSStyleDeclaration oggetto restituito dal metodo. Contiene tutte le proprietà CSS e i loro valori di ele elemento.
• ele - L'elemento HTML di cui vengono recuperati i valori delle proprietà CSS.
• pseudoEle - (facoltativo) Una stringa che rappresenta uno pseudoelemento (ad esempio, ':dopo'). Se questo è menzionato, allora le proprietà CSS dello pseudoelemento specificato associato a ele sarà restituito.

Esempio di codice

In questo esempio, otteniamo e avvisiamo il computer larghezza valore di a

elemento usando il getComputedStyle () metodo.

 var style = getComputedStyle (document.querySelector ('div')); alert (style.width); 

13. setAttribute ()

Il setAttribute () metodo aggiunge un nuovo attributo a un elemento HTML, o aggiorna il valore di un attributo che esiste già.

Sintassi

ele.setAttribute (nome, valore);

• ele - L'elemento HTML a cui è stato aggiunto un attributo o di quale attributo è stato aggiornato.
• nome - il nome dell'attributo.
• valore - Il valore dell'attributo.

Esempio di codice

In questo esempio, aggiungiamo il contenteditable attributo a a

facendo uso del setAttribute () metodo, che renderà modificabile il contenuto.

Ciao

 var div = document.querySelector ('div'); div.setAttribute ( 'contenteditable', ") 

14. getAttribute ()

Il getAttribute () metodo restituisce il valore di un attributo specificato appartenente a un determinato elemento HTML.

Sintassi

ele.getAttribute (nome);

• ele - L'elemento HTML di quale attributo è richiesto.
• nome - il nome dell'attributo.

Esempio di codice

In questo esempio, avvisiamo il valore di contenteditable attributo appartenente al

elemento con l'aiuto di getAttribute () metodo.

Ciao

 var div = document.querySelector ('div'); alert (div.getAttribute ( 'contenteditable')) 

15. removeAttribute ()

Il removeAttribute () metodo rimuove un determinato attributo di un elemento HTML specifico.

Sintassi

ele.removeAttribute (nome);

• ele - L'elemento HTML di quale attributo deve essere rimosso.
• nome - il nome dell'attributo.

Esempio di codice

In questo esempio, rimuoviamo il contenteditable attributo dal

elemento. Di conseguenza, il

non sarà più modificabile.

Ciao

 var div = document.querySelector ('div'); div.removeAttribute ( 'contenteditable'); 

15 lezioni The Art of War ti insegna come vincere le battaglie di vita

15 librerie lightbox per la reattività dei dispositivi mobili

15 idee per acquistare o costruire la tua scrivania perfetta

Articolo successivo

15 jQuery Plugin per rendere Smart Sticky Elements

Articolo precedente

15 Inspiring Startup Presentation Video for Entrepreneurs