From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- .../it/web/api/element/addeventlistener/index.html | 694 --------------------- files/it/web/api/element/childnodes/index.html | 99 --- files/it/web/api/element/firstchild/index.html | 90 --- 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/textcontent/index.html | 138 ---- 9 files changed, 1477 deletions(-) delete mode 100644 files/it/web/api/element/addeventlistener/index.html delete mode 100644 files/it/web/api/element/childnodes/index.html delete mode 100644 files/it/web/api/element/firstchild/index.html delete mode 100644 files/it/web/api/element/nodename/index.html delete mode 100644 files/it/web/api/element/nodetype/index.html delete mode 100644 files/it/web/api/element/nodevalue/index.html delete mode 100644 files/it/web/api/element/parentnode/index.html delete mode 100644 files/it/web/api/element/prefix/index.html delete mode 100644 files/it/web/api/element/textcontent/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 deleted file mode 100644 index 6608e69bd3..0000000000 --- a/files/it/web/api/element/addeventlistener/index.html +++ /dev/null @@ -1,694 +0,0 @@ ---- -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/childnodes/index.html b/files/it/web/api/element/childnodes/index.html deleted file mode 100644 index f56bcc4380..0000000000 --- a/files/it/web/api/element/childnodes/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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/firstchild/index.html b/files/it/web/api/element/firstchild/index.html deleted file mode 100644 index b5052f5dfe..0000000000 --- a/files/it/web/api/element/firstchild/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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/nodename/index.html b/files/it/web/api/element/nodename/index.html deleted file mode 100644 index 2030226b37..0000000000 --- a/files/it/web/api/element/nodename/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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 deleted file mode 100644 index fba395288a..0000000000 --- a/files/it/web/api/element/nodetype/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -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 deleted file mode 100644 index 547ba77939..0000000000 --- a/files/it/web/api/element/nodevalue/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 deleted file mode 100644 index 03e89aa432..0000000000 --- a/files/it/web/api/element/parentnode/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -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 deleted file mode 100644 index 3371ff1f8d..0000000000 --- a/files/it/web/api/element/prefix/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -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/textcontent/index.html b/files/it/web/api/element/textcontent/index.html deleted file mode 100644 index 137c76a3eb..0000000000 --- a/files/it/web/api/element/textcontent/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -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

- - -- cgit v1.2.3-54-g00ecf