Fabrice Pigou

L'objet -- document --

MDN WebDoc
Récupérer
Sélectionne l'élément avec l'id
let text = document.getElementById('myDiv')
Sélectionne tout les éléments avec la class "paragraph"
document.getElementsByClassName('paragraph') Retourne un tableau
Sélectionne les éléments < p >
document.getElementsByTagName('p')
Sélectionne les éléments correspondant au sélecteur CSS
var elements = document.querySelectorAll('.demo')

Une fois que l'on obtient un élément il est possible d'obtenir différentes informations
element.getAttribute('attribut')	Permet de récupérer la valeur d'un attribut
element.style				Permet de récupérer les styles associés à l'élément
element.classList			Permet de récupérer la liste des classes associées à un élément 
element.offsetHeight		Donne la hauteur réel de l'élément

Editer

Le contenu textuel
// Modification du contenu textuel du premier titre
document.querySelector("h1").textContent += " de programmation";

Les attributs
// Définition de l'attribut "id" du premier titre
document.querySelector("h1").setAttribute("id", "titre");

Certains attributs comme id,href et value sont directement modifiables sous la forme de propriétés. Le code ci-dessous est équivalent au précédent.

document.querySelector("h1").id = "titre";

Les classes
var titreElt = document.querySelector("h1"); // Accès au premier titre h1
titreElt.classList.remove("debut"); // Suppression de la classe "debut"
titreElt.classList.add("titre"); // Ajout de la classe "titre"
console.log(titreElt);

Ajouter un nouvel élément

  1. Création du nouvel élément.
    2. 

  2. Définition des informations de l'élément.
    3. 

  3. Insertion du nouvel élément dans le DOM.

var pythonElt = document.createElement("li"); // Création d'un élément li
pythonElt.id = "python"; // Définition de son identifiant
pythonElt.textContent = "Python"; // Définition de son contenu textuel
document.getElementById("langages").appendChild(pythonElt); // Insertion du nouvel élément