méthode getElementById() : vraiment utile ?

méthode getElementById() : vraiment utile ? - HTML/CSS - Programmation

Marsh Posté le 04-12-2006 à 17:54:58    

bonjour
 
J'ai vu que pour accéder à un élement HTML via le DOM, en Javascript
il ya 2 facons :
- document.getElementById('IdElement').innerHTML (par ex)
- IdElement.innerHTML
 
dans ce cas, quel est l'intéret de passer par la méthode getElementById() si on peut y accéder directement par son id (sous réserver que l'id soit unique dans l'arbre (ce qui est censé etre le cas) ) ?
 
Je pensais que c'etait une question de compatibiltié inter navigateurs, mais les 2 facon marchent aussi bien sous IE que FF (mais j'ai pas essayé sur d'autres)

Message cité 1 fois
Reply

Marsh Posté le 04-12-2006 à 17:54:58   

Reply

Marsh Posté le 04-12-2006 à 18:24:39    

getElementById te permet de récupérer une valeur ou un contenu et donc de faire un traitement.

Reply

Marsh Posté le 04-12-2006 à 18:40:29    

la deuxième c'est pas du DOM [:spamafote]
Je pense que c'est un vieu relent de la methode oldSch00lz d'accès aux éléments d'une page HTML.
edit: par ailleurs getElementById te renvoie un objet de type node element, et l'autre ... euh ... j'en sais rien [:cupra]


Message édité par anapajari le 04-12-2006 à 18:41:17
Reply

Marsh Posté le 04-12-2006 à 19:36:13    

jokari34 a écrit :

dans ce cas, quel est l'intéret de passer par la méthode getElementById() si on peut y accéder directement par son id


Lapin compris. getElementById permet justement d'accéder à un élément par son id. Tout autre méthode n'est pas standard. On pourra aussi utiliser un alias, genre la fonction $ de prototype pour plus de légèreté

Message cité 1 fois
Reply

Marsh Posté le 05-12-2006 à 04:31:06    

FlorentG a écrit :

Lapin compris. getElementById permet justement d'accéder à un élément par son id. Tout autre méthode n'est pas standard. On pourra aussi utiliser un alias, genre la fonction $ de prototype pour plus de légèreté


Juste un petit conseil en passant.
Lorsque vous êtes amenés à faire pas mal de JS, je ne pense pas trop utile d'utiliser tout de suite une lib, mais plutôt les parties d'une lib. Où le mieux c'est d'avoir un jeu de helpers fonctions sous la main, qui font gagner du temps pour l'écriture du code.
 
parmis ces fonctions pas mal sont tirées de quirksmode. Je ne le cache pas, on va pas réinventer la roue.

Code :
  1. //Add Events
  2. function addEvent( obj, type, fn ) {
  3. if (obj.addEventListener)
  4.  obj.addEventListener( type, fn, false );
  5. else if (obj.attachEvent) {
  6.  obj["e"+type+fn] = fn;
  7.  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  8.  obj.attachEvent( "on"+type, obj[type+fn] );
  9. }
  10. }
  13. /* $: shortcut for document.getElementById*/
  14. function $(obj) {
  15. if(typeof obj == "string" ) {
  16.  return document.getElementById(obj);
  17. } else {
  18.  return obj;
  19. }
  20. }
  22. /*getElementsByClassName: return an array of Objects with specified className*/
  23. function getElementsByClassName(oElm, sTagName, sClassName){
  24.     var aElements = (sTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(sTagName);
  25. var aReturnElements = new Array();
  26.     sClassName = sClassName.replace(/\-/g, "\\-" );
  27. var oRegExp = new RegExp("(^|\\s)" + sClassName + "(\\s|$)" );
  28. var oElement;
  29. for(var i=0; i < aElements.length; i++){
  30.      oElement = aElements[i];
  31.  if(oRegExp.test(oElement.className))
  32.             aReturnElements.push(oElement);
  33.     }
  34. return aReturnElements
  35. }
  37. /*findPos: return position of an element*/
  38. function findPos(obj) {
  39. var curleft = curtop = 0;
  40. if (obj.offsetParent) {
  41.  curleft = obj.offsetLeft
  42.  curtop = obj.offsetTop
  43.  while (obj = obj.offsetParent) {
  44.   curleft += obj.offsetLeft
  45.   curtop += obj.offsetTop
  46.  }
  47. }
  48. return [curleft,curtop];
  49. }
  51. // getStyle : retourne la valeur d'une propriété CSS appliquée à un élément
  52. function getStyle(oElm, strCssRule){
  53.     var strValue = "";
  54.     if(document.defaultView && document.defaultView.getComputedStyle) {
  55.  try{ strValue = document.defaultView.getComputedStyle(oElm, "" ).getPropertyValue(strCssRule); }
  56.  catch(e) { strValue = ""; }
  57.     }
  58.     else if(oElm.currentStyle) {
  59.         try{
  60.   strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
  61.             return p1.toUpperCase();
  62.         });
  63.         strValue = oElm.currentStyle[strCssRule];
  64.  } catch(e) {
  65.   strValue = "";
  66.  }
  67.     }
  68.     return strValue;
  69. }
  70. /*retourne la valeur entière d'un style*/
  71. function intStyle(oElm, strCSSRule) {
  72. var val = parseInt(getStyle(oElm, strCSSRule));
  73. if (isNaN(val)) val=0;
  74. return val;
  75. }
  77. /* getText: retourne le contenu texte d'un élément */
  78. function getText(elm) {
  79. if (elm.innerText) {
  80.  return elm.innerText;
  81. } else {
  82.  return elm.textContent;
  83. }
  84. }

Reply

Marsh Posté le 05-12-2006 à 09:52:27    

Ton addEvent risque de leaker, non ? L'avantage de frameworks comme prototype ou Yahoo! UI, c'est qu'ils nettoient tous les events à la fermeture de la page, à méditer.
 
Sinon pour getElementByClassName, je serais partant de la renommer en quelque chose de plus court (on pourrait avoir $id('pouet') et $class('tagada') par exemple)

Reply

Marsh Posté le 05-12-2006 à 11:36:55    

pas bête chérie, pas bete :o

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed