Dom et JavaScriptPropriétés DOM
Les propriétés de relation et d'état
La propriété de relation parentNode
Renvoie le nœud parent d'un nœud enfantif (node.parentNode) {
// Exemple 1 : supprime un noeud de l'arbre, sauf s'il a déjà été supprimé
node.parentNode.removeChild(node);
// Exemple 2 : récupère le nom du noeud parent d'un li
let nomDuNoeudParent = document.getElementById("monLI").parentNode.nodeName;
}Les propriétés de relation firstChild et lastChild
Renvoie le premier ou dernier enfant d'un nœud<p id="p1"><span>Premier span</span></p>
<script>
let p01 = document.getElementById('p1');
console.log(p01.firstChild.nodeName) // retourne #text
</script>Les propriétés de relation previousSibling et nextSibling
Renvoies le nœud frères/soeurs précédent ou suivant d'un nœud<html><body><p><div id="t1">Texte 1</div><div id="t2">Texte 2</div></p>
<script>
alert(document.getElementById("t1").previousSibling); // Paragraph
alert(document.getElementById("t2").previousSibling); // Div
</script></body></html>La propriété de relation ChildNodes
Stocke une liste de tous les nœuds enfant disponibles à partir d'un nœud<!doctype html>
<html lang="fr">
<body>
<!-- Ceci est un commentaire -->
<a href="javascript:void(0);" onclick="maFunction();">Afficher les enfants</a>
<p><strong>Note:</strong> les espaces entre les éléments sont considérés comme des nœuds, et le texte est considéré comme un nœud ainsi que les commentaires html</p>
<p id="demo"></p>
<script>
function maFunction() {
let c = document.body.childNodes;
let tousLesEnfants = "";
let i;
for (i = 0; i < c.length; i++) {
tousLesEnfants = tousLesEnfants + c[i].nodeName + "<br>";
}
// écrire (innerHTML) dans le paragraphe demo tous les enfants de body
document.getElementById("demo").innerHTML = tousLesEnfants;
}
</script>
</body>
</html>Récuperer le texte d'une balise HTML en javascript
Il existe deux méthodes pour récupérer le texte d'une balise; textContent ou innerText<html>
<body>
<div id="divDeTexte">Ceci est le texte à récupérer</div>
<script>
const texterécupéré = document.getElementById('divDeTexte').textContent; // ou innerText
alert(texterécupéré);
// change la couleur du texte
document.getElementById('divDeTexte').style.color = 'blue';
</script>
</body>
</html>Les propriétés d'état
- nodeName
Indique le nom du nœud (la balise) sélectionné - nodeType
Indique le type de nœud rencontré par une valeur:
- si le nœud est un élément (balise)
- si la sélection porte sur un attribut
- s'il s'agit du nœud de texte
- pour un nœud de section CDATA
- pour un nœud de référence à une entité
- pour un nœud d'entité
- pour un nœud d'instruction de traitement
- pour un nœud de commentaire
- pour un nœud de document
- pour un nœud de type de document
- pour un nœud de fragment de document
- pour un nœud de notation
- nodeValue
Permet d'obtenir ou de changer la valeur d'un nœud de type texte
Exemple: le nœud élément <h1> dans le corps d'un document
| nodeName | H1 |
| nodeType | 1 |
| nodeValue | null (sans objet) |
| parentNode | Le nœud élément body |
| childNode | Le nœud texte |
| firstChild | Le nœud texte |
| lastChild | Le nœud texte |
| nextSibling | Le nœud élément p |
| previousSibling | null (sans objet) |
