NuxBSD: Free Infos

Table des matières

1.1 Le DOM
1.2 L'objet window
1.3 L'objet document
1.4 La structure DOM
1.5 Accéder aux éléments
1.6 L'héritage des propriétés et des méthodes
1.7 Éditer les éléments HTML
1.8 Résumé

1.1 Le DOM

DOM : Document Model Interface
C'est une interface de programmation pour les documents XML et HTML, en anglais on l'appelle une API (Application Programming Interface).
Une API est constitué d'un ensemble d'outils qui permettent de faire communiquer entre eux plusieurs programmes.

Le DOM est donc une API qui va permettre d'accéder au code XML et HTML via le JavaScript.

En HTML on parle de balises ouvrantes et fermantes, en JavaScript on parlera d'éléments HTML lorsque l'on parlera de balises HTML en JavaScript.

Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles.
La liste La liste complète sur MDN énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site., Event, HTMLDivElement, etc … La liste complète sur MDN

DOM-1
Le W3C régulé le DOM-1 en publiant une spécification “DOM-1” pour DOM Level 1. Cette spécifications définit ce qu'est le DOM-1 et comment un document XML ou HTML est schématisé hiérarchiquement sous forme d'arbre.
Exemple : l'élément HTML <html> contient deux éléments HTML <head> et <body> qui contiennent d'autres éléments HTML.

DOM-2
La grande nouveauté de cette version 2 est l'introduction de la méthode getElementById() qui permet de récupérer un élément HTML ou XML en connaissant son ID.

1.2 L'objet window

L'objet window est ce ce que l'on appelle un objet globale qui représente la fenêtre du navigateur. C'est à partir de cet objet que JavaScript est exécuté.
L'objet window est dit implicite ce qui veut dire qu'il n'a pas besoin d'être spécifier.
window.alert() ou alert() c'est la même chose car alert() est une méthode, une fonction de l'objet window.

Attention : isNaN(), parseInt() ou parseFloat() sont des fonctions qui ne dépendent pas d'un objet.
Elles sont dîtes globales.

IInfos sur les IIFE

var text = 'Variable globale !';
(function() { // On utilise une IIFE pour « isoler » du code
    var text = 'Variable locale !';
    alert(text); // Forcément, la variable locale prend le dessus
    alert(window.text); // Mais il est toujours possible d'accéder à la variable globale grâce à l'objet « window »
})();

Notre variable a été utilisée pour la première fois dans une IIFE et pourtant nous y avons accès depuis l'espace global ! Alors pourquoi cela fonctionne-t-il de cette manière ? Tout simplement parce que le JavaScript va chercher à résoudre le problème que nous lui avons donné : on lui demande d'attribuer une valeur à la variable text, il va donc chercher cette variable mais ne la trouve pas, la seule solution pour résoudre le problème qui lui est donné est alors d'utiliser l'objet window. Ce qui veut dire qu'en écrivant :

text = 'Variable accessible !';

window.text = 'Variable accessible !';

le code sera alors interprété de cette manière si aucune variable accessible n'existe avec ce nom :

Pour ne pas polluer votre code avec des variables globales, vous utilisez probablement des Immediately Invoqued Function Expression, communément appelées IIFE :
(function( ){ } )( ) ceci étant dû au fait qu'en JavaScript, la portée d'une variable est la fonction dans laquelle elle est crée, et non pas les accolades { } propres à de nombreux langages (tels que C#, Java, PHP …).

Avec ECMAScript 2015, par défaut, une variable, une fonction ou une classe sont privées. Pour les rendre publiques, il faut explicitement les exporter depuis le fichier source, puis les importer dans le fichier destination, comme vous le faite dans vos scripts node.

Aussi, lorsque vous continuerez, pendant quelques mois encore, à créer des IIFE, faites le avec nostalgie : elles appartiendront bientôt au bon vieux temps ;)

1.3 L'objet document

L'objet document est un sous-objet de window, il représente la page Web et plus précisément la balise <html>.
C'est grâce à cet élément que l'on va pouvoir accéder au éléments HTML et les modifier.
Toute page web chargée dans un navigateur web à son propre objet document.
L'objet document sert de point d'entrée au contenu de la page et apporte des fonctions générales au document.
L'interface de l'objet document permet d'accéder à de nombreuses choses comme le type de document, son URL, l'arbre DOM (incluant des éléments tels que <body> ou encore <table>), tout en fournissant des méthodes pour créer et manipuler chacun des sous-nœuds du document.

Ses propriétés et méthodes

L'objet document les propriétés et les méthodes.
L'objet document en détail.

1.4 La structure DOM

Le DOM est comme un arbre hiérarchique ou généalogique. Chaque éléments est parent et a des enfants, ces enfants deviennent à leur tour parent et ont des enfants .
L'élément <html> est parent de l'élément <head> et <body> et chaque élément est appelé un nœud ou node.
La valeur d'un nœud est du #text.

Le texte présent dans une page Web est vu par le DOM comme un nœud de type #text.

<html>
    <head>
        <meta charset="utf-8" />
        <title>Le titre de la page</title>
    </head>
    <body>
    </body>

1.5 Accéder aux éléments

a. Trois méthodes principales de l'objet document :

getElementById() :
- permet d'accéder à un élément HTML en connaissant son ID qui est simplement l'attribut id de l'élément HTML, il retourne l'objet correspondant à la balise ayant l'attribut “id” à idName. Il ne retourne qu'un seul objet.
getElementsByTagName() :
- permet de récupérer, sous la forme d'un tableau, tous les éléments HTML de la même famille
- retourne une collection (un tableau) d'éléments (utilisable de la même manière qu'un tableau).
- a. Cette méthode est accessible sur n'importe quel élément HTML et pas seulement sur l'objet document.
- b. En paramètre de cette méthode vous pouvez mettre une chaîne de caractères contenant un astérisque * qui récupérera tous les éléments HTML contenus dans l'élément HTML ciblé.
getElementsByName() :
- permet de ne récupérer que les éléments HTML qui possèdent un attribut name, il attend en paramètre le nom des éléments HTML et retourne un tableau des éléments HTML trouvés dans le document.

On pourrait très bien utiliser le chemin complet comme ceci:
- window.document.getElementById()
- window.document.getElementsByTagName()
- window.document.getElementsByName()

b. Deux méthodes plus récentes (à partir de la version 8 d'Internet Explorer)
Ces deux méthodes prennent pour paramètre un seul argument : une chaîne de caractères !
Cette chaine doit être absolument un sélecteur CSS ! Pour connaitre la liste des sélecteurs CSS3 sur la spécification du W3C..

querySelector() :
- renvoie le premier élément trouvé correspondant au sélecteur CSS
querySelectorAll() :
- va renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni

Exemple :

<div id="menu">
    <div class="item">
        <span>Élément 1</span>
        <span>Élément 2</span>
    </div>
    <div class="publicite">
        <span>Élément 3</span>
        <span>Élément 4</span>
    </div>
</div>
<div id="contenu">
    <span>Introduction au contenu de la page...</span>
</div>

Dans cet exemple on utilise la propriété innerHTML qui nous permet d'accéder au contenu d'un élément et d'en changer la propriété.

<script>
var query = document.querySelector('#menu .item span'); 
var queryAll = document.querySelectorAll('#menu .item span');
alert(query.innerHTML); // Affiche : "Élément 1"
alert(queryAll.length); // Affiche : "2"
alert(queryAll[0].innerHTML + ' - ' + queryAll[1].innerHTML); // Affiche : "Élément 1 - Élément 2
</script>

1.6 L'héritage des propriétés et des méthodes

JavaScript voit tout les éléments HTML comme des objets.
Donc chaque éléments HTML possède des propriétés et des méthodes.

Tous les éléments HTML ne possèdent pas toutes les mêmes propriétés et méthodes mais tous les éléments sont d'un même type : le type node.

Notions d'héritage
Nous avons vu qu'un élément HTML div est un objet HTMLDivElement, mais un objet, en JavaScript, peut appartenir à différents groupes.

Ainsi, notre élément HTML div est un HTMLDivElement, qui est un sous-objet d'HTMLElement qui est lui-même un sous-objet d'Element.
Element est enfin un sous-objet de Node.

L'objet Node apporte un certain nombre de propriétés et de méthodes qui pourront être utilisées depuis un de ses sous-objets.
En clair, les sous-objets héritent des propriétés et méthodes de leurs objets parents.

1.7 Éditer les éléments HTML

Les éléments HTML sont souvent composés d'attributs (l'attribut href d'un <a> par exemple), et d'un contenu, qui est de type #text.
Le contenu peut aussi être un autre élément HTML.

a. Les attributs

Via l'objet Element

Pour interagir avec les attributs, l'objet Element nous fournit deux méthodes qui permettent de récupérer et d'éditer un attribut d'un élément HTML comme href, name.

getAttribute() : permet de récupérer un attribut
setAttribute() : permet d'éditer un attribut donc de donner une nouvelle valeur à l'attribut que l'on vient de récupérer

<body>
    <a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>
    <script>
        var link = document.getElementById('myLink');
        var href = link.getAttribute('href'); // On récupère l'attribut « href »
        alert(href);
        link.setAttribute('href', 'http://www.siteduzero.com'); // On édite l'attribut « href »
    </script>
</body>

Explications :

on récupère l'élément HTML ayant pour id myLink
on lit son attribut href via getAttribute()
on modifie la valeur de l'attribut href via setAttribute() en lui donnant un nouveau lien

b. Les attributs accessibles

En fait, pour la plupart des éléments HTML courants comme <a>, il est possible d'accéder à un attribut via une propriété.
Ainsi, si on veut modifier la destination d'un lien, on peut utiliser la propriété href, comme ceci :

<body>
  <a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>
  <script>
    var link = document.getElementById('myLink'); // RECUP "http://www.un_lien_quelconque.com"
    var href = link.href; // CONTENU "http://www.un_lien_quelconque.com"
    alert(href); 
    link.href = 'http://www.siteduzero.com'; // http://www.siteduzero.com 
  </script>
</body>

C'est cette façon de faire que l'on utilisera majoritairement pour les formulaires :
pour récupérer ou modifier la valeur d'un champ, on utilisera la propriété value.

Attention ! Un attribut auquel on accède par le biais de la méthode getAttribute() renverra la valeur exacte de ce qui est écrit dans le code HTML (sauf après une éventuelle modification) tandis que l'accès par le biais de sa propriété peut entraîner quelques changements.

Prenons l'exemple suivant :
<a href=“/”>Retour à l'accueil du site</a>
attribut = href
propriété = /
L'accès à l'attribut href avec la méthode getAttribute() retournera bien un simple slash tandis que l'accès à la propriété retournera une URL absolue. Si votre nom de domaine est « mon_site.com » vous obtiendrez alors « http://mon_site.com/ ».

c. La classe

Pour modifier l'attribut class il faudra utiliser la propriété className

- Pour modifier l'attribut class d'un élément HTML, il ne suffit pas d'utiliser element.class car le mot-clé class est réservé en JavaScript. À la place de class, il faudra utiliser la propriété className.
- On ne peut pas modifier l'attribut HTML for d'un <label> en écrivant element.for, il faudra utiliser element.htmlFor à la place.

Exemple :

    <head>
        <meta charset="utf-8" />
        <title>Le titre de la page</title>
        <style>
            .blue {
                background: blue;
                color: white;
            }
        </style>
    </head>
    <body>
        <div id="myColoredDiv">
            <p>Un peu de texte <a>et un lien</a></p>
        </div>
        <script>
            document.getElementById('myColoredDiv').className = 'blue'; // met un fond bleu à myColoredDiv
        </script>
    </body>

Attention : Si l'élément comporte plusieurs classes (<a class=“external red u”>) et que vous récupérez la classe avec className, cette propriété ne retournera pas un tableau avec les différentes classes, mais bien la chaîne « external red u ».
Il vous faudra alors couper cette chaîne avec la méthode split() pour obtenir un tableau, comme ceci :

var classes    = document.getElementById('myLink').className;
var classesNew = [];
classes = classes.split(' ');
for (var i = 0, c = classes.length; i < c; i++) {
    if (classes[i]) {
       classesNew.push(classes[i]);
    }
}
alert(classesNew);

Explication :

on récupère les classes
on découpe la chaîne avec la méthode split() mais comme il se peut que plusieurs espaces soient présents entre chaque nom de classe, on vérifie chaque élément pour voir s'il contient quelque chose (s'il n'est pas vide).
on crée un nouveau tableau, classesNew, qui contiendra les noms des classes, sans « parasites »

Si le support d'Internet Explorer avant sa version 10 vous importe peu, vous pouvez aussi vous tourner vers la propriété classList qui permet de consulter les classes sous forme d'un tableau et de les manipuler aisément :

var div = document.querySelector('div');
 
// Ajoute une nouvelle classe
div.classList.add('new-class');
 
// Retire une classe
div.classList.remove('new-class');
 
// Retire une classe si elle est présente ou bien l'ajoute si elle est absente
div.classList.toggle('toggled-class');
 
// Indique si une classe est présente ou non
if (div.classList.contains('old-class')) {
    alert('La classe .old-class est présente !');
}
 
// Parcourt et affiche les classes CSS
var result = '';
 
for (var i = 0 ; i < div.classList.length ; i++) {
    result += '.' + div.classList[i] + '\n';
}
alert(result);

d. Le contenu : innerHTML

La propriété innerHTML est spéciale et demande une petite introduction. Elle a été créée par Microsoft pour les besoins d'Internet Explorer et a été normalisée au sein du HTML5. Bien que non normalisée pendant des années, elle est devenue un standard parce que tous les navigateurs la supportaient déjà, et non l'inverse comme c'est généralement le cas.
Attention : innerHTML récupère le contenu html sous forme de chaîne de caractères

e. Récupérer du HTML

innerHTML permet de récupérer le code HTML enfant d'un élément sous forme de texte.
Ainsi, si des balises sont présentes, innerHTML les retournera sous forme de texte :

<body>
    <div id="myDiv">
        <p>Un peu de texte <a>et un lien</a></p>
    </div>
    <script>
        var div = document.getElementById('myDiv');
        alert(div.innerHTML);
    </script>
</body>

Nous avons donc bien une boîte de dialogue qui affiche le contenu de myDiv, sous forme de texte :

f. Ajouter ou éditer du HTML

Pour éditer ou ajouter du contenu HTML, il suffit de faire l'inverse, c'est-à-dire de définir un nouveau contenu :

document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une citation à la place du paragraphe</blockquote>';

Si vous voulez ajouter du contenu sans modifier le contenu déjà en place, il suffit d’utiliser += à la place de l'opérateur d'affectation :

document.getElementById('myDiv').innerHTML += ' et <strong>une portion mise en emphase</strong>.';

Attention : il ne faut pas utiliser le += dans une boucle ! En effet, innerHTML ralentit considérablement l'exécution du code si l'on opère de cette manière, il vaut donc mieux concaténer son texte dans une variable pour ensuite ajouter le tout via innerHTML.

Exemple :

var text = '';
 
while( /* condition */ ) {
  text += 'votre_texte'; // On concatène dans la variable « text »
}
element.innerHTML = text; // Une fois la concaténation terminée, on ajoute le tout à « element » via innerHTML

Attention ! Si un jour il vous prend l'envie d'ajouter une balise <script> à votre page par le biais de la propriété innerHTML, sachez que ceci ne fonctionne pas ! Il est toutefois possible de créer cette balise par le biais de la méthode createElement()

g. innerText

La propriété innerText a aussi été introduite dans Internet Explorer, mais à la différence de sa propriété sœur innerHTML, elle n'a jamais été standardisée et n'est pas supportée par tous les navigateurs. Internet Explorer (pour toute version antérieure à la neuvième) ne supporte que cette propriété et non pas la version standardisée que nous verrons par la suite.
Le fonctionnement d'innerText est le même qu'innerHTML excepté le fait que seul le texte est récupéré, et non les balises.
innerText est pratique pour récupérer du contenu sans le balisage :

<body>
    <div id="myDiv">
        <p>Un peu de texte <a>et un lien</a></p>
    </div>
    <script>
        var div = document.getElementById('myDiv');
        document.write(div); -> affichera "Un peu de texte et un lien"
        alert(div.innerText);
    </script>
</body>

h. textContent

La propriété textContent est la version standardisée d'innerText ; elle est reconnue par tous les navigateurs à l'exception des versions d'Internet Explorer antérieures à la 9. Le fonctionnement est évidemment le même. Maintenant une question se pose : comment faire un script qui fonctionne à la fois pour Internet Explorer et les autres navigateurs ?

1.8 Résumé

METHODES	Fonction
getElementById()	accéder à un élément en connaissant son ID qui est simplement l'attribut id
getElementsByTagName()	permet de ne récupérer que les éléments qui possèdent un attribut name que vous spécifiez
getElementsByName()	permet de ne récupérer que les éléments qui possèdent un attribut name que vous spécifiez
querySelector()	renvoie le premier élément trouvé correspondant au sélecteur CSS
querySelectorAll()	va renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni

Proriétés	Fonction
getAttribute()	récupère la valeur de l'attribut
setAttribute()	la nouvelle valeur à donner à l'attribut
className	retourne une chaîne
classList()	permet de consulter les classes sous forme d'un tableau et de les manipuler aisément
classList.add('new-class')	ajoute une nouvelle classe
classList.remove('new-class')	retire une classe
classList.toggle('toggled-class')	retire une classe si elle est présente ou bien l'ajoute si elle est absente
classList.contains('old-class')	indique si une classe est présente ou non
innerHTML	permet de récupérer le code HTML enfant d'un élément sous forme de texte
innerText	le fait que seul le texte est récupéré, et non les balises

Retour d'un niveau
Retour à l'accueil