Le problème avec les DOM

Le principal problème de Javascript est causé par les objets ajoutés par les navigateurs pour contrôler les documents Web : le Document Object Model (DOM). Les fonctionnalités de base sont présentent dans ce qu'on appelle le "DOM 0", une série d'objets et de classes non standardisés par le W3C mais qui est respecté par la majorité des navigateurs. Parmi ces objets, notons: window, screen et navigator.

Là où ça se complique est pour la représentation Javascript des balises, du CSS et des évènements. Certains navigateurs ont été codé avant le standard officiel du W3C. Chaque vendeur (user-agent) ont donc implémentés des modèles incompatibles. Il existe trois grande famille de modèle: Netscape 4, Internet Explorer et DOM du W3C.

Les évènements

Netscape 4

Netscape 4 utilise un vieux modèle de gestion d'évènement. On doit spécifier à une balise qu'elle "capture" des évènements et ensuite associer à la propriété "onevent" la fonction qui sera exécutée. Le premier paramètres envoyés est une référence à un objet Event propre à Netscape 4.

document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=function(eventNetscape) {
  alert(event.type) // "mousedown"
}

Internet Explorer

Internet explorer possède un autre modèle de gestion d'évènement. Il possède aussi un objet global window.event utilisé dans les fonctions pour les informations de l'évènement. Le modèle contient beaucoup plus de type d'évènements que ce qui est prévu dans la spécification HTML.

Les principales méthodes pour ajouter et supprimer des évènements sont:

• window.attachEvent('onload', aFunction);
• window.detachEvent('onload', aFunction);

L'évènement qui a reçu l'action de l'usager (le "target" dans le DOM 2 Event) se retrouve dans l'attribut srcElement sur Internet Explorer.

DOM 2 Event

Le W3C a standardisé un modèle pour la gestion d'évènement et ce modèle est utilisé dans Mozilla, Opera et Konqueror. C'est ce modèle qui devrait être utilisé. Voir la page sur les évènements.

CSS

Avec le CSS, deux modèles s'affrontent pour les propriétés CSS. Le modèle de Netscape 4 (du temps des layers) où les propriétés CSS étaient dans l'élément HTML et le modèle du W3C où les propriétés se retrouvent dans l'objet "style". Voici une différente entre Netscape 4 et Mozilla pour changer la couleur de fond d'un élément paragraphe (balise P).

// avec Netscape 4
p.bgColor = 'red';

// avec le DOM du W3C (Mozilla, Netscape 6, Internet Explorer)
p.style.backgroundColor = 'red'; // la propriété css s'appelle background-color

Malheureusement, le modèle objet pour gérer les feuilles de styles (link rel="stylesheet", balise <style>) et les règles CSS ne sont pas les mêmes entre Internet Explorer et le W3C.

HTML

Certaines différences subtiles existent entre le comportement des objets HTML en javascript. Encore ici, trois modèle existe (Netscape 4, Internet Explorer et le W3C).

Voici une liste de différences pour certaines propriétés des objets.

• Sous Internet Explorer, les balises A possèdent une fonction "click()" qui permet de générer un clique en javascript, sans la souris. L'évènement onclick="" est alors déclenché.
• Sous Netscape 4, on pouvait accéder aux "layers" à l'aide de leur attribut id avec la syntaxe document.layers['id']. Sous Internet Explorer 4, on devait utiliser document.all['id'] et dans les navigateurs actuels, on doit utiliser document.getElementById('id'). De plus, Internet Explorer créait automatiquement un objet avec le même nom que le id. Donc la déclaration HTML <p id="para1"> créait automatiquement l'objet window['para1'] ou la variable para1.
• Pour les balises <select>, la fonction add() diffère. Sous Internet Explorer aSelect.options.add(new Option('a','b'), index); et aSelect.add(new Option('a','b'), index) existe. Le deuxième paramètre est optionnel et représente l'indexe (0 à aSelect.options.length-1) de l'élément placé avant la nouvelle option. Sous le DOM du W3C, la méthode add existe seulement pour la balise <select> et le second paramètre est l'objet qui est placé avant la nouvelle option: aSelect.add(new Option('a','b'), null). Le deuxième paramètre est obligatoire. Voici une méthode d'ajouter un élément à la fin sous IE et sous le DOM du W3C:

  var anOption = new Option('a','b');
  if (aSelect.options.add) { // la méthode options.add existe seulement sous IE
    aSelect.options.add(anOption);
  } else {
    aSelect.add(anOption, null);
  }
  

• etc.

Incompatibilité du langage

Il existe aussi des incompatibilités entre navigateurs dû au langage javascript. Par exemple, le mot clé "const" pour définir des constantes n'existe pas sous Internet Explorer. De plus, avec Internet Explorer, on ne peut pas changer les interfaces du DOM HTML à l'aide de leur prototype comme sous Mozilla.