DOM
Récupération d'éléments

Par identifiant

document.getElementById('uniqueID')

va récupérer

<div id="uniqueID"></div>

Tant qu'un élément avec l'ID donné existe, document.getElementById renverra uniquement cet élément. Sinon, il retournera null .

Remarque: les identifiants doivent être uniques. Plusieurs éléments ne peuvent pas avoir le même identifiant.

Par nom de classe

document.getElementsByClassName('class-name')

va récupérer

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

Si aucun élément existant ne contient la classe donnée, une collection vide sera renvoyée.

Exemple:

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

Par nom de tag

document.getElementsByTagName('b')

va récupérer

<b>All</b>
<b>of</b>
<b>the b elements.</b>

Si aucun élément avec le nom de tag donné n'existe, une collection vide sera renvoyée.

Par sélecteur CSS

Envisagez de suivre le code HTML

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

L'arborescence suivante sera construite selon le code HTML ci-dessus

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

Nous pouvons sélectionner des éléments de l'arborescence DOM à l'aide de sélecteurs CSS. Ceci est possible au moyen de deux méthodes javascript, à savoir querySelector() et querySelectorAll() .

La méthode querySelector () renvoie le premier élément qui correspond au sélecteur CSS donné du DOM.

document.querySelector('li.main')

renvoie le premier élément li qui est la classe main

document.querySelector('#two')

renvoie l'élément avec l'id two

REMARQUE: si aucun élément n'est trouvé, la valeur null est renvoyée. Si la chaîne de sélecteur contient un pseudo-élément CSS, le retour sera null .

La méthode querySelectorAll () renvoie tous les éléments correspondant au sélecteur CSS donné du DOM.

document.querySelectorAll('li.main')

renvoie une liste de nœuds contenant tous les éléments li dont la classe est main .

REMARQUE : Si aucun élément n'est trouvé, une liste de nœuds vide est renvoyée. Si la chaîne selectors contient un pseudo-élément CSS, l'élémentList retourné sera vide

Sélecteurs de requêtes

Dans les navigateurs modernes [1] , il est possible d'utiliser un sélecteur de type CSS pour rechercher des éléments dans un document, de la même manière que sizzle.js (utilisé par jQuery).

querySelector

Renvoie le premier Element du document correspondant à la requête. S'il n'y a pas de correspondance, renvoie null .

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

Retourne un NodeList contenant tous les éléments du document correspondant à la requête. Si aucun ne correspond, renvoie une NodeList vide.

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');