Easy-Micro

ESPACEMEMBRE Dom et JavaScript
Proprié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 enfant
if (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>
innerHTML permet de remplacer le contenu existant d'un élément par un nouveau contenu. Voir ce code dans JS Bin

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>
Voir ce code dans JS Bin

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:
    1. si le nœud est un élément (balise)
    2. si la sélection porte sur un attribut
    3. s'il s'agit du nœud de texte
    4. pour un nœud de section CDATA
    5. pour un nœud de référence à une entité
    6. pour un nœud d'entité
    7. pour un nœud d'instruction de traitement
    8. pour un nœud de commentaire
    9. pour un nœud de document
    10. pour un nœud de type de document
    11. pour un nœud de fragment de document
    12. 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

nodeNameH1
nodeType1
nodeValuenull (sans objet)
parentNodeLe nœud élément body
childNodeLe nœud texte
firstChildLe nœud texte
lastChildLe nœud texte
nextSiblingLe nœud élément p
previousSiblingnull (sans objet)


< Page précédente DOM ET JAVASCRIPT Page suivante >