Element est un objet qui sert à manipuler le contenu d’une page.
il y a plusieurs façons d’utiliser une méthode :
Element.methode(votreElement,arg..) votreElement(arg..)Bien sure la 2ème façon est plus sympa mais elle ne marche pas tous le temps. Elle ne marche pas sur MSIE et Opéra.
Manipuler les attributs : hasAttribute readAttribute writeAttribute
Element.readAttribute(elt,nomAttribut)->valeur
Element.writeAttribute(elt,nomAttribut,valeur)->elt
Element.writeAttribute(elt,{nomAttribut:val...})->elt
Element.hasAttribute(elt,nomAttribut)-> boolean
Element est-tu là ? hide show toggle visible
Element.hide(elt)->elt // display : none Element.show(elt)->elt // display : display Element.toggle(elt)->elt // inverse le diplay (anglais toggle = interupteur) Element.visible(elt)->boolean
$('elt1_4').show();
alert('Cliquer OK pour continuer.');
['elt1_1', 'elt1_3'].each(Element.hide);
alert('Cliquer OK pour continuer.');
['elt1_2', 'elt1_3'].each(Element.toggle);
alert($('elt1_2').visible());
elt1_1
elt1_2
elt1_3
Gestion du contenu : cleanWhiteSpace empty remove replace update insert wrap
Element.cleanWhiteSpace(elt)->elt // supprime les nœuds fils textuel "vide" Element.empty(elt)->boolean // vérifie que l’élément est vide Element.insert(elt,contenuUnique)->elt // vérifie que l’élément est vide Element.remove(elt)->elt // + simple que elt.parentNode.removeChild(elt) Element.replace(elt,content)->elt // Element.update(elt,content)->elt //
// Représentation HTML du conteneur d'éléments ci-dessous
alert('HTML depuis le DOM :\n' + $('elements2').innerHTML);
$('elements2').cleanWhitespace();
alert('HTML depuis le DOM :\n' + $('elements2').innerHTML);
alert('elt2_3 vide : ' + ($('elt2_3').empty() ? 'oui' : 'non'));
$('elt2_3').update('\n\t\t \n');
alert('elt2_3 vide : ' + ($('elt2_3').empty() ? 'oui' : 'non'));
try {
$('elt2_2').remove();
alert('Tiens ! Plus d\'élément 2...');
} catch (e) {
alert('Erreur : ' + e);
}
$('elt2_4').replace('<div class="element fourth" id="elt2_4">ELT2_4 !</div>');
elt2_1
elt2_2
elt2_3
elt2_4
classe : addClassName removeClassName toggleClassName
Element.addClassName(elt,className)->elt // ajoute une class CSS à l’élément Element.removeClassName(elt,className)->elt // enléve une class CSS à l’élément Element.toggleClassName(elt,className)->elt // enléve une class CSS à l’élément Element.hasClassName(elt,className)->boolean // retourne vrai si l’élement à la class CSS
Style : getStyle setStyle
Element.getStyle(elt,style)->valeur // retourne la valeur du style de l’élement Element.setStyle(elt,styleText)->elt // met le style à l’élement Element.setStyle(elt,prop1 : val1[,...])->elt // met les différents styles à l’élement
Opacity : getOpacity setOpacity
Element.setOpacity(elt,opacité)->elt // Element.getOpacity(elt,opacité)->elt //
position dans l’arbre : ancestors descendantOf descendants firstDescendant chidElements nextSiblings previousSiblings siblings
Element.ancestors(elt)->[elt..] // retourne tous les ancétres du père Element.descendantOf(elt,eltRef)->boolean // Element.descendants(elt)->[elt..] // Element.firstDescendant(elt)->elt // Element.childElements(elt)->[elt...] // Element.nextSibings(elt)->[elt...] // Element.previousSibings(elt)->[elt...] // Element.sibings(elt)->[elt...] // retourne tous les fréres de l’éléments anglais : Enfants de mêmes parents
<ul>
<li class="first"> 1er </li>
<li class="second"> 2ème </li>
<li id="selected1"> encours </li>
<li class="fourth"> 4ème </li>
</ul>
|
|
bouger dans l’arbre :adjacent down next previous select up
// l’argument expression est un électeur CSS unique (sans espaces) Element.adjacent(elt, expression)->[elt..] // Element.down(elt [, expression] [,index] )->elt // Element.up(elt [, expression] [,index] )->elt // Element.next(elt [, expression] [,index] )->elt // Element.previous(elt [, expression] [,index] )->elt // Element.select(elt , expression])->[elt..] //
<div id="sidebar">
<ul id="nav">
<li > 1er </li>
<li > 2ème </li>
<li id="selected"> selected </li>
<li > 4ème </li>
</ul>
</div>
|
|
Positionnement : absolutize clonePosition cumulativeOffset cumulativeScrollOffset getDimensions getHeight getOffsetParent getWidth makePositioned positionedOffset relativize undoPositioned viewportOffset
// dimention
Element.getDimention(elt)->{width : Number, heigth : Number} //
en pixel
Element.getWidth(elt)->Number // en pixel
Element.getHeight(elt)->Number // en pixel
Element.makePositioned(elt)->elt //
Element.undoPositioned(elt)->elt //
Element.cumulativeOffset(elt)->offset // position à l'intérieur du document
Element.cumulativeScrollOffset(elt)->offset //
Element.getOffsetParent(elt)->offset // retourne le conteneur de positionnement
Element.positionedOffset(elt)->offset // position à l'intérieur du conteneur de positionnement
Element.viewportOffset(elt)->offset // position à l'intérieur du viewport (zone de la fenêtre visible)
alert($('elt4_1').getHeight());
var dims = $('elt4_3').getDimensions();
alert(dims.width + ' × ' + dims.height);
with ($('elt4_2')) {
style.top = '-72px';
alert('Ça n\'a rien fait. Essayons en positionné...');
makePositioned();
style.top = '-72px';
alert('Oui, mais maintenant on n\'y voit plus rien. Annulons...');
undoPositioned();
}
elt4_1
elt4_2
elt4_3
elt4_4
RSS 2.0