Document.getElementById
La méthode getElementById() de Document renvoie un objet Element représentant l'élément dont la propriété id correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser querySelector() pour trouver l'élément en utilisant un sélecteur.
Syntaxe
var element = document.getElementById(id);
Valeur de retour
Un objet Element décrivant l'objet élément du DOM correspondant à l'ID spécifié ou null si aucun n'a été trouvé dans le document.
Exemple
function changeColor(newColor) {
var elem = document.getElementById('para');
elem.style.color = newColor;
}
Notes d'utilisation
L'écriture de la lettre capitale de « Id » dans le nom de cette méthode doit être respectée pour que le code fonctionne ; getElementByID() n'est pas valide et ne fonctionnera pas, même si elle semble naturelle. Contrairement à d'autres méthodes de recherche d'éléments, comme Document.querySelector() et Document.querySelectorAll(), getElementById est uniquement disponible comme méthode de l'objet global document et n'est pas disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.
Exemple
<iv id="parent-id">
<p>hello word1</p>
<p id="test1">hello word2</p>
<p>hello word3</p>
<p>hello word4</p>
</div>
<script>
var parentDOM = document.getElementById('parent-id');
var test1=parentDOM.getElementById('test1');
//erreur de lancement
//TypeError inattendu : parentDOM.getElementById n'est pas une fonction
</script>
getElementsByClassName
Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler getElementsByClassName () sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.
Syntaxe
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
Exemple
Trouve tous les éléments ayant la classe « test » :
document.getElementsByClassName('test')
Trouve tous les éléments ayant les classes « rouge » et « test » :
document.getElementsByClassName('rouge test')
Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :
document.getElementById('main').getElementsByClassName('test')
Nous pouvons également utiliser les méthodes de Array.prototype sur toute HTMLCollection en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':
var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
return testElement.nodeName === 'DIV';
});
document.querySelector
La méthode querySelector() de l'interface Document retourne le premier Element dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.
Syntaxe
element = document.querySelector(sélecteurs);
Paramètres
selectors (sélecteurs) une DOMString (chaîne de caractères) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception SYNTAX_ERR est lancée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur les sélecteurs et leur gestion.
Notes d'utilisation
Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné. Les pseudo-éléments CSS ne retourneront jamais aucun élément, comme spécifié dans l'API des sélecteurs
Caractère spécial d'échappement
Pour faire correspondre un ID (identifiant) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper deux fois (une pour la chaîne de caractères JavaScript et une autre fois pour querySelector) :
<div id="machin\bidule"></div>
<div id="machin:bidule"></div>
<script>
console.log('#machin\bidule') // "#machinidule" (\b est le caractère de contrôle retour arrière)
document.querySelector('#machin\bidule') // ne correspond à rien
console.log('#machin\\bidule') // "#machin\bidule"
console.log('#machin\\\\bidule') // "#machin\\bidule"
document.querySelector('#machin\\\\bidule') // correspond au premier div
document.querySelector('#machin:bidule') // ne correspond à rien
document.querySelector('#machin\\:bidule') // correspond au second div
</script>
Exemples
Trouver le premier élément correspondant à une classe
var el = document.querySelector(".maclasse");
Dans cet exemple, le premier élément dans le document qui contient la classe "maclasse" est retourné
Un sélecteur plus complexe
Les sélecteurs peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément input name="identifiant" dans un div class="panneau-utilisateur principal" dans le document est retourné :
var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']");
Document.querySelectorAll()
La méthode querySelectorAll() de Element renvoie une NodeList statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.
Syntaxe
elementList = parentNode.querySelectorAll(selectors);
Paramètres
selecteurs une DOMString (chaîne de caractères) qui contient un ou plusieurs sélecteurs CSS ; s'il n'y en a pas, une exception SyntaxError est lancée. Voir localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.
Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir Echapper des caractères spéciaux pour plus d'informations.
Valeur renvoyée
Une NodeList statique contenant un objet Element pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une NodeList vide si aucune correspondance n'est trouvée .
Note : Si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.
Execptions
SyntaxError la syntaxe des chaînes selectors spécifiés n'est pas valide.
Exemples
Pour obtenir une NodeList (liste de noeuds) de tous les éléments p dans le document :
const matches = document.querySelectorAll("p");
Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a pour valeur "note" ou "alert" :
const matches = document.querySelectorAll("div.note, div.alert");
Ici, nous obtenons une liste des éléments
dont l'élément parent immédiat est un div avec la classe "highlighted" et qui sont situés dans un conteneur dont l'identifiant est "test".
const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");
Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments iframe dans le document qui contient un attribut nommé "data-src" :
const matches = document.querySelectorAll("iframe[data-src]");
Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est "userlist" lequel a un attribut "data-active" dont la valeur est "1"
const container = document.querySelector("#userlist");
const matches = container.querySelectorAll("li[data-active='1']");
Accès aux correspondances
Une fois que la NodeList des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (array). Si le tableau est vide (c'est quand sa propriété length est 0), alors aucune correspondance n'a été trouvée.
Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :
const highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach(function(userItem) {
deleteUser(userItem);
});
Hover/css
La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.
/* Cible n'importe quel élément 'a' lorsque */
/* celui-ci est survolé */
a:hover {
background-color: gold;
}
Syntaxe
La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme :link, :visited, et :active, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle :hover après les règles :link et :visited mais avant la règle :active (l'ordre est :link — :visited — :hover — :active – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle :focus est indifférent.
Note :
sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
Syntaxe
:hover
Exemple
CSS
a:hover {
background-color: gold;
}
HTML
<p>
<a href ="#">Ce lien sera écrit sur un fond doré lors du survol. </a>
</p>
Transition
La propriété transition est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay.
transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out;
Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide de pseudo-classes telles que :hover ou :active ou être définis dynamiquement avec JavaScript.
Syntaxe
/* S'applique à une propriété */
/* on a le nom et la durée */
transition: margin-right 4s;
/* nom de la propriété | durée | retard */
transition: margin-right 4s 1s;
/* nom | durée | fonction */
transition: margin-right 4s ease-in-out;
/* nom | durée | fonction | retard */
transition: margin-right 4s ease-in-out 1s;
/* S'applique à deux propriétés */
transition: margin-right 4s, color 1s;
/* S'applique à toutes les propriétés modifiées */
transition: all 0.5s ease-out;
/* Valeurs globales */
transition: inherit;
transition: initial;
transition: unset;
Note :
sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
Syntaxe
:hover
Exemple
CSS
a:hover {
background-color: gold;
}
HTML
<p>
<a href ="#">Ce lien sera écrit sur un fond doré lors du survol.</a>
</p >
:nth-of-type
La pseudo-classe :nth-of-type() correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.
/* Sélectionne chaque élément de type dont
la position parmi l'ensemble des éléments de type
descendants directement du même élément parent,
est un multiple de 4. */
p:nth-of-type(4n) {
color: lime;
}
Syntaxe
La pseudo-classe nth-of-type ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés. Pour une explication plus détaillée de sa syntax voir :nth-child
Syntaxe formelle
:nth-of-type( )
où
<nth> = <an-plus-b> | even | odd
Exemple
Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras
HTML
<div>
<div>Cet élément n'est pas compté.</div>
<p>1er paragraphe.</p>
<p>2e paragraphe.</p>
<div>Cet élément n'est pas compté.</div>
<p>3e paragraphe.</p>
<p>4e paragraphe.</p>
</div>
CSS
/* Paragraphes impairs */
p:nth-of-type(2n+1) {
color: red;
}
/* Paragraphes pairs */
p:nth-of-type(2n) {
color: blue;
}
/* Premier paragraphe */
p:nth-of-type(1) {
font-weight: bold;
}
:nth-child
La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.
/* Cible les éléments en fonction de leur position dans */
/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
/* soit le type de l'élément */
body :nth-child(4n) {
background-color: lime;
}
Syntaxe
La pseudo-classe nth-child prend un seul argument qui représente le motif de répétition des éléments ciblés.
Valeur avec un mot-clé
odd Représente les éléments dont la position est impaire par rapport à leurs voisins.
even Représente les éléments dont la position est paire par rapport à leurs voisins.
Notation fonctionnelle
An+B Représente les éléments dont la position est la An+B-ième avec n qui parcourt les entiers à partir de 0. Les valeurs fournies pour A et B doivent être des entiers (integer).
Syntaxe formelle
:nth-child( [ of <complex-selector-list> ]? )
où
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#
où
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
où
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
= '>' | '+' | '~' | [ '||' ]
où
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
où
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
où
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
Exemple
Exemples de sélecteurs
tr:nth-child(2n+1) Permettra de cibler les lignes impaires d'un tableau.
tr:nth-child(odd) Permettra de cibler les lignes impaires d'un tableau.
tr:nth-child(2n) Permettra de cibler les lignes paires d'un tableau.
tr:nth-child(even) Permettra de cibler les lignes paires d'un tableau.
span:nth-child(0n+1) Permettra de cibler un élément 'span' qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe :first-child.
span:nth-child(1) Synonyme à l'exemple précédent.
span:nth-child(-n+3) Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément span.
Exemple démonstratif
CSS
html {
font-family: sans-serif;
}
span, div em {
padding: 10px;
border: 1px solid green;
display: inline-block;
margin-bottom: 3px;
}
.premier span:nth-child(2n+1),
.deuxieme span:nth-child(2n+1),
.troisieme span:nth-of-type(2n+1) {
background-color: lime;
}
<code>span:nth-child(2n+1)</code>,
<em>sans</em> un <code><em></code>
parmi les éléments. Les éléments fils 1, 3,
5 et 7 sont sélectionnés.
<div class="premier">
<span>Ce span est sélectionné !</span>
<span>Pas ce span ci. :(</span>
<span>Celui-ci ?</span>
<span>Celui-là ?</span>
<span>Un autre exemple</span>
<span>Et encore un</span>
<span>Puis un dernier</span>
</div>
<code>span:nth-child(2n+1)</code>,
<em>avec</em> un élément <code><em></code>
parmi les fils. Les éléments fils 1, 5,
et 7 sont sélectionnés. 3 est compté
mais n'est pas ciblé car ce n'est pas
<code><span></code>.
<div class="deuxieme">
<span>Ce span est sélectionné !</span>
<span>Pas ce span ci. :(=</span>
<em>Ici on a un em.</em>
<span>Qu'en est-il de celui-ci ?</span>
<span>De celui-là ?</span>
<span>Voici un autre exemple</span>
<span>Et encore un</span>
<span>Puis un dernier</span>
</div>
<code>span:nth-of-type(2n+1)</code>,
<em>avec</em> un <code><em></code>
parmi les éléments fils. Les éléments fils
1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
compté ni ciblé car c'est un <code><em></code>,
et pas un <code><span></code> et
<code>nth-of-type</code> ne sélectionne que les
fils de ce type. Ce <code><em></code> est
sauté et est ignoré.
<div class="troisieme">
<span>Ce span est sélectionné !</span>
<span>Pas ce span ci. :(</span>
<em>Ici on a un em.</em>
<span>Qu'en est-il de celui-ci ?</span>
<span>De celui-là ?</span>
<span>Voici un autre exemple</span>
<span>Et encore un</span>
<span>Puis un dernier</span>
</div>
Grilles CSS (CSS Grid)
Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML. Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.
Un exemple simple
Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.
HTML
<div class="wrapper">
<div class="one">Un</div>
<div class="two">Deux</div>
<div class="three">Trois</div>
<div class="four">Quatre</div>
<div class="five">Cinq</div>
<div class="six">Six</div>
</div>
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}