Gran parte del lavoro svolto da jQuery avviene sul DOM (Document Object Model). Semplificando al massimo la sua definizione, il DOM è una rappresentazione ad albero di un documento strutturato (HTML, XHTML, XML, eccetera). Questo albero è rovesciato, ossia parte dalla radice e si sviluppa in rami e nodi. In questo articolo vedremo alcuni metodi e selettori di jQuery comparandoli con il loro equivalente nelle specifiche DOM.
ID e classi
| ID | Classi | |
|---|---|---|
| jQuery | $('#test') |
$('.test') |
| DOM | document.getElementById('test') |
document.getElementsByClassName('test') |
Il secondo metodo DOM non è implementato in tutte le versioni di Internet Explorer. Ecco una soluzione:
if(typeof document.getElementsByClassName !== 'function') {
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
}
Primo e ultimo elemento
| Primo elemento | Ultimo elemento | |
|---|---|---|
| jQuery | $('div:first') |
$('div:last') |
| DOM | element.firstChild |
element.lastChild |
Quando si usano le proprietà DOM firstChild e lastChild occorre sempre verificare che il nodo selezionato sia un elemento, ossia che la sua proprietà nodeType abbia valore 1:
var element = document.getElementById('test');
var first = null;
if(element.firstChild.nodeType == 1) {
first = element.firstChild;
}
Aggiungere e rimuovere classi CSS
| Aggiungere una classe CSS | Rimuovere una classe CSS | |
|---|---|---|
| jQuery | $(element).addClass('test') |
$(element).removeClass('test') |
| DOM | element.className |
element.className |
In teoria sarebbe solo necessario usare i metodi DOM setAttribute() e removeAttribute(), ma questi ultimi non sono ben supportati nelle versioni di Internet Explorer inferiori alla 8. Quindi:
function addClass(element, className) {
element = document.getElementById(element);
element.className += className;
}
function removeClass(element, className) {
element = document.getElementById(element);
var replaced = new RegExp("(^|\\s)" + className + "(\\s|$)");
var klass = element.className;
element.className = klass.replace(replaced, '');
}
Elemento precedente e successivo
| Elemento precedente | Elemento successivo | |
|---|---|---|
| jQuery | $(element).prev() |
$(element).next() |
| DOM | element.previousSibling |
element.nextSibling |
Quando un nodo non esiste nel DOM, il suo valore è null. Quindi per usare le proprietà previousSibling e nextSibling dobbiamo appunto eseguire questa verifica:
var element = document.getElementById('test');
var next = null;
if(element.nextSibling !== null) {
next = element.nextSibling;
}
Figli di un elemento
| Figli di un elemento | |
|---|---|
| jQuery | $(element).children() |
| DOM | element.childNodes |
La proprietà childNodes è una NodeList che contiene tutti i nodi figli di un elemento. Questo tipo di struttura DOM non è un array ma possiede una proprietà length e si può accedere ai suoi membri tramite la consueta notazione degli array:
function children(element) {
element = document.getElementById(element);
var elements = [],
nodes = element.childNodes,
len = nodes.length,
i;
for(i = 0; i < len; i += 1) {
var node = nodes[i];
if(node.nodeType == 1) {
elements.push(node);
}
}
return (elements.length > 0) ? elements : null;
}