From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/it/web/api/element/attributes/index.html | 120 ------ 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/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/namespaceuri/index.html | 31 -- files/it/web/api/element/prefix/index.html | 27 -- 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 ---- .../it/web/api/element/toggleattribute/index.html | 104 ----- 23 files changed, 2746 deletions(-) delete mode 100644 files/it/web/api/element/attributes/index.html delete mode 100644 files/it/web/api/element/classlist/index.html delete mode 100644 files/it/web/api/element/classname/index.html delete mode 100644 files/it/web/api/element/clientheight/index.html delete mode 100644 files/it/web/api/element/closest/index.html delete mode 100644 files/it/web/api/element/getattribute/index.html delete mode 100644 files/it/web/api/element/getelementsbytagname/index.html delete mode 100644 files/it/web/api/element/hasattribute/index.html delete mode 100644 files/it/web/api/element/hasattributes/index.html delete mode 100644 files/it/web/api/element/index.html delete mode 100644 files/it/web/api/element/innerhtml/index.html delete mode 100644 files/it/web/api/element/insertadjacenthtml/index.html delete mode 100644 files/it/web/api/element/namespaceuri/index.html delete mode 100644 files/it/web/api/element/prefix/index.html delete mode 100644 files/it/web/api/element/queryselector/index.html delete mode 100644 files/it/web/api/element/queryselectorall/index.html delete mode 100644 files/it/web/api/element/removeattribute/index.html delete mode 100644 files/it/web/api/element/requestfullscreen/index.html delete mode 100644 files/it/web/api/element/scrollheight/index.html delete mode 100644 files/it/web/api/element/scrolltop/index.html delete mode 100644 files/it/web/api/element/setattribute/index.html delete mode 100644 files/it/web/api/element/tagname/index.html delete 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/attributes/index.html b/files/it/web/api/element/attributes/index.html deleted file mode 100644 index 5bd14f3e4b..0000000000 --- a/files/it/web/api/element/attributes/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -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/classlist/index.html b/files/it/web/api/element/classlist/index.html deleted file mode 100644 index 3d86fa8400..0000000000 --- a/files/it/web/api/element/classlist/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -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 deleted file mode 100644 index ca463f5f75..0000000000 --- a/files/it/web/api/element/classname/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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 deleted file mode 100644 index 167dd00ca3..0000000000 --- a/files/it/web/api/element/clientheight/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -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 deleted file mode 100644 index cded9f95bb..0000000000 --- a/files/it/web/api/element/closest/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -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/getattribute/index.html b/files/it/web/api/element/getattribute/index.html deleted file mode 100644 index e10427e5bd..0000000000 --- a/files/it/web/api/element/getattribute/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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 deleted file mode 100644 index 9239135259..0000000000 --- a/files/it/web/api/element/getelementsbytagname/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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 deleted file mode 100644 index 4cd6d2a9d2..0000000000 --- a/files/it/web/api/element/hasattribute/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 deleted file mode 100644 index ca408ca96d..0000000000 --- a/files/it/web/api/element/hasattributes/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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 deleted file mode 100644 index f518252bc7..0000000000 --- a/files/it/web/api/element/index.html +++ /dev/null @@ -1,475 +0,0 @@ ---- -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 deleted file mode 100644 index 6fbdb3c47b..0000000000 --- a/files/it/web/api/element/innerhtml/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -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 deleted file mode 100644 index f69fbb1daf..0000000000 --- a/files/it/web/api/element/insertadjacenthtml/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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/namespaceuri/index.html b/files/it/web/api/element/namespaceuri/index.html deleted file mode 100644 index 1dad4c71d7..0000000000 --- a/files/it/web/api/element/namespaceuri/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: document.namespaceURI -slug: Web/API/Element/namespaceURI -translation_of: Web/API/Node/namespaceURI -translation_of_original: Web/API/Document/namespaceURI -original_slug: Web/API/Node/namespaceURI ---- -
{{APIRef("DOM")}}
- -

namespaceURI restituisce lo spazio dei nomi XML del documento corrente.

- -

Sintassi

- -
NSURI = document.namespaceURI
-
- -

Parametri

- - - -

Note

- -

Il DOM di per sè non supporta la validazione del namespace. Spetta all'applicazione DOM effettuare la necessaria validazione. Si noti inoltre che il prefisso del namespace, una volta associato a un nodo particolare, non può più cambiare.

- -

Specifiche

- -

DOM Level 2 Core: namespaceURI

- -

{{ languages( { "fr": "fr/DOM/document.namespaceURI", "pl": "pl/DOM/document.namespaceURI" } ) }}

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 c7ee67ac36..0000000000 --- a/files/it/web/api/element/prefix/index.html +++ /dev/null @@ -1,27 +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 -original_slug: 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 deleted file mode 100644 index f6455563d9..0000000000 --- a/files/it/web/api/element/queryselector/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -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 deleted file mode 100644 index 696b449cb6..0000000000 --- a/files/it/web/api/element/queryselectorall/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -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 deleted file mode 100644 index 2a64205cc3..0000000000 --- a/files/it/web/api/element/removeattribute/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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 deleted file mode 100644 index 624e2da766..0000000000 --- a/files/it/web/api/element/requestfullscreen/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -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 deleted file mode 100644 index 05cc48fd15..0000000000 --- a/files/it/web/api/element/scrollheight/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -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 deleted file mode 100644 index 52d7520f6f..0000000000 --- a/files/it/web/api/element/scrolltop/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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 deleted file mode 100644 index b3644c8bb2..0000000000 --- a/files/it/web/api/element/setattribute/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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 deleted file mode 100644 index 950a9a17a4..0000000000 --- a/files/it/web/api/element/tagname/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html deleted file mode 100644 index c997b4efdd..0000000000 --- a/files/it/web/api/element/toggleattribute/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -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