…JAVASCRIPT > trouver et modifier des éléments du document DOM

TEXTE

récupérer le texte :

 

var text = document.getElementById("divA").textContent;
ou innerText
// |text| vaut "Ceci est un exemple de texte".

 

modifier le texte :

 

document.getElementById("divA").textContent = "Ceci est un exemple de texte";

STYLE

Renvoie un objet représentant l’attribut style de l’élément.

var div = document.getElementById("div1");
div.style.marginTop = ".25cm";

Pour obtenir les valeurs de toutes les propriétés CSS d’un élément, utiliser window.getComputedStyle.Consultez la liste des propriétés CSS DOM (en-US) pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l’utilisation de la propriété style pour styler des éléments dans le DOM. 

Il est généralement préférable d’utiliser la propriété style plutôt que elt.setAttribute('style', '...') depuis un script, étant donné que l’utilisation de la propriété style n’écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l’attribut style.

TROUVER DES ÉLÉMENTS

Trouver le premier élément correspondant à une classe

var el = document.querySelector(".maclasse")

 

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.Note : La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d’abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.

element = document.querySelector(sélecteurs)

selectors (sélecteurs)  un ou des sélecteurs CSS valides ; sinon une exception SYNTAX_ERR est lancée. Voir Localisation des éléments DOM avec les sélecteurs. Note : les caractères qui n’appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\").

Si vous avez besoin d’une liste de tous les éléments, utiliser querySelectorAll() à la place.

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> dans le document est retourné :

var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']")

Voir aussi

Localisation des éléments DOM avec les sélecteurs

document.querySelectorAll() ;

element.querySelector() ;

element.querySelectorAll() ;

Extraits de code pour querySelector

 

https://developer.mozilla.org/fr/docs/Web/API/Document

 

—

 

 

function handler(e) {
  var txt = 'You clicked on a ' + e.target.nodeName + '\n';
  txt += 'The innerHTML is ' + e.target.innerHTML + '\n';
  txt += 'The text is ' + e.target.textContent + '\n';
  txt += 'The parentNode is ' + e.target.parentNode.nodeName + '\n';
  alert(txt)
}

document.addEventListener('click', handler, false)

 

<div>
  <div><span>Menu1</span></div><span>Menu2</span><span>Menu3</span>
</div>

—