Element

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..)

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());

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>');

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>

$('selected1').siblings() /* -> [1er, 2ème, 4ème] */ 
$('selected1').nextSiblings()/* -> [4ème] */
$('selected1').previousSiblings()/* -> [1er,2ème]*/

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>

$('nav').up() /* ->montée d'un cran */   
$('selected').up('div') /* ->montée jusqu'à div */  
$('sidebar').down() /* descente au 1er ul */  
$('sidebar').down(1) /* descente de 2 cran */  
/* descente jusqu'au 1er li de la classe selected */
$('sidebar').down('li.selected')  

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();
}

scrollTo makeClipping undoClipping