diff options
Diffstat (limited to 'files/it/web/api/element')
23 files changed, 0 insertions, 2746 deletions
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 ---- -<p>{{ APIRef("DOM") }}</p> - -<p>La proprietà <strong><code>Element.attributes</code></strong> restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un <code>Array</code>, 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, <code>attributes</code> è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.</p> - -<h2 id="Syntax" name="Syntax">Sintassi</h2> - -<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; -</pre> - -<h2 id="Example" name="Example">Esempio</h2> - -<h3 id="Esempi_basilari">Esempi basilari</h3> - -<pre class="brush: js">// Ottenere il primo elemento <p> nel documento -var para = document.getElementsByTagName("p")[0]; -var atts = para.attributes;</pre> - -<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">Enumerazione degli attributi degli elementi</h3> - -<p>L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.<br> - L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.</p> - -<pre class="brush: html"><!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></pre> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Nessun cambiamento da {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Definizione iniziale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<div class="hidden"> -<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("api.Element.attributes")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{domxref("NamedNodeMap")}}, l'interfaccia dell'oggetto restituito</li> - <li>Considerazioni sulla compatibilità con ross-browser: su <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>La proprietà <code><strong>Element.classList</strong></code> di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.</p> - -<p>L'utilizzo di <code>classList</code> è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; -</pre> - -<p><em>elementClasses</em> è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di <em>elementNodeReference</em>. Se l'attributo class non è stato impostato o è vuoto <em>elementClasses.length</em> ritorna <code>0</code>. <code>element.classList</code> è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi <code>add()</code> e <code>remove()</code>.</p> - -<h2 id="Metodi">Metodi</h2> - -<dl> - <dt><code>add( String [, String [, ...]] )</code></dt> - <dd>Aggiunge le classi specificate. Se queste classi esistono già nell'attributo <code>class</code> dell'elemento, vengono ignorate.</dd> - <dt><code>remove( String [, String [, ...]] )</code></dt> - <dd> - <p>Rimuove le classi specificate.</p> - - <div class="note"><strong>Nota:</strong> La rimozione di una classe inesistente NON genera un errore.</div> - </dd> - <dt><code><strong>item</strong>( Number )</code></dt> - <dd>Restituisce il valore della classe per indice nella collezione.</dd> - <dt><code><strong>toggle</strong>( String [, force] )</code></dt> - <dd>Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce <code>false</code>, altrimenti, la aggiunge e restituisce <code>true</code>.<br> - <br> - Quando è presente un secondo argomento: Se il secondo argomento restituisce <code>true</code>, aggiunge la classe specificata; se restituisce <code>false</code>, la rimuove.</dd> - <dt><code>contains( String )</code></dt> - <dd>Verifica se il valore di classe specificato esiste nell'attributo <code>class</code> dell'elemento.</dd> - <dt><code>replace( vecchiaClasse, nuovaClasse )</code></dt> - <dd>Sostituisce una classe esistente con una nuova classe.</dd> -</dl> - -<h2 id="Esempi">Esempi</h2> - -<pre class="brush: js">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");</pre> - -<div class="note"> -<p>Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014" rel="noopener">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> -</div> - -<dl> -</dl> - -<h2 id="Polyfill">Polyfill</h2> - -<p>L'evento legacy <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> può essere utilizzato per creare un mockup dinamico di <code>classList</code> dinamico grazie alla proprietà <code>Element.prototype.className</code> che attiva l'evento specificato una volta modificato.</p> - -<p>Il seguente polyfill sia per <code>classList</code> che per <code>DOMTokenList</code> garantisce <strong>la piena</strong> conformità (copertura) per tutti i metodi e le proprietà standard di <code>Element.prototype.classList</code> per i browser <strong>IE10-IE11</strong> oltre ad un comportamento <em>quasi</em> conforme per <strong>IE 6-9</strong>. Controlla:</p> - -<pre class="brush: js">// 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); -</pre> - -<h3 id="Avvertenze">Avvertenze</h3> - -<p>Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da <code>document.createElement</code> prima di essere appesi su un nodo padre) in IE6-7.</p> - -<p>Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di <code>classList</code> 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.</p> - -<p>Una nota minore è che in IE6-7, questo polyfill usa la proprietà <code>window[" uCL"]</code> sull'oggetto window per comunicare con le espressioni CSS, la proprietà css <code>x-uCLp</code> su tutti gli elementi e la proprietà <code>element[" uCL"]</code> su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva <code>element[" uCLp"]</code> viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà <code>DOMTokenList[" uCL"]</code> viene aggiunta ad ogni oggetto <code>element["classList"]</code> per garantire che la DOMTokenList sia limitata al proprio elemento.</p> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Definizione iniziale</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.classList")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{domxref("element.className")}}</li> - <li>{{domxref("DOMTokenList")}}</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary">La proprietà <code><strong>className</strong></code> dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore <a href="/en-US/docs/Web/HTML/Global_attributes/class">dell'attributo <code>class</code></a> dell'elemento specificato.</span></p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; -<var>elementNodeReference</var>.className = <var>cName</var>;</pre> - -<ul> - <li><code>cName</code> è una variabile stringa che rappresenta le classi o le classi separate dallo spazio dell'elemento corrente.</li> -</ul> - -<h2 id="Esempio">Esempio</h2> - -<pre class="brush: js">let el = document.getElementById('item'); - -if (el.className === 'active'){ - el.className = 'inactive'; -} else { - el.className = 'active'; -}</pre> - -<h2 id="Appunti">Appunti</h2> - -<p>Il nome <code>className</code> viene utilizzato per questa proprietà anziché <code>class</code> a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.</p> - -<p><code>className</code> può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se <code>element</code> è un {{domxref("SVGElement")}}. È meglio ottenere/impostare <code>className</code> 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 <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> anzichè <code>""</code> se <code>element</code> ha un <a href="/en-US/docs/Web/HTML/Global_attributes/class">attributo <code>class</code></a> vuoto.</p> - -<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre> - -<div class="note"> -<p><code>class</code> è un <strong>Attributo</strong> <strong>HTML</strong>, mentre <code>className</code> è una <strong>proprietà del DOM</strong>.</p> -</div> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> - <td>{{Spec2("DOM2 HTML")}}</td> - <td>Definizione iniziale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.className")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{domxref("element.classList")}}</li> -</ul> 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 ---- -<p>{{ ApiRef() }}</p> -<h3 id="Sommario" name="Sommario">Sommario</h3> -<p>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.</p> -<p><code>clientHeight</code> può essere calcolato come CSS <code>height</code> + CSS <code>padding</code> - altezza della barra di scorrimento orizzontale(se presente).</p> -<h3 id="Sintassi_e_valori" name="Sintassi_e_valori">Sintassi e valori</h3> -<pre class="eval">var <var>altezza</var> = <var>elemento</var>.clientHeight; -</pre> -<p><var>altezza</var> è un numero intero che rappresenta l'altezza in pixel di <var>elemento</var>.</p> -<p><code>clientHeight</code> è di sola lettura.</p> -<h3 id="Esempio" name="Esempio">Esempio</h3> -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> - <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> - <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> - <p>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.</p> - <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> - <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p> - <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> - </div> - <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div> -<p style="margin-top: 270px;"><img alt="Image:clientHeight.png"></p> -<h3 id="Specifiche" name="Specifiche">Specifiche</h3> -<p>Non fa parte di nessuna specifica W3C.</p> -<h3 id="Note" name="Note">Note</h3> -<p><code>clientHeight</code> è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.</p> -<h3 id="Riferimenti" name="Riferimenti">Riferimenti</h3> -<ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN clientHeight definition</a></li> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> - <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a></li> -</ul> -<p>{{ languages( { "fr": "fr/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "en": "en/DOM/element.clientHeight" } ) }}</p> 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 ---- -<p>{{APIRef('Shadow DOM')}}</p> - -<div>Il metodo <code><strong>closest()</strong></code> 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 <code>null</code>.</div> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox">var <em>closestElement =</em><em> element</em>.closest(<em>selectors</em>); -</pre> - -<h3 id="Parametri">Parametri</h3> - -<ul> - <li><code>selectors</code> è una {{domxref("DOMString")}} contenente una lista di selettori come <code>"p:hover, .toto + q"</code></li> - <li><code>element</code> è l'{{domxref("Element")}} in cima all'albero degli elementi da trattare.</li> -</ul> - -<h3 id="Valore_del_risultato">Valore del risultato</h3> - -<ul> - <li><code>closestElement</code> è l'{{domxref("Element")}} che è l'antenato più vicino degli elementi selezionati. Può essere <code>null</code>.</li> -</ul> - -<h3 id="Eccezioni">Eccezioni</h3> - -<ul> - <li>{{exception("SyntaxError")}} viene ritornato se i <em>selectors</em> non sono una stringa di elenco di selettori valida.</li> -</ul> - -<h2 id="Esempio">Esempio</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: 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></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">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</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Per i browser che non supportano <code>Element.closest()</code>, ma supportano il supporto per <code>element.matches()</code> (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:</p> - -<pre class="brush: js">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; - }; -}</pre> - -<p>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.</p> - -<pre class="brush: js">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; - }; -} -</pre> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definizione iniziale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<div> - - -<p>{{Compat("api.Element.closest")}}</p> - -<h3 id="Note_di_compatibilità">Note di compatibilità</h3> - -<ul> - <li>In Edge <code>document.createElement(element).closest(element)</code> restituirà <code>null</code> se l'elemento non è prima collegato al DOM</li> -</ul> -</div> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>L'interfaccia {{domxref("Element")}}.</li> - <li> - <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">La sintassi dei Selettori</a></div> - </li> - <li> - <div class="syntaxbox">Altri metodi che accettano i selettori: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div> - </li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><code>getAttribute()</code> restituisce il valore di un attributo specificato sull'elemento.</span> Se l'attributo specificato non esiste, il valore restituito sarà <code>null</code> o <code>""</code> (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.</p> - -<h2 id="Syntax" name="Syntax">Sintassi</h2> - -<pre class="syntaxbox"><em>var attributo</em> = element.getAttribute(<em>attributeName</em>); -</pre> - -<p>dove</p> - -<ul> - <li><code><em>attributo</em></code> è una stringa contenente il valore di <code><em>attributeName</em></code>.</li> - <li><code><em>attributeName</em></code> è il nome dell'attributo di cui si desidera ottenere il valore.</li> -</ul> - -<h2 id="Example" name="Example">Esempio</h2> - -<pre class="brush:js">let div1 = document.getElementById('div1'); -let align = div1.getAttribute('align'); - -alert(align); // Mostra il valore di "align" per l'elemento con id="div1"</pre> - -<h2 id="Notes" name="Notes">Appunti</h2> - -<p>Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, <code>getAttribute()</code> converte in minuscolo il suo argomento prima di procedere.</p> - -<p>Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono <code>null</code> quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">l'attuale bozza della specifica DOM</a> specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la <em>stringa vuota</em>, 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 <code>getAttribute()</code> se è possibile che l'attributo richiesto non esista sull'elemento specificato.</p> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<div> - - -<p>{{Compat("api.Element.getAttribute")}}</p> -</div> - -<h2 id="Specification" name="Specification">Specifiche</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introdotto in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> -</ul> 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 ---- -<div>{{ APIRef("DOM") }}</div> - -<p><span class="seoSummary">Il metodo <code><strong>Element.getElementsByTagName()</strong></code> ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il <a href="/it/docs/Web/API/Element/tagName">tag name</a> specificato.</span> Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è <em>dinamico</em>, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare <code>Element.getElementsByTagName()</code> con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.</p> - -<p>Quando viene chiamato su un elemento HTML in un documento HTML, <code>getElementsByTagName</code> converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <code><a href="/en-US/docs/Web/SVG/Element/linearGradient"><linearGradient></a></code>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.</p> - -<p><code>Element.getElementsByTagName</code> è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre> - -<ul> - <li><code>elements</code> è una {{domxref("HTMLCollection")}} <em>dinamica</em> di elementi con un nome di tag corrispondente, nell'ordine in cui appaiono. Se non vengono trovati elementi, la <code>HTMLCollection</code> è vuota.</li> - <li><code>element</code> è l'elemento da cui inizia la ricerca. Sono inclusi solo i discendenti dell'elemento, non l'elemento stesso.</li> - <li><code>tagName</code> è il nome qualificato da cercare. La stringa speciale <code>"*"</code> rappresenta tutti gli elementi. Per compatibilità con XHTML, è necessario scriverlo in minuscolo.</li> -</ul> - -<h2 id="Esempio">Esempio</h2> - -<pre class="brush: js">// 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 - } -} -</pre> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Nessun cambiamento da {{SpecName('DOM1')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Definizione iniziale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.getElementsByTagName")}}</p> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo <strong><code>Element.hasAttribute()</code></strong> restituisce un valore <strong>booleano</strong> che indica se l'elemento specificato ha o meno l'attributo specificato.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><var>var <em>risultato</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>); -</pre> - -<dl> - <dt><code>risultato</code></dt> - <dd>detiene il valore di ritorno <code>true</code> o <code>false</code>.</dd> - <dt><code>name</code></dt> - <dd>è una stringa che rappresenta il nome dell'attributo.</dd> -</dl> - -<h2 id="Esempio">Esempio</h2> - -<pre class="brush:js">var foo = document.getElementById("foo"); -if (foo.hasAttribute("bar")) { - // fare qualcosa -} -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush:js">;(function(prototype) { - prototype.hasAttribute = prototype.hasAttribute || function(name) { - return !!(this.attributes[name] && - this.attributes[name].specified); - } -})(Element.prototype); -</pre> - -<h2 id="Appunti">Appunti</h2> - -<div>{{DOMAttributeMethods}}</div> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Nessun cambiamento da {{SpecName('DOM2 Core')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Definizione iniziale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.hasAttribute")}}</p> 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 ---- -<p>{{ ApiRef() }}</p> -<h3 id="Sommario" name="Sommario">Sommario</h3> -<p>Restituisce un valore booleano: <code>true</code> se l'elemento ha un qualunque numero di attributi, altrimenti <code>false</code>.</p> -<h3 id="Sintassi" name="Sintassi">Sintassi</h3> -<p> - <i> - bool</i> - = element.hasAttributes()</p> -<h3 id="Esempio" name="Esempio">Esempio</h3> -<pre>t1 = document.getElementById("tabella-dati"); -if (t1.hasAttributes()) { - // fai qualcosa con - // t1.attributes -} -</pre> -<h3 id="Specifiche" name="Specifiche">Specifiche</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes </a></p> -<p>{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "pl": "pl/DOM/element.hasAttributes" } ) }}</p> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><strong><code>Element</code></strong> è 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 <code>Element</code>.</span> 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.</p> - -<p>Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia <code>XULElement</code>, implementano anche <code>Element</code>.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties" name="Properties">Proprietà</h2> - -<p><em>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")}}, </em>e {{DOMxRef("Animatable")}}.</p> - -<dl> - <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> - <dd>Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.</dd> - <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> - <dd>Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.</dd> - <dt>{{DOMxRef("Element.className")}}</dt> - <dd>È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.</dd> - <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> - <dd>Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.</dd> - <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> - <dd>Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.</dd> - <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> - <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.</dd> - <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> - <dd>Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.</dd> - <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd> - <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> - <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd> - <dt>{{DOMxRef("Element.id")}}</dt> - <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd> - <dt>{{DOMxRef("Element.innerHTML")}}</dt> - <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd> - <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> - <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd> - <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> - <dd>The namespace URI of the element, or <code>null</code> if it is no namespace. - <div class="note"> - <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p> - </div> - </dd> - <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> - <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> - <dt>{{DOMxRef("Element.outerHTML")}}</dt> - <dd>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.</dd> - <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> - <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> - <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> - <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> - <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> - <dt>{{DOMxRef("Element.scrollLeft")}}</dt> - <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> - <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> - <dt>{{DOMxRef("Element.scrollTop")}}</dt> - <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd> - <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> - <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> - <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> - <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd> - <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> - <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> - <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> - <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd> - <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> - <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> - <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd> - <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> - <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd> - <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> - -<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> -</div> - -<h3 id="Proprietà_incluse_da_Slotable">Proprietà incluse da Slotable</h3> - -<p><em>L'interfaccia <code>Element</code> include la seguente proprietà, definita nel mixin {{DOMxRef("Slotable")}}.</em></p> - -<dl> - <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> - <dd>Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.</dd> -</dl> - -<h3 id="Handlers" name="Handlers">Gestori di eventi</h3> - -<dl> - <dt>{{domxref("Element.onfullscreenchange")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Element.onfullscreenerror")}}</dt> - <dd>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.</dd> -</dl> - -<h4 id="Gestori_di_eventi_obsoleti">Gestori di eventi obsoleti</h4> - -<dl> - <dt>{{DOMxRef("Element.onwheel")}}</dt> - <dd>Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. <strong>Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd> -</dl> - -<h2 id="Methods" name="Methods">Metodi</h2> - -<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p> - -<dl> - <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> - <dd>Registers an event handler to a specific event type on the element.</dd> - <dt>{{DOMxRef("Element.attachShadow()")}}</dt> - <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd> - <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> - <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> - <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> - <dd>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.</dd> - <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> - <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd> - <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> - <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd> - <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> - <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd> - <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> - <dd>Returns an array of Animation objects currently active on the element.</dd> - <dt>{{DOMxRef("Element.getAttribute()")}}</dt> - <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> - <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> - <dd>Returns an array of attribute names from the current element.</dd> - <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> - <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> - <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> - <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> - <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> - <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> - <dd>Returns the size of an element and its position relative to the viewport.</dd> - <dt>{{DOMxRef("Element.getClientRects()")}}</dt> - <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> - <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> - <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd> - <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> - <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd> - <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> - <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> - <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> - <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> - <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> - <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> - <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd> - <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> - <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> - <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> - <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> - <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> - <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> - <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> - <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> - <dt>{{DOMxRef("Element.querySelector()")}}</dt> - <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd> - <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> - <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd> - <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> - <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd> - <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> - <dd>Removes the element from the children list of its parent.</dd> - <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> - <dd>Removes the named attribute from the current node.</dd> - <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> - <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> - <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>Removes the node representation of the named attribute from the current node.</dd> - <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> - <dd>Removes an event listener from the element.</dd> - <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> - <dd>Asynchronously asks the browser to make the element full-screen.</dd> - <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> - <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> -</dl> - -<dl> - <dt>{{domxref("Element.scroll()")}}</dt> - <dd>Scrolls to a particular set of coordinates inside a given element.</dd> - <dt>{{domxref("Element.scrollBy()")}}</dt> - <dd>Scrolls an element by the given amount.</dd> - <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> - <dd>Scrolls the page until the element gets into the view.</dd> - <dt>{{domxref("Element.scrollTo()")}}</dt> - <dd>Scrolls to a particular set of coordinates inside a given element.</dd> - <dt>{{DOMxRef("Element.setAttribute()")}}</dt> - <dd>Sets the value of a named attribute of the current node.</dd> - <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> - <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> - <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>Sets the node representation of the named attribute from the current node.</dd> - <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> - <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd> - <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> - <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> - <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> - <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd> - <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> - <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> - -<dl> - <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> - <dd>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 <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br> - Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt> - <dd>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.<br> - Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd> - <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> - <dd>Fired when the document view or an element has been scrolled.<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd> - <dt>{{domxref("Element/select_event", "select")}}</dt> - <dd>Fired when some text has been selected.<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd> - <dt>{{domxref("Element/show_event", "show")}}</dt> - <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute.<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd> - <dt>{{domxref("Element/wheel_event","wheel")}}</dt> - <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br> - Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}</dd> -</dl> - -<h3 id="Clipboard_events">Clipboard events</h3> - -<dl> - <dt>{{domxref("Element/copy_event", "copy")}}</dt> - <dd>Fired when the user initiates a copy action through the browser's user interface.<br> - Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd> - <dt>{{domxref("Element/cut_event", "cut")}}</dt> - <dd>Fired when the user initiates a cut action through the browser's user interface.<br> - Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd> - <dt>{{domxref("Element/paste_event", "paste")}}</dt> - <dd>Fired when the user initiates a paste action through the browser's user interface.<br> - Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd> -</dl> - -<h3 id="Composition_events">Composition events</h3> - -<dl> - <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> - <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd> - <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> - <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd> - <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> - <dd>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")}}.</dd> -</dl> - -<h3 id="Focus_events">Focus events</h3> - -<dl> - <dt>{{domxref("Element/blur_event", "blur")}}</dt> - <dd>Fired when an element has lost focus.<br> - Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd> - <dt>{{domxref("Element/focus_event", "focus")}}</dt> - <dd>Fired when an element has gained focus.<br> - Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd> - <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> - <dd>Fired when an element is about to gain focus.</dd> - <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> - <dd>Fired when an element is about to lose focus.</dd> -</dl> - -<h3 id="Fullscreen_events">Fullscreen events</h3> - -<dl> - <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt> - <dd>Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.<br> - Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}} property.</dd> - <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt> - <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.<br> - Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.</dd> -</dl> - -<h3 id="Mouse_events">Mouse events</h3> - -<dl> - <dt>{{domxref("Element/Activate_event", "Activate")}}</dt> - <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.<br> - Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.</dd> - <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> - <dd>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.<br> - Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd> - <dt>{{domxref("Element/click_event", "click")}}</dt> - <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br> - Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd> - <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> - <dd>Fired when the user attempts to open a context menu.<br> - Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd> - <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> - <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br> - Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd> - <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> - <dd>Fired when a pointing device button is pressed on an element.<br> - Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd> - <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> - <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd> - <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> - <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd> - <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> - <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br> - Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd> - <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> - <dd>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.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd> - <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> - <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd> - <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> - <dd>Fired when a pointing device button is released on an element.<br> - Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd> - <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> - <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd> - <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> - <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd> - <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> - <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd> - <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> - <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd> -</dl> - -<h3 id="Touch_events">Touch events</h3> - -<dl> - <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> - <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd> - <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> - <dd>Fired when one or more touch points are removed from the touch surface.<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd> - <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> - <dd>Fired when one or more touch points are moved along the touch surface.<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd> - <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> - <dd>Fired when one or more touch points are placed on the touch surface.<br> - Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd> -</dl> - -<dl> - <dt> </dt> -</dl> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Web Animations", '', '')}}</td> - <td>{{Spec2("Web Animations")}}</td> - <td>Aggiunto il metodo <code>getAnimations()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Undo Manager', '', 'Element')}}</td> - <td>{{Spec2('Undo Manager')}}</td> - <td>Aggiunge le proprietà <code>undoScope</code> e <code>undoManager</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> - Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>Aggiunti i seguenti gestori di eventi: <code>ongotpointercapture</code> e <code>onlostpointercapture</code>.<br> - Aggiunti i seguenti metodi: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>Aggiunti i seguenti metodi: <code>querySelector()</code> e <code>querySelectorAll()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Aggiunto il metodo <code>requestPointerLock()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> - <td>{{Spec2('Fullscreen')}}</td> - <td>Aggiunto il metodo <code>requestFullscreen()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>Aggiunte le seguenti proprietà: <code>innerHTML</code>, e <code>outerHTML</code>.<br> - Aggiunti i seguenti metodi: <code>insertAdjacentHTML()</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Aggiunte le seguenti proprietà: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> - Aggiunti i seguenti metodi: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Aggiunti i seguenti metodi: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br> - Spostato <code>hasAttributes()</code> dall'interfaccia <code>Node</code> a questa.</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Rimossi i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> - Modificato il valore di ritorno di <code>getElementsByTagName()</code> e <code>getElementsByTagNameNS()</code>.<br> - Rimossa la proprietà <code>schemaTypeInfo</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Aggiunti i seguenti metodi: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.<br> - Aggiunta la proprietà <code>schemaTypeInfo</code>. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Il metodo <code>normalize()</code> è stato spostato su {{DOMxRef("Node")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Definizione iniziale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element")}}</p> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary">La proprietà {{domxref("Element")}} <strong><code>innerHTML</code></strong> ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.</span></p> - -<div class="note"><strong>Note: </strong>Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri <code>(&)</code>, <code>(<)</code>, o <code>(>)</code>, <code>innerHTML</code> restituisce questi caratteri come entità HTML <code>"&amp;"</code>, <code>"&lt;"</code> e <code>"&gt;"</code> rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.</div> - -<p>Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML; - -<var>element</var>.innerHTML = <var>htmlString</var>; -</pre> - -<h3 id="Valore">Valore</h3> - -<p>Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di <code>innerHTML</code> rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa <var>htmlString</var>.</p> - -<h3 id="Eccezioni">Eccezioni</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>È stato effettuato un tentativo di impostare il valore di <code>innerHTML</code> utilizzando una stringa che non è HTML correttamente formato.</dd> - <dt><code>NoModificationAllowedError</code></dt> - <dd>È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.</dd> -</dl> - -<h2 id="Note_di_utilizzo">Note di utilizzo</h2> - -<p>La proprietà <code>innerHTML</code> può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.</p> - -<h3 id="Leggere_i_contenuti_HTML_di_un_elemento">Leggere i contenuti HTML di un elemento</h3> - -<p>La lettura di <code>innerHTML</code> fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.</p> - -<pre class="brush: js">let contents = myElement.innerHTML;</pre> - -<p>Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.</p> - -<div class="note"> -<p><strong>Note:</strong> 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.</p> -</div> - -<h3 id="Sostituzione_del_contenuto_di_un_elemento">Sostituzione del contenuto di un elemento</h3> - -<p>L'impostazione del valore di <code>innerHTML</code> consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.</p> - -<p>Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:</p> - -<pre class="brush: js">document.body.innerHTML = "";</pre> - -<p>Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri <code>"<"</code> con l'entità HTML <code>"&lt;"</code>, convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di <code>innerHTML</code> viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.</p> - -<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + - document.documentElement.innerHTML.replace(/</g,"&lt;") + - "</pre>";</pre> - -<h4 id="Dettagli_operativi">Dettagli operativi</h4> - -<p>Cosa succede esattamente quando imposti il valore di <code>innerHTML</code>? In questo modo, l'user agent deve seguire questi passaggi:</p> - -<ol> - <li>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.</li> - <li>Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <code><template></code> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo <code>DocumentFragment</code> creato nel passaggio 1.</li> - <li>Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo <code>DocumentFragment</code>.</li> -</ol> - -<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3> - -<p>Non è raro vedere <code>innerHTML</code> 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.</p> - -<pre class="brush: js">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</pre> - -<p>Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">non deve essere eseguito</a>.</p> - -<p>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 <code>innerHTML</code> per impostare le stringhe su cui non si ha il controllo. Per esempio:</p> - -<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; -el.innerHTML = name; // mostra l'alert</pre> - -<p>Per questo motivo, si consiglia di non utilizzare <code>innerHTML</code> 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.</p> - -<div class="warning"> -<p><strong>Warning:</strong> Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando <code>innerHTML</code> molto probabilmente il tuo codice verrà rifiutato. Ad esempio, <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">se utilizzi <code>innerHTML</code></a> in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">un'estensione del browser</a> e si invia l'estensione a <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, non verrà passato il processo di revisione automatica.</p> -</div> - -<h2 id="Esempio">Esempio</h2> - -<p>In questo esempio viene utilizzato <code>innerHTML</code> per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.</p> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">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..."); -</pre> - -<p>La funzione <code>log()</code> 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 <code>"log"</code>.</p> - -<p>Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):</p> - -<pre class="brush: js">function logEvent(event) { - var msg = "Event <strong>" + event.type + "</strong> at <em>" + - event.clientX + ", " + event.clientY + "</em>"; - log(msg); -}</pre> - -<p>Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:</p> - -<pre class="brush: js">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);</pre> - -<h3 id="HTML">HTML</h3> - -<p>L'HTML è abbastanza semplice per il nostro esempio.</p> - -<pre class="brush: html"><div class="box"> - <div><strong>Log:</strong></div> - <div class="log"></div> -</div></pre> - -<p>Il {{HTMLElement("div")}} con la classe <code>"box"</code> è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <code><div></code> la cui classe è <code>"log"</code> è il contenitore per il testo del log stesso.</p> - -<h3 id="CSS">CSS</h3> - -<p>I seguenti stili CSS del nostro contenuto di esempio.</p> - -<pre class="brush: css">.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; -}</pre> - -<h3 id="Risultato">Risultato</h3> - -<p>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.</p> - -<p>{{EmbedLiveSample("Esempio", 640, 350)}}</p> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>Definizione iniziale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.innerHTML")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{domxref("Node.textContent")}} e {{domxref("Node.innerText")}}</li> - <li>{{domxref("Element.insertAdjacentHTML()")}}</li> - <li>Parsificare HTML in un albero del DOM: {{domxref("DOMParser")}}</li> - <li>Serializzare di XML o HTML in un albero del DOM: {{domxref("XMLSerializer")}}</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo <strong><code>insertAdjacentHTML()</code></strong> 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")}}.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> - -<h3 id="Parametri">Parametri</h3> - -<dl> - <dt><code>position</code></dt> - <dd>Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad <code>element</code>; deve essere una delle seguenti stringhe: - <ul> - <li><code style="color: red;">'beforebegin'</code>: Davanti ad <code>element</code> stesso.</li> - <li><code style="color: green;">'afterbegin'</code>: Appena dentro <code>element</code>, prima del suo primo figlio.</li> - <li><code style="color: blue;">'beforeend'</code>: Appena dentro <code>element</code>, prima del suo ultimo figlio.</li> - <li><code style="color: magenta;">'afterend'</code>: Dopo ad <code>element</code> stesso.</li> - </ul> - </dd> - <dt><code>text</code></dt> - <dd>La stringa da analizzare come HTML o XML e inserita nell'albero.</dd> -</dl> - -<h3 id="Visualizzazione_dei_nomi_delle_posizioni">Visualizzazione dei nomi delle posizioni</h3> - -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> - <!-- <strong><code style="color: green;">afterbegin</code></strong> --> - foo - <!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> - -<div class="note"><strong>Note: </strong> Le posizioni <code>beforebegin</code> e <code>afterend</code> funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.</div> - -<h2 id="Esempio">Esempio</h2> - -<pre class="brush: js">// <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></pre> - -<h2 id="Note">Note</h2> - -<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3> - -<p>Quando si inserisce HTML in una pagina utilizzando <code>insertAdjacentHTML()</code>, fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.</p> - -<p>Non è consigliabile utilizzare <code>insertAdjacentHTML()</code> 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.</p> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> - <td>{{ Spec2('DOM Parsing') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("Element.insertAdjacentText()")}}</li> - <li>{{domxref("XMLSerializer")}}: Costruire una rappresentazione DOM del testo XML</li> - <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> di Henri Sivonen, incluso benchmark che mostra che insertAdjacentHTML può essere molto più veloce in alcuni casi.</span></li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p><code>namespaceURI</code> restituisce lo spazio dei nomi XML del documento corrente.</p> - -<h3 id="Sintassi" name="Sintassi">Sintassi</h3> - -<pre class="eval"><i>NSURI</i> = document.namespaceURI -</pre> - -<h3 id="Parametri" name="Parametri">Parametri</h3> - -<ul> - <li><code>NSURI</code> è una stringa contenente lo spazio dei nomi.</li> -</ul> - -<h3 id="Note" name="Note">Note</h3> - -<p>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.</p> - -<h3 id="Specifiche" name="Specifiche">Specifiche</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: namespaceURI</a></p> - -<p>{{ languages( { "fr": "fr/DOM/document.namespaceURI", "pl": "pl/DOM/document.namespaceURI" } ) }}</p> 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 ---- -<p>{{ ApiRef() }}</p> -<h3 id="Sommario" name="Sommario">Sommario</h3> -<p>Restituisce il namespace del nodo, oppure <code>null</code> se il nodo non ha alcun prefisso.</p> -<h3 id="Sintassi" name="Sintassi">Sintassi</h3> -<pre class="eval"><i>stringa</i> = element.prefix -element.prefix =<i>stringa</i> -</pre> -<h3 id="Esempi" name="Esempi">Esempi</h3> -<p>Il seguente esempio produce il messaggio "x".</p> -<pre class="eval"><x:div onclick="alert(this.prefix)"/> -</pre> -<h3 id="Note" name="Note">Note</h3> -<p>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.</p> -<h3 id="Specifiche" name="Specifiche">Specifiche</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (introdotto in DOM2).</p> -<p>{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}</p> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo <code><strong>querySelector()</strong></code> dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><var>var element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} <code>baseElement</code> contro; questa deve essere una sintassi CSS valida o si verificherà un <code>SyntaxError</code>. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.</dd> -</dl> - -<h3 id="Valore_di_ritorno">Valore di ritorno</h3> - -<p>Il primo elemento discendente di <code>baseElement</code> che corrisponde al gruppo specificato di <code>selectors</code>. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso <code>baseElement</code> e i suoi discendenti; in altre parole, <code>selectors</code> viene prima applicato all'intero documento, non a <code>baseElement</code>, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di <code>baseElement</code>. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo <code>querySelector()</code>.</p> - -<p>Se non vengono trovate corrispondenze, il valore restituito è <code>null</code>.</p> - -<h3 id="Eccezioni">Eccezioni</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>I <code>selectors</code> specificati non sono validi.</dd> -</dl> - -<h2 id="Esempi">Esempi</h2> - -<p>Consideriamo alcuni esempi.</p> - -<h3 id="Trova_un_elemento_specifico_con_valori_specifici_di_un_attributo">Trova un elemento specifico con valori specifici di un attributo</h3> - -<p>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:</p> - -<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); -</pre> - -<h3 id="L'intera_gerarchia_conta">L'intera gerarchia conta</h3> - -<p>Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i <code>selectors</code>, in modo che i livelli al di fuori di <code>baseElement</code> specificato siano ancora considerati quando si localizzano le corrispondenze.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: 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></pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var baseElement = document.querySelector("p"); -document.getElementById("output").innerHTML = - (baseElement.querySelector("div span").innerHTML);</pre> - -<h4 id="Risultato">Risultato</h4> - -<p>Il risultato è simile a questo:</p> - -<p>{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}</p> - -<p>Nota come il selettore <code>"div span"</code> corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il<br> - i nodi figli di <code>baseElement</code> non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).</p> - -<h3 id="More_examples">More examples</h3> - -<p>Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i <code>selectors</code>.</p> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> - <td>{{Spec2('Selectors API Level 2')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.querySelector")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> - <li><a href="https://developer.mozilla.org/it/docs/Web/CSS/Attribute_selectors">Selettori di attributi</a> nella guida sul CSS</li> - <li><a href="https://developer.mozilla.org/it/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Selettori di attributi</a> nell'Area di apprendimento MDN</li> - <li>{{domxref("Element.querySelectorAll()")}}</li> - <li>{{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets per querySelector</a></li> - <li>Other methods that take selectors: {{domxref("element.closest()")}} and {{domxref("element.matches()")}}.</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo {{domxref("Element")}} <code><strong>querySelectorAll()</strong></code> 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.</p> - -<div class="note"> -<p><strong>Note:</strong> This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.</p> -</div> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> - -<h3 id="Parametri">Parametri</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> valido; se non lo è, viene generata un'eccezione <code>SyntaxError</code>. Vedi <a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a> per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> 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.</p> -</div> - -<h3 id="Valore_di_ritorno">Valore di ritorno</h3> - -<p>Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.</p> - -<div class="note"> -<p><strong>Note:</strong> Se i <code>selectors</code> specificati includono un <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, l'elenco restituito è sempre vuoto.</p> -</div> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>La sintassi della stringa <code>selectors</code> specificata non è valida.</dd> -</dl> - -<h2 id="Esempi">Esempi</h2> - -<h3 id="Ottenere_un_elenco_di_risultati">Ottenere un elenco di risultati</h3> - -<p>Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento <code>"myBox"</code>:</p> - -<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre> - -<p>Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di <code>"myBox"</code> con la classe "<code>note</code>" o "<code>alert</code>":</p> - -<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert"); -</pre> - -<p>Qui, otteniamo un elenco degli elementi <code><p></code> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe <code>"highlighted"</code> e che si trovano all'interno di un contenitore il cui ID è <code>"test"</code>.</p> - -<pre class="brush: js">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p");</pre> - -<p>Questo esempio usa un <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato <code>"data-src"</code>:</p> - -<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> - -<p>Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è <code>"userlist"</code> che hanno un attributo <code>"data-active"</code> il cui valore è <code>"1"</code>:</p> - -<pre class="brush: js">var container = document.querySelector("#userlist"); -var matches = container.querySelectorAll("li[data-active='1']");</pre> - -<h3 id="Accedere_ai_risultati">Accedere ai risultati</h3> - -<p>Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà <code>length</code> è 0), non è stata trovata alcuna corrispondenza.</p> - -<p>Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:</p> - -<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); - -highlightedItems.forEach(function(userItem) { - deleteUser(userItem); -});</pre> - -<div class="note"> -<p><strong>Note: </strong>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 <code>Array.from(nodeList)</code>.</p> -</div> - -<h2 id="Note_dell'utente">Note dell'utente</h2> - -<p><code>querySelectorAll()</code> si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.</p> - -<h3 id="HTML">HTML</h3> - -<p>Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.</p> - -<pre class="brush: html"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0! -</pre> - -<p>In questo esempio, quando si seleziona <code>".outer .inner"</code> nel contesto il <code><div></code> con la classe <code>"select"</code>, tsi trova ancora l'elemento con la classe <code>".inner"</code>, anche se <code>.outer</code> non è un discendente dell'elemento base su cui viene eseguita la ricerca (<code>".select"</code>). Per impostazione predefinita, <code>querySelectorAll()</code> verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.</p> - -<p>La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:</p> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0 -</pre> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Standard di vita</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>Nessun cambiamento</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Definizione iniziale</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Definizione originale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<div> - - -<p>{{Compat("api.Element.querySelectorAll")}}</p> -</div> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">Individuazione degli elementi DOM mediante selettori</a></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> nella guida sul CSS</li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> nell'area di apprendimento MDN</li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} e {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} e {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Snippets per <code>querySelector()</code></a></li> -</ul> 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 ---- -<div>{{ APIRef("DOM") }}</div> - -<p><span class="seoSummary">Il metodo {{domxref("Element")}} <strong><code>removeAttribute()</code></strong> rimuove l'attributo con il nome specificato dall'elemento.</span></p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><em>element</em>.removeAttribute(<em>attrName</em>); -</pre> - -<h3 id="Parametri">Parametri</h3> - -<dl> - <dt><code>attrName</code></dt> - <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, <code>removeAttribute()</code> restituisce senza generare un errore.</dd> -</dl> - -<h3 id="Valore_di_ritorno">Valore di ritorno</h3> - -<p><code>undefined</code>.</p> - -<div class="note"> -<p><strong>Note:</strong> Poiché <code>removeAttribute()</code> non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.</p> -</div> - -<h2 id="Note_di_utilizzo">Note di utilizzo</h2> - -<p>Dovresti usare <code>removeAttribute()</code> <font><font>invece di impostare il valore dell'attributo </font></font><code>null</code> <font><font>direttamente o usando</font></font> {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a <code>null</code>.</p> - -<p>{{ DOMAttributeMethods() }}</p> - -<h2 id="Esempio">Esempio</h2> - -<pre class="brush: js">// Prima: <div id="div1" align="left" width="200px"> -document.getElementById("div1").removeAttribute("align"); -// Dopo: <div id="div1" width="200px"> -</pre> - -<h2 id="Specifica">Specifica</h2> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introdotta nel <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.removeAttribute")}}</p> 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 ---- -<div>{{APIRef("Fullscreen API")}}</div> - -<p>Il metodo <code><strong>Element.requestFullscreen()</strong></code> invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).</p> - -<p>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')}}.</p> - -<div class="note"> -<p>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.</p> -</div> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><em>elt</em>.requestFullscreen(); -</pre> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Stato</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td> - <td>{{Spec2("Fullscreen")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_browser">Compatibilità browser</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox</th> - <th>Internet Explorer</th> - <th>Edge</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> - {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td> - <td>11{{property_prefix("ms")}}<sup>[3]</sup></td> - <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> - {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] implementato anche come <code>webkitRequestFullScreen</code>.</p> - -<p>[2] Implementato come <code>mozRequestFullScreen</code> (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.</p> - -<p>[3] Vedi <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentazione su MSDN</a>.</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>Using full-screen mode</li> - <li>{{ domxref("Element.requestFullscreen()") }}</li> - <li>{{ domxref("Document.exitFullscreen()") }}</li> - <li>{{ domxref("Document.fullscreen") }}</li> - <li>{{ domxref("Document.fullscreenElement") }}</li> - <li>{{ cssxref(":fullscreen") }}</li> - <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> -</ul> 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 ---- -<p>{{ APIRef("DOM") }}</p> - -<p>L' <strong><code>Element.scrollHeight</code></strong> è 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 <code>scrollHeight</code> è 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.</p> - -<div class="note"> -<p>Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.</p> -</div> - -<h2 id="Syntax_and_values" name="Syntax_and_values">Sintassi</h2> - -<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>"nome dell'id"</em>).scrollHeight; -</pre> - -<p>La variabile <em>intElemScrollHeight</em> è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.</p> - -<h2 id="Example" name="Example">Esempio</h2> - -<div id="offsetContainer" style="margin: 26px 0px; border: 4px dashed black; left: 260px; color: black; position: absolute; background-color: rgb(255, 255, 204);"> -<div id="idDiv" style="margin: 24px 29px; padding: 0px 28px; border: 24px solid black; width: 199px; height: 102px; overflow: auto; font-family: Arial, sans-serif; font-size: 13px !important; background-color: white;"> -<p id="PaddingTopLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-top</p> - -<p>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.</p> - -<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/44/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> - -<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> - -<p id="PaddingBottomLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-bottom</p> -</div> -<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ 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') }}</span></div> - -<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p> - -<h2 id="Problemi_e_soluzioni">Problemi e soluzioni</h2> - -<h3 id="Determinare_se_un_elemento_è_arrivato_in_fondo_con_lo_scroll.">Determinare se un elemento è arrivato in fondo con lo scroll.</h3> - -<p>La seguente funzione ritorna <code>true</code> se l'elemento è in fondo al suo scorrimento, <code>false</code> altrimenti.</p> - -<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight</pre> - -<p> </p> - -<p>Associato all'evento <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> e <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Per esempio:</p> - -<div style="height: 500px; overflow: auto; margin-bottom: 12px;"> -<pre class="brush: html"><!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></pre> -</div> - -<p><a href="https://developer.mozilla.org/files/4589/readme-example.html" title="readme-example.html">Guarda l'esempio qui sopra</a></p> - -<h2 id="Specification" name="Specification">Specificazioni</h2> - -<p><code>scrollHeight</code> è parte del modello dell'oggetto MSIE's <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> . s<code>crollHeight</code> funziona su questi browser: {{SpecName("CSSOM View")}}.</p> - -<h2 id="Supported" name="Supported">Compatibilità dei Browser</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Browser</th> - <th>Versioni</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td><strong>8.0</strong></td> - </tr> - <tr> - <td>Firefox (Gecko)</td> - <td><strong>3.0</strong> (1.9)</td> - </tr> - <tr> - <td>Opera</td> - <td>?</td> - </tr> - <tr> - <td>Safari | Chrome | WebKit</td> - <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td> - </tr> - </tbody> -</table> - -<p><strong>Nelle versioni più vecchie di FireFox:</strong> <span style="line-height: 1.5;">Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo </span><code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> sarebbe uguale al suo </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;"> . 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).</span></p> - -<h2 id="See_Also" name="See_Also">Guarda anche</h2> - -<ul> - <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li> - <li>{{domxref("Element.clientHeight")}}</li> - <li>{{domxref("Element.offsetHeight")}}</li> - <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> -</ul> 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 ---- -<div>{{ APIRef("DOM") }}</div> - -<p><span class="seoSummary">La proprietà <code><strong>Element.scrollTop</strong></code> ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.</span></p> - -<p>Il valore <code>scrollTop</code> di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto <em>visibile</em> più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore <code>scrollTop</code> è <code>0</code>.</p> - -<div class="warning"> -<p>Sui sistemi che usano il ridimensionamento del display, <code>scrollTop</code> può darti un valore decimale.</p> -</div> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="brush: js">// Get the number of pixels scrolled. -var <var>intElemScrollTop</var> = someElement.scrollTop; -</pre> - -<p><var>Dopo aver eseguito questo codice, </var><code><var>intElemScrollTop</var></code> è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.</p> - -<pre class="brush: js">// Set the number of pixels scrolled. -<var>element</var>.scrollTop = <var>intValue</var>; -</pre> - -<p><code>scrollTop</code> può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:</p> - -<ul> - <li>Se l'elemento non può essere scrollato (ad es. Non ha overflow o se l'elemento ha una proprietà di "<strong>non-scrollable"</strong>), <code>scrollTop</code> è <code>0</code>.</li> - <li><code>scrollTop</code> non risponde ai valori negativi; invece, si riporta su <code>0</code>.</li> - <li>Se impostato su un valore superiore al massimo disponibile per l'elemento, scrollTop si assesterà sul valore massimo.</li> -</ul> - -<h2 id="Esempio">Esempio</h2> - -<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> -<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> -<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> -<em><strong>If you can see this, scrollTop = 0</strong></em> - -<p>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.</p> -<strong><em>If you can see this, scrollTop is > 0</em></strong> - -<p>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.</p> -<strong><em>If you can see this, scrollTop is maxed-out</em></strong> - -<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> -</div> -<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> - <td>{{Spec2("CSSOM View")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.scrollTop")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> -</ul> 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 ---- -<p>{{APIRef("DOM")}}</p> - -<p><span class="seoSummary">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.</span></p> - -<p>Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p> - -<h2 id="Syntax" name="Syntax">Sintassi</h2> - -<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>nome</em>, <em>valore</em>); -</pre> - -<h3 id="Parametri">Parametri</h3> - -<dl> - <dt><code>nome</code></dt> - <dd>Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>setAttribute()</code> viene chiamato su un elemento in un documento HTML.</dd> - <dt><code>valore</code></dt> - <dd>Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.</dd> -</dl> - -<p>Gli attributi booleani sono considerati <code>true</code> se sono presenti sull'elemento, indipendentemente dal loro <code>valore</code> effettivo; di norma, è necessario specificare la stringa vuota (<code>""</code>) in <code>valore</code> (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.</p> - -<p>Poiché il <code>valore</code> specificato viene convertito in una stringa, specificare <code>null</code> 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 <code>null</code>. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p> - -<h3 id="Valore_di_ritorno">Valore di ritorno</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h3 id="Eccezioni">Eccezioni</h3> - -<dl> - <dt><code>InvalidCharacterError</code></dt> - <dd>L'attributo specificato <code>nome</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd> -</dl> - -<h2 id="Example" name="Example">Esempio</h2> - -<p>Nell'esempio seguente, <code>setAttribute()</code> viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><button>Hello World</button></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush:js">var b = document.querySelector("button"); - -b.setAttribute("name", "helloButton"); -b.setAttribute("disabled", ""); -</pre> - -<p>Questo dimostra due cose:</p> - -<ul> - <li>La prima chiamata a <code>setAttribute()</code> mostra la modifica del valore dell'attributo <code>name</code> su "helloButton". Puoi vederlo usando l'ispettore di pagina del tuo browser (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li> - <li>Per impostare il valore di un attributo booleano, come <code>disabled</code>, puoi specificare qualsiasi valore. Una stringa vuota o il nome dell'attributo sono valori consigliati. Tutto ciò che conta è che se l'attributo è presente a tutti, <em>indipendentemente dal suo valore reale</em>, il suo valore è considerato <code>true</code>. L'assenza dell'attributo significa che il suo valore è <code>false</code>. Impostando il valore dell'attributo <code>disabled</code> sulla stringa vuota (<code>""</code>), stiamo impostando <code>disabled</code> su <code>true</code>, il risultato è che il pulsante è disabilitato.</li> -</ul> - -<p>{{ EmbedLiveSample('Example', '300', '50') }}</p> - -<p>{{DOMAttributeMethods}}</p> - -<h2 id="Specification" name="Specification">Specifiche</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> -</ul> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.setAttribute")}}</p> - -<h3 id="Notes" name="Notes">Gecko notes</h3> - -<p>L'utilizzo di <code>setAttribute()</code> per modificare determinati attributi, in particolare <code>value</code> 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 <code>Element.value</code> anziché <code>Element.setAttribute()</code>.</p> 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 ---- -<div>{{ApiRef("DOM")}}</div> - -<p><span class="seoSummary">La proprietà <strong><code>tagName</code> </strong>di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato.</span> Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà <code>tagName</code> è <code>"IMG"</code> (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><em>elementName</em> = <em>Element</em>.tagName; -</pre> - -<h3 id="Valore">Valore</h3> - -<p>Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:</p> - -<ul> - <li>Per gli alberi del DOM che rappresentano documenti HTML, il nome del tag restituito è sempre nel formato maiuscolo canonico. Ad esempio, <code>tagName</code> chiamato su un elemento {{HTMLElement("div")}} ritorna <code>"DIV"</code>.</li> - <li>I nomi dei tag degli elementi in un albero del DOM di XML vengono restituiti nello stesso caso in cui sono scritti nel file XML originale. Se un documento XML include un tag <code>"<SomeTag>"</code>, il valore della proprietà <code>tagName</code> è <code>"SomeTag"</code>.</li> -</ul> - -<p>Per gli oggetti {{domxref("Element")}}, il valore di <code>tagName</code> è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.</p> - -<h2 id="Esempio">Esempio</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><span id="born">Quando sono nato...</span> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var span = document.getElementById("born"); -console.log(span.tagName); -</pre> - -<p>In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi <code>"span"</code> verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, <code>"SPAN"</code> verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.</p> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specifica</th> - <th>Stato</th> - <th>Commento</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.tagName")}}</p> 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 ---- -<div>{{APIRef("DOM")}}</div> - -<p>Il metodo <code><strong>toggleAttribute()</strong></code> dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox"><em>Element</em>.toggleAttribute(<em>name</em> [, <em>force</em>]); -</pre> - -<h3 id="Parametri">Parametri</h3> - -<dl> - <dt><code>name</code></dt> - <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>toggleAttribute()</code> viene chiamato su un elemento HTML in un documento HTML.</dd> - <dt><code>force</code> {{optional_inline}}</dt> - <dd>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.</dd> -</dl> - -<h3 id="Valore_di_ritorno">Valore di ritorno</h3> - -<p><code>true</code> se l'attributo <strong><code>name</code></strong> è eventualmente presente, in caso contrario <code>false</code>.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>InvalidCharacterError</code></dt> - <dd>L'attributo specificato <code>name</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd> -</dl> - -<h2 id="Esempio">Esempio</h2> - -<p>Nell'esempio seguente, <code>toggleAttribute()</code> viene utilizzato per commutare l'attributo <code>readonly</code> di un {{HTMLElement("input")}}.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input value="text"> -<button>toggleAttribute("readonly")</button></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush:js">var button = document.querySelector("button"); -var input = document.querySelector("input"); - -button.addEventListener("click", function(){ - input.toggleAttribute("readonly"); -}); -</pre> - -<h3 id="Risultato">Risultato</h3> - -<p>{{ EmbedLiveSample('Esempio', '300', '50') }}</p> - -<p>{{DOMAttributeMethods}}</p> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">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; - } - }; -} -</pre> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.toggleAttribute")}}</p> |