From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../it/web/api/element/addeventlistener/index.html | 694 +++++++++++++++++++++ files/it/web/api/element/attributes/index.html | 120 ++++ files/it/web/api/element/childnodes/index.html | 99 +++ files/it/web/api/element/classlist/index.html | 288 +++++++++ files/it/web/api/element/classname/index.html | 84 +++ files/it/web/api/element/clientheight/index.html | 36 ++ files/it/web/api/element/closest/index.html | 147 +++++ files/it/web/api/element/firstchild/index.html | 90 +++ files/it/web/api/element/getattribute/index.html | 48 ++ .../api/element/getelementsbytagname/index.html | 80 +++ files/it/web/api/element/hasattribute/index.html | 75 +++ files/it/web/api/element/hasattributes/index.html | 28 + files/it/web/api/element/index.html | 475 ++++++++++++++ files/it/web/api/element/innerhtml/index.html | 213 +++++++ .../web/api/element/insertadjacenthtml/index.html | 102 +++ files/it/web/api/element/nodename/index.html | 116 ++++ files/it/web/api/element/nodetype/index.html | 178 ++++++ files/it/web/api/element/nodevalue/index.html | 75 +++ files/it/web/api/element/parentnode/index.html | 61 ++ files/it/web/api/element/prefix/index.html | 26 + files/it/web/api/element/queryselector/index.html | 131 ++++ .../it/web/api/element/queryselectorall/index.html | 182 ++++++ .../it/web/api/element/removeattribute/index.html | 57 ++ .../web/api/element/requestfullscreen/index.html | 110 ++++ files/it/web/api/element/scrollheight/index.html | 170 +++++ files/it/web/api/element/scrolltop/index.html | 83 +++ files/it/web/api/element/setattribute/index.html | 83 +++ files/it/web/api/element/tagname/index.html | 72 +++ files/it/web/api/element/textcontent/index.html | 138 ++++ .../it/web/api/element/toggleattribute/index.html | 104 +++ 30 files changed, 4165 insertions(+) create mode 100644 files/it/web/api/element/addeventlistener/index.html create mode 100644 files/it/web/api/element/attributes/index.html create mode 100644 files/it/web/api/element/childnodes/index.html create mode 100644 files/it/web/api/element/classlist/index.html create mode 100644 files/it/web/api/element/classname/index.html create mode 100644 files/it/web/api/element/clientheight/index.html create mode 100644 files/it/web/api/element/closest/index.html create mode 100644 files/it/web/api/element/firstchild/index.html create mode 100644 files/it/web/api/element/getattribute/index.html create mode 100644 files/it/web/api/element/getelementsbytagname/index.html create mode 100644 files/it/web/api/element/hasattribute/index.html create mode 100644 files/it/web/api/element/hasattributes/index.html create mode 100644 files/it/web/api/element/index.html create mode 100644 files/it/web/api/element/innerhtml/index.html create mode 100644 files/it/web/api/element/insertadjacenthtml/index.html create mode 100644 files/it/web/api/element/nodename/index.html create mode 100644 files/it/web/api/element/nodetype/index.html create mode 100644 files/it/web/api/element/nodevalue/index.html create mode 100644 files/it/web/api/element/parentnode/index.html create mode 100644 files/it/web/api/element/prefix/index.html create mode 100644 files/it/web/api/element/queryselector/index.html create mode 100644 files/it/web/api/element/queryselectorall/index.html create mode 100644 files/it/web/api/element/removeattribute/index.html create mode 100644 files/it/web/api/element/requestfullscreen/index.html create mode 100644 files/it/web/api/element/scrollheight/index.html create mode 100644 files/it/web/api/element/scrolltop/index.html create mode 100644 files/it/web/api/element/setattribute/index.html create mode 100644 files/it/web/api/element/tagname/index.html create mode 100644 files/it/web/api/element/textcontent/index.html create mode 100644 files/it/web/api/element/toggleattribute/index.html (limited to 'files/it/web/api/element') diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..6608e69bd3 --- /dev/null +++ b/files/it/web/api/element/addeventlistener/index.html @@ -0,0 +1,694 @@ +--- +title: EventTarget.addEventListener() +slug: Web/API/Element/addEventListener +tags: + - API + - DOM + - EventTarget + - Gestori di Eventi + - JavaScript + - Referenza + - Ricevere Eventi + - Rilevare Eventi + - addEventListener + - attachEvent + - eventi + - metodo + - mselementresize +translation_of: Web/API/EventTarget/addEventListener +--- +
{{APIRef("DOM Events")}}
+ +

Il metodo {{domxref("EventTarget")}} addEventListener() imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione. I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come XMLHttpRequest).

+ +

addEventListener() funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.

+ +

Sintassi

+ +
target.addEventListener(type, listener[, options]);
+target.addEventListener(type, listener[, useCapture]);
+target.addEventListener(type, listener[, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only
+ +

Parametri

+ +
+
type
+
Una stringa sensibile al maiuscolo/minuscolo che rappresenta il tipo di evento da assegnare.
+
listener
+
L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una funzione. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.
+
options {{optional_inline}}
+
Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono: +
    +
  • capture: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM.
    • +
  • once: Un {{jsxref("Boolean")}} che indica che il listener dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna true, il listener verrebbe automaticamente rimosso quando invocato.
    • +
  • passive: Un {{jsxref("Boolean")}} che, se true, indica che la funzione specificata da listener non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama preventDefault(), l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.
    • +
  • {{non-standard_inline}} mozSystemGroup: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.
    • +
+
+
useCapture {{optional_inline}}
+
Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi DOM Level 3 Events e JavaScript Event order per una spiegazione dettagliata. Se non specificato, useCapture di default è false.
+
+
Note: Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro useCapture.
+ +
Note: useCapture non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.
+
+
wantsUntrusted {{Non-standard_inline}}
+
Un parametro specifico per Firefox (Gecko). Se è true, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è false per il browser {{glossary("chrome")}} e true per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.
+
+ +

Valore di ritorno

+ +

undefined

+ +

Note di utilizzo

+ +

Il callback del listener di eventi

+ +

Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.

+ +

La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo handleEvent() cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.

+ +

Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:

+ +
function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gestire un interruttore a schermo intero */
+  } else /* fullscreenerror */ {
+    /* gestire un errore di commutazione a schermo intero */
+  }
+}
+ +

Rilevamento sicuro del supporto opzionale

+ +

Nelle versioni precedenti della specifica DOM, il terzo parametro di addEventListener() era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.

+ +

Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.

+ +

Ad esempio, se si desidera verificare l'opzione passive:

+ +
var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // Questa funzione verrà chiamata quando il browser
+                    //     tenta di accedere alla proprietà passiva.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}
+
+ +

Questo crea un oggetto options con una funzione getter per la proprietà passive; il getter imposta una flag, passiveSupported, è true se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà passive sull'oggetto options, passiveSupported sarà impostato su true; altrimenti rimarrà false. Chiamiamo quindi addEventListener() per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo removeEventListener() per pulire dopo noi stessi. (Nota che handleEvent() viene ignorato sui listener di eventi che non vengono chiamati.)

+ +

Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.

+ +

Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:

+ +
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);
+ +

Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento someElement. Per il terzo parametro, se passiveSupported è true, stiamo specificando un oggetto options con passive impostato su true; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo false come valore del parametro useCapture.

+ +

Se preferisci, puoi usare una libreria di terze parti come Modernizr o Detect It per fare questo test per te.

+ +

È possibile ottenere ulteriori informazioni dall'articolo su EventListenerOptions dal gruppo di Web Incubator Community.

+ +

Esempi

+ +

Aggiungere un semplice listener

+ +

Questo esempio dimostra come utilizzare addEventListener() per controllare i click del mouse su un elemento.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Aggiungere listener di eventi alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+
+ +

In questo codice, modifyText() è un listener per gli eventi click registrati usando addEventListener(). Un click in qualsiasi punto della tabella esegue il gestore ed esegue modifyText().

+ +

Risultato

+ +

{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}

+ +

Listener di eventi con funzione anonima

+ +

Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Funzione per aggiungere listener alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+
+ +

Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione modifyText(), che è responsabile per rispondere effettivamente all'evento.

+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}

+ +

Listener di eventi con una funzione a freccia

+ +

Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Aggiungere un listener alla tabella con una funzione a freccia
+var el = document.getElementById("outside");
+el.addEventListener("click", () => { modifyText("four"); }, false);
+
+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}

+ +

Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti this. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti this, le funzioni a freccia ereditano il vincolo this della funzione di contenimento.

+ +

Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.

+ +

Esempio di utilizzo delle opzioni

+ +

HTML

+ +
<div class="outer">
+    outer, once & none-once
+    <div class="middle" target="_blank">
+        middle, capture & none-capture
+        <a class="inner1" href="https://www.mozilla.org" target="_blank">
+            inner1, passive & preventDefault(which is not allowed)
+        </a>
+        <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
+            inner2, none-passive & preventDefault(not open new page)
+        </a>
+    </div>
+</div>
+
+ +

CSS

+ +
    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+
+ +

JavaScript

+ +
    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event) {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event) {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event) {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event) {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event) {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event) {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+
+ +

Risultato

+ +

Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.

+ +

{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

+ +

Prima di utilizzare un particolare valore nell'oggetto options è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.

+ +

Altre note

+ +

Perchè usare addEventListener?

+ +

addEventListener() è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:

+ + + +

Il modo alternativo, più vecchio per registrare i listener, è descritto di seguito.

+ +

Aggiunta di un listener durante la spedizione dell'evento

+ +

Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.

+ +

Più listeners identici

+ +

Se più EventListener indentici sono registrati sullo stesso EventTarget con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'EventListener da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi Problemi di memoria di seguito.)

+ +

Il valore di this all'interno del gestore

+ +

È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.

+ +

Se si collega un handler ad un elemento utilizzando addEventListener(), il valore di this all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà currentTarget dell'argomento evento che viene passato al gestore.

+ +
my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // registra il className di my_element
+  console.log(e.currentTarget === this) // ritorna `true`
+})
+
+ +

Come promemoria, le funzioni freccia non hanno il loro this contesto.

+ +
my_element.addEventListener('click', (e) => {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})
+ +

Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di this in modo coerente con addEventListener(); un'occorrenza di this all'interno del codice rappresenta un riferimento all'elemento.

+ +
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
+  ...
+</table>
+
+ +

Si noti che il valore di this all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per regole standard. Questo è mostrato nel seguente esempio:

+ +
<script>
+  function logID() { console.log(this.id); }
+</script>
+<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object -->
+  ...
+</table>
+
+ +

Il valore di this all'interno di logID() è un riferimento all'oggetto globale {{domxref("Window")}} (o undefined nel caso della strict mode).

+ +

Specificare this usando bind()

+ +

Il metodo Function.prototype.bind() consente di specificare il valore che dovrebbe essere usato come this per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà this a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.

+ +

Questo è un esempio con e senza bind():

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+
+ +

Un'altra soluzione sta utilizzando una funzione speciale chiamata handleEvent() per catturare qualsiasi evento:

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+
+ +

Un altro modo di gestire il riferimento a this è passare ad EventListener una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:

+ +
class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();
+ +

Legacy Internet Explorer e attachEvent

+ +

Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard addEventListener(). Per IE, modifichiamo l'esempio precedente per:

+ +
if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+
+ +

C'è un inconveniente di attachEvent(): il valore di this sarà un riferimento all'oggetto window, invece dell'elemento su cui è stato chiamato.

+ +

Il metodo attachEvent() potrebbe essere associato all'evento onresize per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario mselementresize quando abbinato al metodo addEventListener di registrazione dei gestori di eventi, fornisce funzionalità simili a onresize, attivando quando alcuni elementi HTML vengono ridimensionati.

+ +

Compatibilità

+ +

Puoi lavorare attorno a addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di handleEvent() e anche l'evento {{event("DOMContentLoaded")}}.

+ +
+

Note: useCapture non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.

+
+ +
(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter<eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();
+ +

Il modo più antico per registrare i listeners

+ +

addEventListener() è stato introdotto con la specifica DOM 2 Prima di allora, gli ascoltatori di eventi sono stati registrati come segue:

+ +
// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+
+ +

Questo metodo sostituisce il listener dell'evento click esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come blur (onblur) e keypress (onkeypress) si comportano in modo simile.

+ +

Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di addEventListener().

+ +

Problemi di memoria

+ +
var els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(var i = 0; i < els.length; i++) {
+  els[i].addEventListener("click", function(e){/* do something */}, false);
+}
+
+
+// Case 2
+function processEvent(e) {
+  /* do something */
+}
+
+for(var i = 0; i < els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+ +

Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire myElement.removeEventListener("click", processEvent, false) perchè processEvent è il riferimento alla funzione.

+ +

In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).

+ +

Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.

+ +
// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
+
+// Case 3
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with */
+  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+}
+
+// Case 4
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with j */
+  function processEvent(e){/* do something */};
+  els[j].addEventListener("click", processEvent, false);
+}
+ +

Miglioramento delle prestazioni di scorrimento con i listeners passivi

+ +

Secondo la specifica, il valore predefinito per l'opzione passive è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.

+ +

Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione passive in true per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.

+ +
+

Note: Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.

+
+ +

Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di passive a false, come mostrato qui:

+ +
/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+
+ +

Nei browser meno recenti che non supportano il parametro options su addEventListener(), il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento useCapture senza utilizzare correttamente il rilevamento delle funzionalità.

+ +

Non è necessario preoccuparsi del valore di passive per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Definizione inziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.EventTarget.addEventListener", 3)}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/attributes/index.html b/files/it/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5bd14f3e4b --- /dev/null +++ b/files/it/web/api/element/attributes/index.html @@ -0,0 +1,120 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributi + - DOM + - Element + - Proprietà + - Referenza +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

La proprietà Element.attributes restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un Array, quindi non ha metodi predefiniti degli {{jsxref("Array")}} e non ha i metodi {{domxref("Attr")}} dei nodi che possono differire tra i browser. Per essere più specifici, attributes è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.

+ +

Sintassi

+ +
var attr = element.attributes;
+
+ +

Esempio

+ +

Esempi basilari

+ +
// Ottenere il primo elemento <p> nel documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Enumerazione degli attributi degli elementi

+ +

L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.
+ L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.attributes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..f56bcc4380 --- /dev/null +++ b/files/it/web/api/element/childnodes/index.html @@ -0,0 +1,99 @@ +--- +title: Node.childNodes +slug: Web/API/Element/childNodes +translation_of: Web/API/Node/childNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.childNodes restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.

+ +

Sintassi

+ +
var nodeList = elementNodeReference.childNodes;
+
+ +

Esempi

+ +

Utilizzo semplice

+ +
// parg è un riferimento a un elemento <p>
+
+// Innanzitutto controlliamo che l'elemento abbia dei nodi figli
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; i++) {
+    // fare qualcosa con ogni bambino da children[i]
+    // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco
+  }
+}
+ +

Rimuovi tutti i bambini da un nodo

+ +
// Questo è un modo per rimuovere tutti i bambini da una
+// finestra di nodo è un riferimento ad un oggetto
+
+while (box.firstChild) {
+    //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata
+    box.removeChild(box.firstChild);
+}
+ +

Appunti

+ +

Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio elementNodeReference.childNodes[1].nodeName per ottenere il nome, ecc.).

+ +

L'oggetto document ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere documentElement. (Nei documenti (X)HTML questo è l'elemento HTML.)

+ +

childNodes include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.childNodes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/classlist/index.html b/files/it/web/api/element/classlist/index.html new file mode 100644 index 0000000000..3d86fa8400 --- /dev/null +++ b/files/it/web/api/element/classlist/index.html @@ -0,0 +1,288 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Element + - Proprietà + - Read-only + - Referenza +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

La proprietà Element.classList di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.

+ +

L'utilizzo di classList è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.

+ +

Sintassi

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di elementNodeReference. Se l'attributo class non è stato impostato o è vuoto elementClasses.length ritorna 0. element.classList è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi add() e remove().

+ +

Metodi

+ +
+
add( String [, String [, ...]] )
+
Aggiunge le classi specificate. Se queste classi esistono già nell'attributo class dell'elemento, vengono ignorate.
+
remove( String [, String [, ...]] )
+
+

Rimuove le classi specificate.

+ +
Nota: La rimozione di una classe inesistente NON genera un errore.
+
+
item( Number )
+
Restituisce il valore della classe per indice nella collezione.
+
toggle( String [, force] )
+
Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce false, altrimenti, la aggiunge e restituisce true.
+
+ Quando è presente un secondo argomento: Se il secondo argomento restituisce true, aggiunge la classe specificata; se restituisce false, la rimuove.
+
contains( String )
+
Verifica se il valore di classe specificato esiste nell'attributo class dell'elemento.
+
replace( vecchiaClasse, nuovaClasse )
+
Sostituisce una classe esistente con una nuova classe.
+
+ +

Esempi

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// il nostro stato iniziale: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// usare l'API classList per rimuovere e aggiungere classi
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// se visible è impostato rimuovilo, altrimenti aggiungilo
+div.classList.toggle("visible");
+
+// aggiungi/rimuovi visible, a seconda del test condizionale, i meno di 10
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// aggiungere o rimuovere più classi
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// aggiungere o rimuovere più classi utilizzando la spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// sostituire la classe "foo" con la classe "bar"
+div.classList.replace("foo", "bar");
+ +
+

Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +
+
+ +

Polyfill

+ +

L'evento legacy onpropertychange può essere utilizzato per creare un mockup dinamico di classList dinamico grazie alla proprietà Element.prototype.className che attiva l'evento specificato una volta modificato.

+ +

Il seguente polyfill sia per classList che per DOMTokenList garantisce la piena conformità (copertura) per tutti i metodi e le proprietà standard di Element.prototype.classList per i browser IE10-IE11 oltre ad un comportamento quasi conforme per IE 6-9. Controlla:

+ +
// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster & cleaner version for IE8 & IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+
+ +

Avvertenze

+ +

Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da document.createElement prima di essere appesi su un nodo padre) in IE6-7.

+ +

Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di classList e le specifiche W3 è che per IE6-8, non esiste un modo per creare un oggetto immutabile (un oggetto le cui proprietà non possono essere modificate direttamente). In IE9, tuttavia, è possibile estendere il prototipo, congelando l'oggetto visibile e sovrascrivendo i metodi di proprietà native. Tuttavia, tali azioni non funzionerebbero in IE6-IE8 e, in IE9, rallenterebbero le prestazioni dell'intera pagina Web fino alla scansione di una lumaca, rendendo queste modifiche completamente impraticabili per questo polyfill.

+ +

Una nota minore è che in IE6-7, questo polyfill usa la proprietà window[" uCL"] sull'oggetto window per comunicare con le espressioni CSS, la proprietà css x-uCLp su tutti gli elementi e la proprietà element[" uCL"] su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva element[" uCLp"] viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà DOMTokenList[" uCL"] viene aggiunta ad ogni oggetto element["classList"] per garantire che la DOMTokenList sia limitata al proprio elemento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definizione iniziale
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.classList")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/classname/index.html b/files/it/web/api/element/classname/index.html new file mode 100644 index 0000000000..ca463f5f75 --- /dev/null +++ b/files/it/web/api/element/classname/index.html @@ -0,0 +1,84 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Proprietà + - Referenza +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

La proprietà className dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore dell'attributo class dell'elemento specificato.

+ +

Sintassi

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Esempio

+ +
let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}
+ +

Appunti

+ +

Il nome className viene utilizzato per questa proprietà anziché class a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.

+ +

className può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se element è un {{domxref("SVGElement")}}. È meglio ottenere/impostare className di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna null anzichè "" se element ha un attributo class vuoto.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +
+

class è un Attributo HTML, mentre className è una proprietà del DOM.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.className")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/clientheight/index.html b/files/it/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..167dd00ca3 --- /dev/null +++ b/files/it/web/api/element/clientheight/index.html @@ -0,0 +1,36 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce l'altezza interna di un elemento in pixel, incluso il padding, ed esclusi il bordo, il margine e l'altezza della barra di scorrimento orizzontale.

+

clientHeight può essere calcolato come CSS height + CSS padding - altezza della barra di scorrimento orizzontale(se presente).

+

Sintassi e valori

+
var altezza = elemento.clientHeight;
+
+

altezza è un numero intero che rappresenta l'altezza in pixel di elemento.

+

clientHeight è di sola lettura.

+

Esempio

+
+
+

padding-top

+

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from http://www.best-cat-art.com/

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
+

Image:clientHeight.png

+

Specifiche

+

Non fa parte di nessuna specifica W3C.

+

Note

+

clientHeight è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.

+

Riferimenti

+ +

{{ languages( { "fr": "fr/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "en": "en/DOM/element.clientHeight" } ) }}

diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html new file mode 100644 index 0000000000..cded9f95bb --- /dev/null +++ b/files/it/web/api/element/closest/index.html @@ -0,0 +1,147 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +

{{APIRef('Shadow DOM')}}

+ +
Il metodo closest() dell'interfaccia {{domxref("Element")}} restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce null.
+ +

Sintassi

+ +
var closestElement = element.closest(selectors);
+
+ +

Parametri

+ + + +

Valore del risultato

+ + + +

Eccezioni

+ + + +

Esempio

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso
+
+var r3 = el.closest("article > div");
+// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01
+
+var r4 = el.closest(":not(div)");
+// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno
+ +

Polyfill

+ +

Per i browser che non supportano Element.closest(),  ma supportano il supporto per element.matches() (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+ +

Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.closest")}}

+ +

Note di compatibilità

+ + +
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..b5052f5dfe --- /dev/null +++ b/files/it/web/api/element/firstchild/index.html @@ -0,0 +1,90 @@ +--- +title: Node.firstChild +slug: Web/API/Element/firstChild +tags: + - API + - DOM + - Node + - Proprietà + - Referenza +translation_of: Web/API/Node/firstChild +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.firstChild restituisce il primo figlio del nodo nell'albero o null se il nodo non ha figli. Se il nodo è un Document, restituisce il primo nodo nell'elenco dei suoi figli diretti.

+ +

Sintassi

+ +
var childNode = node.firstChild;
+
+ +

Esempio

+ +

Questo esempio dimostra l'uso di firstChild e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+ +

In quanto sopra, la console console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <p> e <span>. Qualsiasi spazio bianco creerà un nodo #text da un singolo spazio a più spazi, ritorni, schede e così via.

+ +

Un altro nodo #text viene inserito tra i tag di chiusura </span> e </p>.

+ +

Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.

+ +
<p id="para-01"><span>First span</span></p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+
+ +

Ora l'avviso mostrerà 'SPAN'.

+ +

Per evitare il problema con node.firstChild che restituisce i nodi #text o #comment, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, node.firstElementChild richiede uno shim per Internet Explorer 9 e versioni precedenti.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommentp
{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.firstChild")}}

diff --git a/files/it/web/api/element/getattribute/index.html b/files/it/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..e10427e5bd --- /dev/null +++ b/files/it/web/api/element/getattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +
{{APIRef("DOM")}}
+ +

getAttribute() restituisce il valore di un attributo specificato sull'elemento. Se l'attributo specificato non esiste, il valore restituito sarà null o "" (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.

+ +

Sintassi

+ +
var attributo = element.getAttribute(attributeName);
+
+ +

dove

+ + + +

Esempio

+ +
let div1 = document.getElementById('div1');
+let align = div1.getAttribute('align');
+
+alert(align); // Mostra il valore di "align" per l'elemento con id="div1"
+ +

Appunti

+ +

Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, getAttribute() converte in minuscolo il suo argomento prima di procedere.

+ +

Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono null quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che l'attuale bozza della specifica DOM specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la stringa vuota, e alcune implementazioni DOM implementano questo comportamento. L'implementazione di getAttribute in XUL (Gecko) segue effettivamente la specifica DOM 3 Core e restituisce una stringa vuota. Di conseguenza, dovresti usare {{domxref("element.hasAttribute()")}} per verificare l'esistenza di un attributo prima di chiamare getAttribute() se è possibile che l'attributo richiesto non esista sull'elemento specificato.

+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.getAttribute")}}

+
+ +

Specifiche

+ + diff --git a/files/it/web/api/element/getelementsbytagname/index.html b/files/it/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..9239135259 --- /dev/null +++ b/files/it/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,80 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - Method + - Referenza +translation_of: Web/API/Element/getElementsByTagName +--- +
{{ APIRef("DOM") }}
+ +

Il metodo Element.getElementsByTagName() ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il tag name specificato. Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è dinamico, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare Element.getElementsByTagName() con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.

+ +

Quando viene chiamato su un elemento HTML in un documento HTML, getElementsByTagName converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <linearGradient>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.

+ +

Element.getElementsByTagName è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.

+ +

Sintassi

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Esempio

+ +
// Controlla lo stato di ogni cella in una tabella
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
+
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // Prendi i dati
+  }
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.getElementsByTagName")}}

diff --git a/files/it/web/api/element/hasattribute/index.html b/files/it/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..4cd6d2a9d2 --- /dev/null +++ b/files/it/web/api/element/hasattribute/index.html @@ -0,0 +1,75 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo Element.hasAttribute() restituisce un valore booleano che indica se l'elemento specificato ha o meno l'attributo specificato.

+ +

Sintassi

+ +
var risultato = element.hasAttribute(name);
+
+ +
+
risultato
+
detiene il valore di ritorno true o false.
+
name
+
è una stringa che rappresenta il nome dell'attributo.
+
+ +

Esempio

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // fare qualcosa
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Appunti

+ +
{{DOMAttributeMethods}}
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.hasAttribute")}}

diff --git a/files/it/web/api/element/hasattributes/index.html b/files/it/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..ca408ca96d --- /dev/null +++ b/files/it/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Element/hasAttributes +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un valore booleano: true se l'elemento ha un qualunque numero di attributi, altrimenti false.

+

Sintassi

+

+ + bool + = element.hasAttributes()

+

Esempio

+
t1 = document.getElementById("tabella-dati");
+if (t1.hasAttributes()) {
+    // fai qualcosa con
+    // t1.attributes
+}
+
+

Specifiche

+

hasAttributes

+

{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "pl": "pl/DOM/element.hasAttributes" } ) }}

diff --git a/files/it/web/api/element/index.html b/files/it/web/api/element/index.html new file mode 100644 index 0000000000..f518252bc7 --- /dev/null +++ b/files/it/web/api/element/index.html @@ -0,0 +1,475 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Referenza + - Referenza del DOM + - Web API +translation_of: Web/API/Element +--- +
{{APIRef("DOM")}}
+ +

Element è la classe base più generale da cui ereditano tutti gli oggetti in un {{DOMxRef("Document")}}. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da Element. Ad esempio, l'interfaccia {{DOMxRef("HTMLElement")}} è l'interfaccia di base per gli elementi HTML, mentre l'interfaccia {{DOMxRef("SVGElement")}} è la base per tutti gli elementi SVG. La maggior parte delle funzionalità è specificata più in basso nella gerarchia delle classi.

+ +

Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia XULElement, implementano anche  Element.

+ +

{{InheritanceDiagram}}

+ +

Proprietà

+ +

Eredita le proprietà dalla sua interfaccia genitore, {{DOMxRef("Node")}}, e per estensione l'interfaccia genitore, {{DOMxRef("EventTarget")}}. Implementa le proprietà di {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, e {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.
+
{{DOMxRef("Element.className")}}
+
È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.
+
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{DOMxRef("Element.id")}}
+
Is a {{DOMxRef("DOMString")}} representing the id of the element.
+
{{DOMxRef("Element.innerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
The namespace URI of the element, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{DOMxRef("Element.outerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{DOMxRef("Element.scrollLeft")}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{DOMxRef("Element.scrollTop")}}
+
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
Returns the name of the shadow DOM slot the element is inserted in.
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
Returns a {{jsxref("String")}} with the name of the tag for the given element.
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
Returns the {{DOMxRef("UndoManager")}} associated with the element.
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to Element.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Proprietà incluse da Slotable

+ +

L'interfaccia Element include la seguente proprietà, definita nel  mixin {{DOMxRef("Slotable")}}.

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.
+
+ +

Gestori di eventi

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
Un gestore di eventi per l'evento {{event("fullscreenchange")}} che viene inviato quando l'elemento entra o esce dalla modalità a schermo intero. Questo può essere usato per guardare sia le transizioni attese con successo, ma anche per osservare cambiamenti inaspettati, come quando l'app è in background.
+
{{domxref("Element.onfullscreenerror")}}
+
Un gestore di eventi per l'evento {{event("fullscreenerror")}} che viene inviato quando si verifica un errore durante il tentativo di passare alla modalità a schermo intero.
+
+ +

Gestori di eventi obsoleti

+ +
+
{{DOMxRef("Element.onwheel")}}
+
Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Metodi

+ +

Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
Registers an event handler to a specific event type on the element.
+
{{DOMxRef("Element.attachShadow()")}}
+
Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{DOMxRef("Element.getAttribute()")}}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNames()")}}
+
Returns an array of attribute names from the current element.
+
{{DOMxRef("Element.getAttributeNS()")}}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
Returns the size of an element and its position relative to the viewport.
+
{{DOMxRef("Element.getClientRects()")}}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{DOMxRef("Element.hasAttribute()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{DOMxRef("Element.hasAttributes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{DOMxRef("Element.querySelector()")}}
+
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
+
{{DOMxRef("Element.querySelectorAll()")}}
+
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
Removes the element from the children list of its parent.
+
{{DOMxRef("Element.removeAttribute()")}}
+
Removes the named attribute from the current node.
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
Removes an event listener from the element.
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{domxref("Element.scroll()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{domxref("Element.scrollBy()")}}
+
Scrolls an element by the given amount.
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
Scrolls the page until the element gets into the view.
+
{{domxref("Element.scrollTo()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{DOMxRef("Element.setAttribute()")}}
+
Sets the value of a named attribute of the current node.
+
{{DOMxRef("Element.setAttributeNS()")}}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Sets the node representation of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{DOMxRef("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future pointer events.
+
{{DOMxRef("Element.toggleAttribute()")}}
+
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Element/cancel_event", "cancel")}}
+
Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.
+
error
+
Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Element/scroll_event", "scroll")}}
+
Fired when the document view or an element has been scrolled.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.
+
{{domxref("Element/select_event", "select")}}
+
Fired when some text has been selected.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.
+
{{domxref("Element/show_event", "show")}}
+
Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.
+
{{domxref("Element/wheel_event","wheel")}}
+
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}
+
+ +

Clipboard events

+ +
+
{{domxref("Element/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Element/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Element/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Composition events

+ +
+
{{domxref("Element/compositionend_event", "compositionend")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.
+
{{domxref("Element/compositionstart_event", "compositionstart")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.
+
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
+
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
+
+ +

Focus events

+ +
+
{{domxref("Element/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Element/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
{{domxref("Element/focusin_event", "focusin")}}
+
Fired when an element is about to gain focus.
+
{{domxref("Element/focusout_event", "focusout")}}
+
Fired when an element is about to lose focus.
+
+ +

Fullscreen events

+ +
+
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+
Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.
+
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+
Sent to a Document or Element if an error occurs while attempting to switch it into or out of full-screen mode.
+ Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.
+
+ +

Mouse events

+ +
+
{{domxref("Element/Activate_event", "Activate")}}
+
Occurs when an element is activated, for instance, through a mouse click or a keypress.
+ Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.
+
{{domxref("Element/auxclick_event", "auxclick")}}
+
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.
+
{{domxref("Element/click_event", "click")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.
+
{{domxref("Element/contextmenu_event", "contextmenu")}}
+
Fired when the user attempts to open a context menu.
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.
+
{{domxref("Element/dblclick_event", "dblclick")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.
+
{{domxref("Element/mousedown_event", "mousedown")}}
+
Fired when a pointing device button is pressed on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.
+
{{domxref("Element/mouseenter_event", "mouseenter")}}
+
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.
+
{{domxref("Element/mouseleave_event", "mouseleave")}}
+
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.
+
{{domxref("Element/mousemove_event", "mousemove")}}
+
Fired when a pointing device (usually a mouse) is moved while over an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.
+
{{domxref("Element/mouseout_event", "mouseout")}}
+
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.
+
{{domxref("Element/mouseover_event", "mouseover")}}
+
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.
+
{{domxref("Element/mouseup_event", "mouseup")}}
+
Fired when a pointing device button is released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.
+
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+
Fired each time the amount of pressure changes on the trackpadtouchscreen.
+
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
+
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+
Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.
+
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+
Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
+
+ +

Touch events

+ +
+
{{domxref("Element/touchcancel_event", "touchcancel")}}
+
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.
+
{{domxref("Element/touchend_event", "touchend")}}
+
Fired when one or more touch points are removed from the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property
+
{{domxref("Element/touchmove_event", "touchmove")}}
+
Fired when one or more touch points are moved along the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property
+
{{domxref("Element/touchstart_event", "touchstart")}}
+
Fired when one or more touch points are placed on the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property
+
+ +
+
 
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Aggiunto il metodo getAnimations().
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Aggiunge le proprietà undoScope e undoManager.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture and onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture e onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Aggiunti i seguenti metodi: querySelector() e querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Aggiunto il metodo requestPointerLock().
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Aggiunto il metodo requestFullscreen().
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Aggiunte le seguenti proprietà: innerHTML, e outerHTML.
+ Aggiunti i seguenti metodi: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Aggiunte le seguenti proprietà: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Aggiunti i seguenti metodi: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Aggiunti i seguenti metodi: closest(), insertAdjacentElement() and insertAdjacentText().
+ Spostato hasAttributes() dall'interfaccia Node a questa.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Rimossi i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Modificato il valore di ritorno di getElementsByTagName() e getElementsByTagNameNS().
+ Rimossa la proprietà schemaTypeInfo.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Aggiunti i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.
+ Aggiunta la proprietà schemaTypeInfo. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}Il metodo normalize() è stato spostato su {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element")}}

diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..6fbdb3c47b --- /dev/null +++ b/files/it/web/api/element/innerhtml/index.html @@ -0,0 +1,213 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing HTML + - Proprietà + - Referenza + - innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

La proprietà {{domxref("Element")}} innerHTML ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.

+ +
Note: Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri (&), (<), o (>), innerHTML restituisce questi caratteri come entità HTML "&amp;", "&lt;" e "&gt;" rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.
+ +

Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+ +

Sintassi

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di innerHTML rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa htmlString.

+ +

Eccezioni

+ +
+
SyntaxError
+
È stato effettuato un tentativo di impostare il valore di innerHTML utilizzando una stringa che non è HTML correttamente formato.
+
NoModificationAllowedError
+
È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.
+
+ +

Note di utilizzo

+ +

La proprietà innerHTML può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.

+ +

Leggere i contenuti HTML di un elemento

+ +

La lettura di innerHTML fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.

+ +
let contents = myElement.innerHTML;
+ +

Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.

+ +
+

Note: Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.

+
+ +

Sostituzione del contenuto di un elemento

+ +

L'impostazione del valore di innerHTML consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.

+ +

Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:

+ +
document.body.innerHTML = "";
+ +

Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri "<" con l'entità HTML "&lt;", convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di innerHTML viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Dettagli operativi

+ +

Cosa succede esattamente quando imposti il valore di innerHTML? In questo modo, l'user agent deve seguire questi passaggi:

+ +
    +
  1. Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.
    2. +
  2. Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <template> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo DocumentFragment creato nel passaggio 1.
    3. +
  3. Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo DocumentFragment.
    4. +
+ +

Considerazioni sulla sicurezza

+ +

Non è raro vedere innerHTML utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.

+ +
const name = "John";
+// supponiamo che 'el' sia un elemento DOM HTML
+el.innerHTML = name; // innocuo in questo caso
+
+// ...
+
+name = "<script>alert('Sono John in una noiosa allerta!')</script>";
+el.innerHTML = name; // innocuo in questo caso
+ +

Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con innerHTML non deve essere eseguito.

+ +

Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi innerHTML per impostare le stringhe su cui non si ha il controllo. Per esempio:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // mostra l'alert
+ +

Per questo motivo, si consiglia di non utilizzare innerHTML quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +
+

Warning: Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando innerHTML molto probabilmente il tuo codice verrà rifiutato. Ad esempio, se utilizzi innerHTML in un'estensione del browser e si invia l'estensione a addons.mozilla.org, non verrà passato il processo di revisione automatica.

+
+ +

Esempio

+ +

In questo esempio viene utilizzato innerHTML per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Registrazione degli eventi del mouse in questo contenitore...");
+
+ +

La funzione log() crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe "log".

+ +

Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

L'HTML è abbastanza semplice per il nostro esempio.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Il {{HTMLElement("div")}} con la classe "box" è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <div> la cui classe è "log" è il contenitore per il testo del log stesso.

+ +

CSS

+ +

I seguenti stili CSS del nostro contenuto di esempio.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Risultato

+ +

Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.

+ +

{{EmbedLiveSample("Esempio", 640, 350)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..f69fbb1daf --- /dev/null +++ b/files/it/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,102 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiare il DOM + - DOM + - Element + - HTML + - Inserire elementi + - Inserire nodi + - Referenza + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Il metodo insertAdjacentHTML() dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Sintassi

+ +
element.insertAdjacentHTML(position, text);
+ +

Parametri

+ +
+
position
+
Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad element; deve essere una delle seguenti stringhe: +
    +
  • 'beforebegin': Davanti ad element stesso.
    • +
  • 'afterbegin': Appena dentro element, prima del suo primo figlio.
    • +
  • 'beforeend': Appena dentro element, prima del suo ultimo figlio.
    • +
  • 'afterend': Dopo ad element stesso.
    • +
+
+
text
+
La stringa da analizzare come HTML o XML e inserita nell'albero.
+
+ +

Visualizzazione dei nomi delle posizioni

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note: Le posizioni beforebegin e afterend funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.
+ +

Esempio

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// A questo punto, la nuova struttura è:
+// <div id="one">one</div><div id="two">two</div>
+ +

Note

+ +

Considerazioni sulla sicurezza

+ +

Quando si inserisce HTML in una pagina utilizzando insertAdjacentHTML(), fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.

+ +

Non è consigliabile utilizzare  insertAdjacentHTML() quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html new file mode 100644 index 0000000000..2030226b37 --- /dev/null +++ b/files/it/web/api/element/nodename/index.html @@ -0,0 +1,116 @@ +--- +title: Node.nodeName +slug: Web/API/Element/nodeName +tags: + - API + - DOM + - Gecko + - NeedsSpecTable + - Node + - Property + - Read-only +translation_of: Web/API/Node/nodeName +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura nodeName restituisce il nome dell'attuale {{domxref("Node")}} come stringa.

+ +

Sintassi

+ +
var str = node.nodeName;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Interfacciavalore nodeName
{{domxref("Attr")}}Il valore di {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}Il valore di {{domxref("DocumentType.name")}}
{{domxref("Element")}}Il valore di {{domxref("Element.tagName")}}
{{domxref("Entity")}}Il nome dell'entità
{{domxref("EntityReference")}}Il nome del riferimento all'entità
{{domxref("Notation")}}Il nome della notazione
{{domxref("ProcessingInstruction")}}Il valore di {{domxref("ProcessingInstruction.target")}}
{{domxref("Text")}}"#text"
+ +

Esempio

+ +

Dato il seguente markup:

+ +
<div id="d1">hello world</div>
+<input type="text" id="t">
+
+ +

e il seguente script:

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+
+ +

IIn XHTML (o in qualsiasi altro formato XML), il valore di text_field sarebbe letto "div". Tuttavia, in HTML, il valore di text_field sarebbe letto "DIV", poichè nodeName e tagName restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more details on nodeName case sensitivity in different browsers.

+ +

Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché nodeName ha lo stesso valore di tagName per un elemento. Tieni presente, tuttavia, che nodeName ritornerà "#text" per i nodi di testo mentre tagName restituirà undefined.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeName")}}

diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..fba395288a --- /dev/null +++ b/files/it/web/api/element/nodetype/index.html @@ -0,0 +1,178 @@ +--- +title: Node.nodeType +slug: Web/API/Element/nodeType +tags: + - API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/nodeType +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.nodeType è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.

+ +

Sintassi

+ +
var type = node.nodeType;
+
+ +

Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.

+ +

Constanti

+ +

Tipi di nodi costanti

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ELEMENT_NODE1Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.
Node.TEXT_NODE3L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.
Node.CDATA_SECTION_NODE4Una {{domxref("CDATASection")}}, ad esempio <!CDATA[[ … ]]>.
Node.PROCESSING_INSTRUCTION_NODE7Una {{domxref("ProcessingInstruction")}} di un documento XML, come <?xml-stylesheet … ?>.
Node.COMMENT_NODE8Un nodo {{domxref("Comment")}}, come <!-- … -->.
Node.DOCUMENT_NODE9Un nodo {{domxref("Document")}}.
Node.DOCUMENT_TYPE_NODE10Un nodo {{domxref("DocumentType")}}, come <!DOCTYPE html>.
Node.DOCUMENT_FRAGMENT_NODE11Un nodo {{domxref("DocumentFragment")}}.
+ +

Tipi di nodo deprecati {{deprecated_inline()}}

+ +
+

Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ATTRIBUTE_NODE2Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.
Node.ENTITY_REFERENCE_NODE5Un nodo di riferimento di entità XML, come &foo;. Rimosso nel {{SpecName("DOM4")}}.
Node.ENTITY_NODE6Un nodo XML <!ENTITY …>. Rimosso nel {{SpecName("DOM4")}}.
Node.NOTATION_NODE12Un nodo XML <!NOTATION …>. Rimosso nel {{SpecName("DOM4")}}.
+ +

Esempi

+ +

Diversi tipi di nodi

+ +
document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+var p = document.createElement("p");
+p.textContent = "Once upon a time…";
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+
+ +

Commenti

+ +

Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.

+ +
var node = document.documentElement.firstChild;
+if (node.nodeType !== Node.COMMENT_NODE) {
+  console.warn("Dovresti commentare il tuo codice!");
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}{{Spec2('DOM WHATWG')}}Deprecated ATTRIBUTE_NODE, ENTITY_REFERENCE_NODE and NOTATION_NODE types.
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}{{Spec2('DOM3 Core')}}Nessun cambiamento.
{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM2 Core')}}Nessun cambiamento.
{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeType")}}

diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..547ba77939 --- /dev/null +++ b/files/it/web/api/element/nodevalue/index.html @@ -0,0 +1,75 @@ +--- +title: element.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/nodeValue +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore del nodo corrente.

+

Sintassi

+
valore = document.nodeValue
+
+

valore è una stringa contenente il valore del nodo corrente, se esiste.

+

Note

+

La proprietà nodeValue dell'intero documento, restituisce null. Per un nodo di tipo testo, commento o CDATA, nodeValue restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.

+

La tabella seguente mostra i valori restituiti per i vari tipi di elementi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attril valore dell'attributo
CDATASectionil contenuto della sezione CDATA
Commentil commento
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionl'intero contenuto, escluso il target
Textil contenuto del nodo testo
+

Quando nodeValue è impostato a null, reimpostarlo non ha alcun effetto.

+

Specifiche

+

nodeValue

diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..03e89aa432 --- /dev/null +++ b/files/it/web/api/element/parentnode/index.html @@ -0,0 +1,61 @@ +--- +title: Node.parentNode +slug: Web/API/Element/parentNode +tags: + - API + - DOM + - Gecko + - Proprietà +translation_of: Web/API/Node/parentNode +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.parentNode restituisce il genitore del nodo specificato nell'albero DOM.

+ +

Sintassi

+ +
parentNode = node.parentNode
+
+ +

parentNode è il genitore del nodo corrente. Il genitore di un elemento è un nodo Element, un nodo Document, o un nodo DocumentFragment.

+ +

Esempio

+ +
if (node.parentNode) {
+  // rimuovi un nodo dall'albero, a meno che
+  // non sia già nell'albero
+  node.parentNode.removeChild(node);
+}
+ +

Note

+ +

I nodi Document e DocumentFragment non possono mai avere un genitore, quindi parentNode ritornerà sempre null.

+ +

Restituisce anche null se il nodo è appena stato creato e non è ancora collegato all'albero.

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.parentNode")}}

+ +

Specifiche

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/element/prefix/index.html new file mode 100644 index 0000000000..3371ff1f8d --- /dev/null +++ b/files/it/web/api/element/prefix/index.html @@ -0,0 +1,26 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/prefix +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il namespace del nodo, oppure null se il nodo non ha alcun prefisso.

+

Sintassi

+
stringa = element.prefix
+element.prefix =stringa
+
+

Esempi

+

Il seguente esempio produce il messaggio "x".

+
<x:div onclick="alert(this.prefix)"/>
+
+

Note

+

Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.

+

Specifiche

+

Node.prefix (introdotto in DOM2).

+

{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}

diff --git a/files/it/web/api/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..f6455563d9 --- /dev/null +++ b/files/it/web/api/element/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

Il metodo querySelector() dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.

+ +

Sintassi

+ +
var element = baseElement.querySelector(selectors);
+
+ +

Parameters

+ +
+
selectors
+
Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} baseElement contro; questa deve essere una sintassi CSS valida o si verificherà un SyntaxError. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.
+
+ +

Valore di ritorno

+ +

Il primo elemento discendente di baseElement che corrisponde al gruppo specificato di selectors. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso baseElement e i suoi discendenti; in altre parole, selectors viene prima applicato all'intero documento, non a baseElement, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di baseElement. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo querySelector().

+ +

Se non vengono trovate corrispondenze, il valore restituito è null.

+ +

Eccezioni

+ +
+
SyntaxError
+
I selectors specificati non sono validi.
+
+ +

Esempi

+ +

Consideriamo alcuni esempi.

+ +

Trova un elemento specifico con valori specifici di un attributo

+ +

In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

L'intera gerarchia conta

+ +

Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i selectors, in modo che i livelli al di fuori di baseElement specificato siano ancora considerati quando si localizzano le corrispondenze.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+  (baseElement.querySelector("div span").innerHTML);
+ +

Risultato

+ +

Il risultato è simile a questo:

+ +

{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}

+ +

Nota come il selettore "div span" corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il
+ i nodi figli di baseElement non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).

+ +

More examples

+ +

Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i selectors.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.querySelector")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..696b449cb6 --- /dev/null +++ b/files/it/web/api/element/queryselectorall/index.html @@ -0,0 +1,182 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Element + - Finding Elements + - Method + - Referenza + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Il metodo {{domxref("Element")}} querySelectorAll() restituisce una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.

+ +
+

Note: This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

+
+ +

Sintassi

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un CSS selector valido; se non lo è, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.

+ +
+

Note: Se i selectors specificati includono un CSS pseudo-element, l'elenco restituito è sempre vuoto.

+
+ +

Exceptions

+ +
+
SyntaxError
+
La sintassi della stringa selectors specificata non è valida.
+
+ +

Esempi

+ +

Ottenere un elenco di risultati

+ +

Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento "myBox":

+ +
var matches = myBox.querySelectorAll("p");
+ +

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di "myBox" con la classe "note" o "alert":

+ +
var matches = myBox.querySelectorAll("div.note, div.alert");
+
+ +

Qui, otteniamo un elenco degli elementi <p> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Questo esempio usa un attribute selector per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" che hanno un attributo "data-active" il cui valore è "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Accedere ai risultati

+ +

Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà length è 0), non è stata trovata alcuna corrispondenza.

+ +

Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +
+

Note: NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova Array.from(nodeList).

+
+ +

Note dell'utente

+ +

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

+ +

HTML

+ +

Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In questo esempio, quando si seleziona ".outer .inner" nel contesto il <div> con la classe "select", tsi trova ancora l'elemento con la classe ".inner", anche se​​​​​​ .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

+ +

La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione originale
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.querySelectorAll")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/removeattribute/index.html b/files/it/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..2a64205cc3 --- /dev/null +++ b/files/it/web/api/element/removeattribute/index.html @@ -0,0 +1,57 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Riferimento + - metodo +translation_of: Web/API/Element/removeAttribute +--- +
{{ APIRef("DOM") }}
+ +

Il metodo {{domxref("Element")}} removeAttribute() rimuove l'attributo con il nome specificato dall'elemento.

+ +

Sintassi

+ +
element.removeAttribute(attrName);
+
+ +

Parametri

+ +
+
attrName
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, removeAttribute() restituisce senza generare un errore.
+
+ +

Valore di ritorno

+ +

undefined.

+ +
+

Note: Poiché removeAttribute() non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.

+
+ +

Note di utilizzo

+ +

Dovresti usare removeAttribute() invece di impostare il valore dell'attributo null direttamente o usando {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a null.

+ +

{{ DOMAttributeMethods() }}

+ +

Esempio

+ +
// Prima: <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// Dopo: <div id="div1" width="200px">
+
+ +

Specifica

+ +

DOM Level 2 Core: removeAttribute (introdotta nel DOM Level 1 Core)

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.removeAttribute")}}

diff --git a/files/it/web/api/element/requestfullscreen/index.html b/files/it/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..624e2da766 --- /dev/null +++ b/files/it/web/api/element/requestfullscreen/index.html @@ -0,0 +1,110 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

Il metodo Element.requestFullscreen() invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).

+ +

Non c'è garanzia che l'elemento verrà effettivamente visualizzato a schermo intero. Se il permesso di entrare in modalità full-screen è accordato, il documento riceverà un evento di tipo {{event("fullscreenchange")}} che lo informarà dell'avvenuto passaggio in modalità full-screen. Viceversa, se il permesso è negato, il documento riceve un evento di tipo {{event('fullscreenerror')}}.

+ +
+

Soltanto gli elementi nel documento principale o in un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero. Questo signigica che gli elementi all'interno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} non possono.

+
+ +

Sintassi

+ +
elt.requestFullscreen();
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatoNote
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxInternet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] implementato anche come webkitRequestFullScreen.

+ +

[2] Implementato come mozRequestFullScreen (notare la letterea S maiuscola per Screen). Prima di Firefox 44, Gecko erroneamente permetteva agli elementi all'inderno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} di richiedere e ottenere il full screen. Da Firefox 44 in poi ciò è stato corretto: solo gli elementi del documento principale o di un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero.

+ +

[3] Vedi documentazione su MSDN.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/scrollheight/index.html b/files/it/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..05cc48fd15 --- /dev/null +++ b/files/it/web/api/element/scrollheight/index.html @@ -0,0 +1,170 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ APIRef("DOM") }}

+ +

L' Element.scrollHeight è una proprietà di sola lettura e contiene la misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore dello scrollHeight è uguale al minimo valore del clientHeight che l'elemento richiederebbe per adattare tutto il contenuto nel punto di vista, senza usare una barra di scorrimento verticale. Esso include il padding, ma non il bordo dell'elemento.

+ +
+

Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.

+
+ +

Sintassi

+ +
var intElemScrollHeight = document.getElementById("nome dell'id").scrollHeight;
+
+ +

La variabile intElemScrollHeight è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.

+ +

Esempio

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: _fckstyle="position: _fckstyle="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:scrollHeight.png

+ +

Problemi e soluzioni

+ +

Determinare se un elemento è arrivato in fondo con lo scroll.

+ +

La seguente funzione ritorna true se l'elemento è in fondo al suo scorrimento, false altrimenti.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

 

+ +

Associato all'evento onscroll, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà element.scrollTop e element.clientHeight). Per esempio:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Thank you." :
+    "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+
+</script>
+<style type="text/css">
+
+#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+</style>
+</head>
+
+<body>
+
+  <form name="registration">
+
+    <p>
+      <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim.
+
+Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu.
+
+Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc.
+
+Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque.
+
+Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.</textarea>
+    </p>
+
+    <p>
+      <input type="checkbox" name="accept" id="agree" />
+      <label for="agree">I agree</label>
+      <input type="submit" id="nextstep" value="Next" />
+    </p>
+
+  </form>
+
+</body>
+</html>
+
+ +

Guarda l'esempio qui sopra

+ +

Specificazioni

+ +

scrollHeight è parte del modello dell'oggetto MSIE's DHTML . scrollHeight funziona su questi browser: {{SpecName("CSSOM View")}}.

+ +

Compatibilità dei Browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersioni
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | WebKit4.0 | 4.0 | ?
+ +

Nelle versioni più vecchie di FireFox: Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo scrollHeight sarebbe uguale al suo clientHeight . Questo ci può dire che, o il contenuto è talmente corto da non richiedere una barra di scorrimento verticale, o che quell'elemento ha impostato la proprietà CSS overflow su visible (non-scrollabile).

+ +

Guarda anche

+ + diff --git a/files/it/web/api/element/scrolltop/index.html b/files/it/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..52d7520f6f --- /dev/null +++ b/files/it/web/api/element/scrolltop/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - Proprietà + - Referenza +translation_of: Web/API/Element/scrollTop +--- +
{{ APIRef("DOM") }}
+ +

La proprietà Element.scrollTop ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.

+ +

Il valore scrollTop di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto visibile più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore scrollTop è 0.

+ +
+

Sui sistemi che usano il ridimensionamento del display, scrollTop può darti un valore decimale.

+
+ +

Sintassi

+ +
// Get the number of pixels scrolled.
+var intElemScrollTop = someElement.scrollTop;
+
+ +

Dopo aver eseguito questo codice, intElemScrollTop è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.

+ +
// Set the number of pixels scrolled.
+element.scrollTop = intValue;
+
+ +

scrollTop può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:

+ + + +

Esempio

+ +
+
+

padding-top

+If you can see this, scrollTop = 0 + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+If you can see this, scrollTop is > 0 + +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+If you can see this, scrollTop is maxed-out + +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Specifiche

+ + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.scrollTop")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/setattribute/index.html b/files/it/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..b3644c8bb2 --- /dev/null +++ b/files/it/web/api/element/setattribute/index.html @@ -0,0 +1,83 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Imposta 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.

+ +

Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Sintassi

+ +
Element.setAttribute(nome, valore);
+
+ +

Parametri

+ +
+
nome
+
Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando setAttribute() viene chiamato su un elemento in un documento HTML.
+
valore
+
Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.
+
+ +

Gli attributi booleani sono considerati true se sono presenti sull'elemento, indipendentemente dal loro valore effettivo; di norma, è necessario specificare la stringa vuota ("") in valore (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.

+ +

Poiché il valore specificato viene convertito in una stringa, specificare null non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa null. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Valore di ritorno

+ +

{{jsxref("undefined")}}.

+ +

Eccezioni

+ +
+
InvalidCharacterError
+
L'attributo specificato nome contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, setAttribute() viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.

+ +

HTML

+ +
<button>Hello World</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+
+ +

Questo dimostra due cose:

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.setAttribute")}}

+ +

Gecko notes

+ +

L'utilizzo di setAttribute() per modificare determinati attributi, in particolare value in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare Element.value anziché Element.setAttribute().

diff --git a/files/it/web/api/element/tagname/index.html b/files/it/web/api/element/tagname/index.html new file mode 100644 index 0000000000..950a9a17a4 --- /dev/null +++ b/files/it/web/api/element/tagname/index.html @@ -0,0 +1,72 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Di sola lettura + - Element + - Gecko + - Proprietà + - Referenza + - Referenza del DOM + - tagName +translation_of: Web/API/Element/tagName +--- +
{{ApiRef("DOM")}}
+ +

La proprietà tagName di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato. Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà tagName è "IMG" (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).

+ +

Sintassi

+ +
elementName = Element.tagName;
+
+ +

Valore

+ +

Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:

+ + + +

Per gli oggetti {{domxref("Element")}}, il valore di tagName è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.

+ +

Esempio

+ +

HTML

+ +
<span id="born">Quando sono nato...</span>
+
+ +

JavaScript

+ +
var span = document.getElementById("born");
+console.log(span.tagName);
+
+ +

In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi "span" verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, "SPAN" verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.tagName")}}

diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..137c76a3eb --- /dev/null +++ b/files/it/web/api/element/textcontent/index.html @@ -0,0 +1,138 @@ +--- +title: Node.textContent +slug: Web/API/Element/textContent +tags: + - API + - Command API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

La proprietà textContent dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.

+ +
+

Note: textContent e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma i due sono diversi in modi molto importanti.

+
+ +

Sintassi

+ +
var text = Node.textContent;
+Node.textContent = string;
+
+ +

Valore di ritorno

+ +

Una stringa o null.

+ +

Descrizione

+ +

Quando ottieni questa proprietà:

+ + + +

L'impostazione di textContent su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.

+ +

Differenze da innerText

+ +

Non lasciarti confondere dalle differenze tra Node.textContent e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:

+ + + +

Differenze da innerHTML

+ +

{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano innerHTML per recuperare o scrivere testo all'interno di un elemento, ma textContent ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di textContent può impedire gli attacchi XSS.

+ +

Esempi

+ +

Dato questo codice HTML:

+ +
<div id="divA">Questo è <span>un</span> testo!</div>
+ +

...puoi usare textContent per ottenere il contenuto del testo dell'elemento:

+ +
let text = document.getElementById('divA').textContent;
+// La variabile text è ora: "Questo è un testo!"
+ +

...o imposta il contenuto del testo dell'elemento:

+ +
document.getElementById('divA').textContent = 'Questo testo è diverso!';
+// L'HTML per divA è ora:
+// <div id="divA">Questo testo è diverso!</div>
+
+ +

Polyfill per IE8

+ +
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passare innerText o innerText.get direttamente non funziona,
+     // è richiesta la funzione wrapper.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.textContent")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento vs. DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}}
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introdotto
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html new file mode 100644 index 0000000000..c997b4efdd --- /dev/null +++ b/files/it/web/api/element/toggleattribute/index.html @@ -0,0 +1,104 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +translation_of: Web/API/Element/toggleAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo toggleAttribute() dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.

+ +

Sintassi

+ +
Element.toggleAttribute(name [, force]);
+
+ +

Parametri

+ +
+
name
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando toggleAttribute() viene chiamato su un elemento HTML in un documento HTML.
+
force {{optional_inline}}
+
Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.
+
+ +

Valore di ritorno

+ +

true se l'attributo name è eventualmente presente, in caso contrario false.

+ +

Exceptions

+ +
+
InvalidCharacterError
+
L'attributo specificato name contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, toggleAttribute() viene utilizzato per commutare l'attributo  readonly di un {{HTMLElement("input")}}.

+ +

HTML

+ +
<input value="text">
+<button>toggleAttribute("readonly")</button>
+ +

JavaScript

+ +
var button = document.querySelector("button");
+var input = document.querySelector("input");
+
+button.addEventListener("click", function(){
+  input.toggleAttribute("readonly");
+});
+
+ +

Risultato

+ +

{{ EmbedLiveSample('Esempio', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Polyfill

+ +
if (!Element.prototype.toggleAttribute) {
+  Element.prototype.toggleAttribute = function(name, force) {
+    if(force !== void 0) force = !!force
+
+    if (this.getAttribute(name) !== null) {
+      if (force) return true;
+
+      this.removeAttribute(name);
+      return false;
+    } else {
+      if (force === false) return false;
+
+      this.setAttribute(name, "");
+      return true;
+    }
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.toggleAttribute")}}

-- cgit v1.2.3-54-g00ecf