11544 sujets

JavaScript, DOM et API Web HTML5

Bonjour, bonjour Smiley smile ,

je suis en train de me mettre sérieusement au DOM et je m'interroge…

Faut-t-il systématiquement tester l’existence de toutes les méthodes utilisées dans un script au début de celui-ci
// si les méthodes n'existent pas, on sort...
if(!document.getElementById || !document.getElementsByTagName || !document.createElement || !document.removeChild || !document.setAttribute || !document.appendChild)
{
	return;
}
ou existe-t-il des tests plus généraux : par exemple le fait que si la méthode createElement existe, c’est inutile de tester removeChild, setAttribute et appendChild ?

Et question subsidiaire, existe-t-il un tableau récapitulatif des méthodes et de leur compatibilité ?

Merci !
Modifié par Heyoan (25 Jul 2007 - 09:44)
Heyoan a écrit :
Bon ben je viens de trouver cette page qui répond à mes 2 questions... Smiley confused

Très bon choix, en effet. Smiley smile

Par contre, en quoi est-ce que ça répond à ta première question ?
bonsoir,

Peter paul Koch precise également que la seule manière d'éviter les problèmes de
comptabilité des navigateurs est la justement la détection d'objet.

a écrit :

Your best friend for avoiding browser problems is object detection.
If your script uses an object , first check if the browser supports that object.
If it doesn't , your script ends.

In contrast to browser detection, object detection always works
....


on rejoint ensuite le lien que tu mets pour les supports (four methods)
Julien Royer a écrit :
Par contre, en quoi est-ce que ça répond à ta première question ?

Et bien d'après cette page, si le getElementById fonctionne, le createElement, le removeChild, l'appendChild et le setAttribute (sauf pour l'attribut style) fonctionnent également.

D'où mes premières conclusions (peut-être un peu hâtives Smiley rolleyes ) :

1°) je teste l'existence des méthodes dont j'ai besoin et qui n'ont pas d'équivalent : si elles n'existent pas, je 'return' chez moi...

2°) l'existence de certaines méthodes induisent l'existence d'autres (au vu de vos remarques j'ai comme un ch'tit doute Smiley murf )...

3°) plus loin dans le script, les méthodes qui ont des palliatifs sont testées et éventuellement remplacées (addEventListener --> attachEvent --> oElem.function)

Haem... J'ai bon ? Smiley confus
Modifié par Heyoan (04 Aug 2007 - 01:08)
d'une manière plus générale, il faut d'abord savoir si le navigateur supporte le DOM du W3C (conforme au standard).
Pour cela il suffit de tester les 2 methodes createElement et getElementsByTagName
dans le genre

// simple variable globale
var W3CDOM = document.createElement && document.getElementsByTagName;

// test avant l'utilisation
if(!W3CDOM) { return; // a ta maison }
.... 


Le fait de tester c'est 2 methodes précisemment est que IE4 ne supporte pas le DOM mais supporte la methode createElement, et que les anciennes version d'Opera supporte getElementsByTagnamen mais pas createElement

Concernant getElementById && getElementsByTagName cela peut servir pour une compatibilité avec IE 4 qui ne supporte pas ces méthodes et passe par document.all , mais il faut désirer un tel 'récurence'(pas sûr que ce soit le bon mot ...)

L'une des incompatibilté les plus 'ennuyante' est effectivement l'ajout de gestionnaire d'énènement (event handler) .
On peut donc passer par une detection d'objet plus spécifique pour la methode propriétaire IE


// methode proposée sur Quirksmode
function addEventSimple(obj,evt,fn) {
  if(obj.addEventListener) // donc W3C
     {
         //instructions
         obj.addEventListener(evt,fn,false);
     }
  else if (obj.attachEvent) // Microsoft
     {
       // instructions
       obj.attachEvent('on'+evt,fn);
      }
...


Toujours selon les conseils de Peter paul Koch , il teste sous FF (conformité W3C ) et ensuite IE (particularité methode propriétaire) .
Il teste ensuite Safari et Opera (et laisse 'de coté' les Explorer Mac, iCab ou bien Konqueror) , en sachant qu'un script ne marchera 'jamais' sur 100% des navigateurs

PS :
Dans mon cas précis c'est encore autre chose (lors de script pour le SVG) puisque le plugin nécessaire (Adobe svg viewer == moteur jS conforme) prend le relais de IE (moteur Js == non-conforme pour addEvent..)
JS) pour les Smiley lol

Il y a toujours quelque singularité (bug !?)comme pour IE6 qui est avec un test de détection est OK W3C (DOM niveau 1), mais ne supporte pas les constantes de types tels Node.ELEMENT_NODE ...

Pour ma part j'utilise le plus souvent possible les méthodes DOM niveau 1 qui pemettent à peu près de réaliser tous les scripts dont j'ai envie et sont surtout presque ( Smiley lol ..) compatible avec les différents navigateurs (excepté pour les méthodes propriétaires mais elles sont connues ) ...
Je n'ai pas à savoir si tel méthodes Dom Niveau 2 est pris en charge (nombreuse methodes du DOM 2 sont dite méthodes de 'complaisance' ( des raccourcis ) et sont réalisables via le dom 1)

Voilà , j'espère que j'aurai pas dit trop de c...... Smiley murf
kzone a écrit :
...mais il faut désirer un tel 'récurence'(pas sûr que ce soit le bon mot ...)
Pas sûr non plus ! Smiley biggol

En tous cas, merci de tes lumières kzone ! Smiley cligne


@Julien : merci de confirmer la luminosité de kzone ! Smiley lol
Modifié par Heyoan (25 Jul 2007 - 09:41)