element

  • Revision slug: DOM/element
  • Revision title: element
  • Revision id: 197627
  • Created:
  • Creator: DaViD83
  • Is current revision? No
  • Comment

Revision Content

{{template.DomRef()}}

Introduzione

In questa reference, per elementi si intendono quegli oggetti del DOM che implementano sia l'interfaccia Node che l'interfaccia Element. Node è l'oggetto di base presente nel DOM, e può rappresentare un commento, uno spazio o un ritorno a capo fra la fine di un tag e l'inizio di un altro, un'istruzione di processamento(in XML), un testo all'interno di un paragrafo, eccetera. Anche i tag HTML sono nodi(come i tag XML), con tutte le proprietà e i metodi dei nodi, ma in aggiunta hanno altre proprietà e altri metodi, descritti dall'interfaccia Element. Alcuni elementi HTML a loro volta implementano anche altre interfacce più specializzate per il loro compito; ad esempio l'elemento form possiede l'interfaccia HTMLFormElement. Questo capitolo fornisce una veloce reference per i metodi, le proprietà e gli eventi disponibili per la maggior parte degli elementi HTML e XML nel DOM di Gecko.

Varie specifiche W3C interessano gli elementi DOM:

Proprietà

attributes
Restituisce una collezione degli attributi dell'elemento.
childNodes
Restituisce un array dei nodi figli dell'elemento.
className
Prende/setta la classe dell'elemento.
clientHeight
L'altezza interna di un elemento.
clientLeft
La larghezza del bordo sinistro di un elemento in pixel. Not currently supported.
clientTop
La larghezza del bordo superiore di un elemento in pixel. Not currently supported.
clientWidth
La larghezza interna di un elemento.
dir
Prende/setta la direzionalità di un elmento.
firstChild
Restituisce il primo figlio diretto del nodo.
id
Prende/setta l'id dell'elemento.
innerHTML
Prende/setta il markup e il contenuto dell'elemento.
lang
Specifica il linguaggio dei valori degli attributi e del contenuto testuale di un elemento.
lastChild
Restituisce l'ultimo figlio del nodo in questione.
length
Restituisce il numero di elementi contenuti nell'elemento in questione(nodi figli).
localName
Restituisce la parte locale del nome di questo nodo.
namespaceURI
L'URI dello spazio dei nomi per questo nodo, oppure null se non è specificato.
nextSibling
Restituisce il nodo fratello successivo a quello dato.
nodeName
Restituisce il nome del nodo.
nodeType
Restituisce il tipo del nodo.
nodeValue
Restituisce il valore del nodo.
offsetHeight
Restituisce l'altezza di un elemento, relativa al layout.
offsetLeft
Prende il numero di pixel(distanza orizzontale) di un elemento dal suo bordo sinistro fino al bordo sinistro del suo nodo offsetParent.
offsetParent
Restituisce un riferimento all'oggetto nel quale l'elemento corrente è riportato(i.e., l'elemento parente).
offsetTop
Prende il numero di pixel(distanza verticale) di un elemento dal suo bordo superiore fino al bordo superiore del suo nodo offsetParent.
offsetWidth
Restituisce la larghezza di un elemento relative al layout.
ownerDocument
Restituisce il documento nel quale il nodo compare.
parentNode
Restituisce il nodo parente del nodo considerato.
prefix
Restituisce il prefisso dello spazio dei nomi del nodo corrente, o null se non è specificato.
previousSibling
Restituisce il nodo fratello precedente a quello dato.
scrollHeight
Restituisce l'altezza dello scroll view di un elemento.
scrollLeft
Legge/setta il numero di pixel con il quale il contenuto di un elemento viene scrollato a sinistra.
scrollTop
Legge/setta la distanza fra il bordo superiore di un elemento e la porzione superiore del suo contenuto attualmente visibile.
scrollWidth
Restituisce la larghezza dello scroll view di un elemento.
style
Restituisce un oggetto che rappresenta le dichiarazioni nell'attributo style dell'elemento.
tabIndex
Legge/setta la posizione dell'elemento nell'ordine di pressione del tasto tab.
tagName
Restituisce il nome del tag dell'elemento dato.
textContent
Legge/setta il contenuto testuale di un elemento, inclusi i suoi discendenti.

Metodi

addEventListener
Allows the registration of event listeners on the event target.
appendChild
Inserts the specified node into the list of nodes on the current document.
blur
Removes keyboard focus from the current element.
click
Simulates a click on the current element.
cloneNode
Restituisce a duplicate of the current node.
dispatchEvent
Allows the dispatch of events into the implementation's event model.
focus
Sets focus on the current element.
getAttribute
Restituisce the value of the named attribute on the current node.
getAttributeNS
Restituisce the value of the attribute with the given name and namespace.
getAttributeNode
Restituisce the attribute of the element as a separate node.
getAttributeNodeNS
A namespace-aware version of getAttributeNode
getElementsByTagName
Restituisce the elements of a particular tag name that are descendants of the current element.
hasAttribute
Restituisce a boolean value indicating whether the element has the specified attribute or not.
hasAttributeNS
Restituisce a boolean value indicating whether the element has an attribute with the specified name and namespace.
hasAttributes
Restituisce a boolean value indicating whether the element has any attributes.
hasChildNodes
Restituisce boolean value indicating whether the current element has children or not.
insertBefore
Inserts a node before the current element in the DOM.
item
Retrieves a node from the tree by index.
normalize
Puts the node and all of its subtree into a "normalized" form (see below).
removeAttribute
Removes an attribute from the element.
removeAttributeNS
Removes the attribute with specified name and namespace from the element.
removeAttributeNode
Removes the specified attribute from the element.
removeChild
Removes a child node from the current element.
removeEventListener
Removes an event listener from the element.
replaceChild
Replaces one child node on the current element with another.
scrollIntoView
Scrolls the page until the element gets into the view.
setAttribute
Adds a new attribute or changes the value of an existing attribute on the current element.
setAttributeNS
Adds a new attribute or changes the value of an attribute with the given namespace and name.
setAttributeNode
Adds a new attribute node to the current element.
setAttributeNodeNS
Adds a new attribute node with the specified namespace and name.
supports
Tests if this DOM implementation supports a particular feature.

Gestori di evento

These are properties that correspond to the HTML 'on' event attributes.

Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the EventListener interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:

<div onclick="foo();">click me!</div>

If element is a reference to this div, the value of element.onclick is effectively:

function onclick(event) {
   foo();
}

Note how the event object is passed as parameter event to this wrapper function.

onblur
Restituisce the event handling code for the blur event.
onclick
Restituisce the event handling code for the click event.
ondblclick
Restituisce the event handling code for the dblclick event.
onfocus
Restituisce the event handling code for the focus event.
onkeydown
Restituisce the event handling code for the keydown event.
onkeypress
Restituisce the event handling code for the keypress event.
onkeyup
Restituisce the event handling code for the keyup event.
onmousedown
Restituisce the event handling code for the mousedown event.
onmousemove
Restituisce the event handling code for the mousemove event.
onmouseout
Restituisce the event handling code for the mouseout event.
onmouseover
Restituisce the event handling code for the mouseover event.
onmouseup
Restituisce the event handling code for the mouseup event.
onresize
Restituisce the event handling code for the resize event.

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Introduzione"> Introduzione </h3>
<p>In questa reference, per elementi si intendono quegli oggetti del DOM che implementano sia l'<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247">interfaccia Node</a> che l'<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614">interfaccia Element</a>. Node è l'oggetto di base presente nel DOM, e può rappresentare un commento, uno spazio o un ritorno a capo fra la fine di un tag e l'inizio di un altro, un'istruzione di processamento(in XML), un testo all'interno di un paragrafo, eccetera. Anche i tag HTML sono nodi(come i tag XML), con tutte le proprietà e i metodi dei nodi, ma in aggiunta hanno altre proprietà e altri metodi, descritti dall'interfaccia Element. Alcuni elementi HTML a loro volta implementano anche altre interfacce più specializzate per il loro compito; ad esempio l'elemento <a href="it/DOM/form">form</a> possiede l'<a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">interfaccia HTMLFormElement</a>.
Questo capitolo fornisce una veloce reference per i metodi, le proprietà e gli eventi disponibili per la maggior parte degli elementi HTML e XML nel DOM di Gecko.
</p><p>Varie specifiche W3C interessano gli elementi DOM:
</p>
<ul><li> <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Core Specification</a>—describes the core interfaces shared by most DOM objects in HTML and XML documents
</li><li> <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML Specification</a>—describes interfaces for objects in HTML and XHTML documents that build on the core specification
</li><li> <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events Specification</a>—describes events shared by most DOM objects, building on the DOM Core and <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/">Views</a> specifications
</li></ul>
<h3 name="Propriet.C3.A0"> Proprietà </h3>
<dl><dt> <a href="it/DOM/element.attributes">attributes</a>
</dt><dd> Restituisce una collezione degli attributi dell'elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.childNodes">childNodes</a>
</dt><dd> Restituisce un array dei nodi figli dell'elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.className">className</a>
</dt><dd> Prende/setta la classe dell'elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.clientHeight">clientHeight</a>
</dt><dd> L'altezza interna di un elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.clientLeft">clientLeft</a>
</dt><dd> La larghezza del bordo sinistro di un elemento in pixel. <i>Not currently supported.</i>
</dd></dl>
<dl><dt> <a href="it/DOM/element.clientTop">clientTop</a>
</dt><dd> La larghezza del bordo superiore di un elemento in pixel. <i>Not currently supported.</i>
</dd></dl>
<dl><dt> <a href="it/DOM/element.clientWidth">clientWidth</a>
</dt><dd> La larghezza interna di un elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.dir">dir</a>
</dt><dd> Prende/setta la direzionalità di un elmento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.firstChild">firstChild</a>
</dt><dd> Restituisce il primo figlio diretto del nodo.
</dd></dl>
<dl><dt> <a href="it/DOM/element.id">id</a>
</dt><dd> Prende/setta l'id dell'elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.innerHTML">innerHTML</a>
</dt><dd> Prende/setta il markup e il contenuto dell'elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.lang">lang</a>
</dt><dd> Specifica il linguaggio dei valori degli attributi e del contenuto testuale di un elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.lastChild">lastChild</a>
</dt><dd> Restituisce l'ultimo figlio del nodo in questione.
</dd></dl>
<dl><dt> <a href="it/DOM/element.length">length</a>
</dt><dd> Restituisce il numero di elementi contenuti nell'elemento in questione(nodi figli).
</dd></dl>
<dl><dt> <a href="it/DOM/element.localName">localName</a>
</dt><dd> Restituisce la parte locale del nome di questo nodo.
</dd></dl>
<dl><dt> <a href="it/DOM/element.namespaceURI">namespaceURI</a>
</dt><dd> L'URI dello spazio dei nomi per questo nodo, oppure <code>null</code> se non è specificato.
</dd></dl>
<dl><dt> <a href="it/DOM/element.nextSibling">nextSibling</a>
</dt><dd> Restituisce il nodo fratello successivo a quello dato.
</dd></dl>
<dl><dt> <a href="it/DOM/element.nodeName">nodeName</a>
</dt><dd> Restituisce il nome del nodo.
</dd></dl>
<dl><dt> <a href="it/DOM/element.nodeType">nodeType</a>
</dt><dd> Restituisce il tipo del nodo.
</dd></dl>
<dl><dt> <a href="it/DOM/element.nodeValue">nodeValue</a>
</dt><dd> Restituisce il valore del nodo.
</dd></dl>
<dl><dt> <a href="it/DOM/element.offsetHeight">offsetHeight</a>
</dt><dd> Restituisce l'altezza di un elemento, relativa al layout.
</dd></dl>
<dl><dt> <a href="it/DOM/element.offsetLeft">offsetLeft</a>
</dt><dd> Prende il numero di pixel(distanza orizzontale) di un elemento dal suo bordo sinistro fino al bordo sinistro del suo nodo <code>offsetParent</code>.
</dd></dl>
<dl><dt> <a href="it/DOM/element.offsetParent">offsetParent</a>
</dt><dd> Restituisce un riferimento all'oggetto nel quale l'elemento corrente è riportato(i.e., l'elemento parente).
</dd></dl>
<dl><dt> <a href="it/DOM/element.offsetTop">offsetTop</a>
</dt><dd> Prende il numero di pixel(distanza verticale) di un elemento dal suo bordo superiore fino al bordo superiore del suo nodo <code>offsetParent</code>.
</dd></dl>
<dl><dt> <a href="it/DOM/element.offsetWidth">offsetWidth</a>
</dt><dd> Restituisce la larghezza di un elemento relative al layout.
</dd></dl>
<dl><dt> <a href="it/DOM/element.ownerDocument">ownerDocument</a>
</dt><dd> Restituisce il documento nel quale il nodo compare.
</dd></dl>
<dl><dt> <a href="it/DOM/element.parentNode">parentNode</a>
</dt><dd> Restituisce il nodo parente del nodo considerato.
</dd></dl>
<dl><dt> <a href="it/DOM/element.prefix">prefix</a>
</dt><dd> Restituisce il prefisso dello spazio dei nomi del nodo corrente, o <code>null</code> se non è specificato.
</dd></dl>
<dl><dt> <a href="it/DOM/element.previousSibling">previousSibling</a>
</dt><dd> Restituisce il nodo fratello precedente a quello dato.
</dd></dl>
<dl><dt> <a href="it/DOM/element.scrollHeight">scrollHeight</a>
</dt><dd> Restituisce l'altezza dello scroll view di un elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.scrollLeft">scrollLeft</a>
</dt><dd> Legge/setta il numero di pixel con il quale il contenuto di un elemento viene scrollato a sinistra.
</dd></dl>
<dl><dt> <a href="it/DOM/element.scrollTop">scrollTop</a>
</dt><dd> Legge/setta la distanza fra il bordo superiore di un elemento e la porzione superiore del suo contenuto attualmente visibile.
</dd></dl>
<dl><dt> <a href="it/DOM/element.scrollWidth">scrollWidth</a>
</dt><dd> Restituisce la larghezza dello scroll view di un elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.style">style</a>
</dt><dd> Restituisce un oggetto che rappresenta le dichiarazioni nell'attributo style dell'elemento.
</dd></dl>
<dl><dt> <a href="it/DOM/element.tabIndex">tabIndex</a>
</dt><dd> Legge/setta la posizione dell'elemento nell'ordine di pressione del tasto tab.
</dd></dl>
<dl><dt> <a href="it/DOM/element.tagName">tagName</a>
</dt><dd> Restituisce il nome del tag dell'elemento dato.
</dd></dl>
<dl><dt> <a href="it/DOM/element.textContent">textContent</a>
</dt><dd> Legge/setta il contenuto testuale di un elemento, inclusi i suoi discendenti.
</dd></dl>
<h3 name="Metodi"> Metodi </h3>
<dl><dt> <a href="it/DOM/element.addEventListener">addEventListener</a>
</dt><dd> Allows the registration of event listeners on the event target.
</dd></dl>
<dl><dt> <a href="it/DOM/element.appendChild">appendChild</a>
</dt><dd> Inserts the specified node into the list of nodes on the current document.
</dd></dl>
<dl><dt> <a href="it/DOM/element.blur">blur</a>
</dt><dd> Removes keyboard focus from the current element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.click">click</a>
</dt><dd> Simulates a click on the current element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.cloneNode">cloneNode</a>
</dt><dd> Restituisce a duplicate of the current node.
</dd></dl>
<dl><dt> <a href="it/DOM/element.dispatchEvent">dispatchEvent</a>
</dt><dd> Allows the dispatch of events into the implementation's event model.
</dd></dl>
<dl><dt> <a href="it/DOM/element.focus">focus</a>
</dt><dd> Sets focus on the current element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.getAttribute">getAttribute</a>
</dt><dd> Restituisce the value of the named attribute on the current node.
</dd></dl>
<dl><dt> <a href="it/DOM/element.getAttributeNS">getAttributeNS</a>
</dt><dd> Restituisce the value of the attribute with the given name and namespace.
</dd></dl>
<dl><dt> <a href="it/DOM/element.getAttributeNode">getAttributeNode</a>
</dt><dd> Restituisce the attribute of the element as a separate node.
</dd></dl>
<dl><dt> <a href="it/DOM/element.getAttributeNodeNS">getAttributeNodeNS</a>
</dt><dd> A namespace-aware version of <code>getAttributeNode</code>
</dd></dl>
<dl><dt> <a href="it/DOM/element.getElementsByTagName">getElementsByTagName</a>
</dt><dd> Restituisce the elements of a particular tag name that are descendants of the current element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.hasAttribute">hasAttribute</a>
</dt><dd> Restituisce a boolean value indicating whether the element has the specified attribute or not.
</dd></dl>
<dl><dt> <a href="it/DOM/element.hasAttributeNS">hasAttributeNS</a>
</dt><dd> Restituisce a boolean value indicating whether the element has an attribute with the specified name and namespace.
</dd></dl>
<dl><dt> <a href="it/DOM/element.hasAttributes">hasAttributes</a>
</dt><dd> Restituisce a boolean value indicating whether the element has any attributes.
</dd></dl>
<dl><dt> <a href="it/DOM/element.hasChildNodes">hasChildNodes</a>
</dt><dd> Restituisce boolean value indicating whether the current element has children or not.
</dd></dl>
<dl><dt> <a href="it/DOM/element.insertBefore">insertBefore</a>
</dt><dd> Inserts a node before the current element in the DOM.
</dd></dl>
<dl><dt> <a href="it/DOM/element.item">item</a>
</dt><dd> Retrieves a node from the tree by index.
</dd></dl>
<dl><dt> <a href="it/DOM/element.normalize">normalize</a>
</dt><dd> Puts the node and all of its subtree into a "normalized" form (see below).
</dd></dl>
<dl><dt> <a href="it/DOM/element.removeAttribute">removeAttribute</a>
</dt><dd> Removes an attribute from the element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.removeAttributeNS">removeAttributeNS</a>
</dt><dd> Removes the attribute with specified name and namespace from the element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.removeAttributeNode">removeAttributeNode</a>
</dt><dd> Removes the specified attribute from the element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.removeChild">removeChild</a>
</dt><dd> Removes a child node from the current element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.removeEventListener">removeEventListener</a>
</dt><dd> Removes an event listener from the element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.replaceChild">replaceChild</a>
</dt><dd> Replaces one child node on the current element with another.
</dd></dl>
<dl><dt> <a href="it/DOM/element.scrollIntoView">scrollIntoView</a>
</dt><dd> Scrolls the page until the element gets into the view.
</dd></dl>
<dl><dt> <a href="it/DOM/element.setAttribute">setAttribute</a>
</dt><dd> Adds a new attribute or changes the value of an existing attribute on the current element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.setAttributeNS">setAttributeNS</a>
</dt><dd> Adds a new attribute or changes the value of an attribute with the given namespace and name.
</dd></dl>
<dl><dt> <a href="it/DOM/element.setAttributeNode">setAttributeNode</a>
</dt><dd> Adds a new attribute node to the current element.
</dd></dl>
<dl><dt> <a href="it/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>
</dt><dd> Adds a new attribute node with the specified namespace and name.
</dd></dl>
<dl><dt> <a href="it/DOM/element.supports">supports</a>
</dt><dd> Tests if this DOM implementation supports a particular feature.
</dd></dl>
<h3 name="Gestori_di_evento"> Gestori di evento </h3>
<p>These are properties that correspond to the HTML 'on' event attributes.
</p><p>Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a> interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:
</p>
<pre>&lt;div onclick="foo();"&gt;click me!&lt;/div&gt;
</pre>
<p>If <code>element</code> is a reference to this <code>div</code>, the value of <code>element.onclick</code> is effectively:
</p>
<pre>function onclick(event) {
   foo();
}
</pre>
<p>Note how the <a href="it/DOM/event">event</a> object is passed as parameter <code>event</code> to this wrapper function.
</p>
<dl><dt> <a href="it/DOM/element.onblur">onblur</a>
</dt><dd> Restituisce the event handling code for the blur event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onclick">onclick</a>
</dt><dd> Restituisce the event handling code for the click event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.ondblclick">ondblclick</a>
</dt><dd> Restituisce the event handling code for the dblclick event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onfocus">onfocus</a>
</dt><dd> Restituisce the event handling code for the focus event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onkeydown">onkeydown</a>
</dt><dd> Restituisce the event handling code for the keydown event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onkeypress">onkeypress</a>
</dt><dd> Restituisce the event handling code for the keypress event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onkeyup">onkeyup</a>
</dt><dd> Restituisce the event handling code for the keyup event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onmousedown">onmousedown</a>
</dt><dd> Restituisce the event handling code for the mousedown event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onmousemove">onmousemove</a>
</dt><dd> Restituisce the event handling code for the mousemove event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onmouseout">onmouseout</a>
</dt><dd> Restituisce the event handling code for the mouseout event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onmouseover">onmouseover</a>
</dt><dd> Restituisce the event handling code for the mouseover event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onmouseup">onmouseup</a>
</dt><dd> Restituisce the event handling code for the mouseup event.
</dd></dl>
<dl><dt> <a href="it/DOM/element.onresize">onresize</a>
</dt><dd> Restituisce the event handling code for the resize event.
</dd></dl>
Revert to this revision