Voir tous les tags-
Trouver des éléments HTML par Collections d'objets HTML
Cet exemple trouve l'élément de forme avec id = « frm1 », dans la collection de formulaires, et affiche toutes les valeurs des éléments:
Exemple
var x = document.forms["frm1"];
var text = "grange";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("").innerHTML = text;Exemple
<!DOCTYPE html>
<html>
<body><h2>Recherche d'éléments HTML par document.forms</h2>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" style="background-color: #000000; color: #ffffff;" value="Ne pas cliquer ici" >
</form><p>Cliquez sur "Essayez-le" pour afficher la valeur de chaque élément du formulaire..</p>
<button onclick="clique()"><span style="background-color: #000000; color: #ffffff;"><strong>Essayez-le</strong></span></button>
<p id="Porte"></p>
<script>
function clique() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("Porte").innerHTML = text;
}
</script><button onclick="recharge()"><span style="background-color: #000000; color: #ffffff;">Rechargez la page</span></button>
<script>
function recharge() {
location.reload();
}
</script></body>
</html>Résultat de l'exemple
Recherche d'éléments HTML par document.forms
Cliquez sur "Essayez-le" pour afficher la valeur de chaque élément du formulaire..
-
Trouver des éléments HTML par sélecteurs CSS
Si vous voulez trouver tous les éléments HTML qui correspond à un sélecteur CSS spécifié (id, noms de classe, les types, les attributs, les valeurs des attributs, etc.), utilisez la méthode querySelectorAll ().
Cet exemple retourne une liste de tous les éléments <p> class = « maison ».
var x = document.querySelectorAll("p.maison");
Exemple
<h2>Recherche d'éléments HTML par Query Selector</h2>
<p>Hello!</p>
<p class="maison">Le Dom est très utilisé.</p>
<p class="maison">Cet exemple démontre la méthode <strong>querySelectorAll</strong>.</p><p id="auto"></p>
<script>
var x = document.querySelectorAll("p.maison");
document.getElementById("auto").innerHTML =
'Le premier paragraphe (index 0) avec class="maison": ' + x[0].innerHTML;</script>
<button onclick="resultat()"><span style="color: #00ccff;">Vous pouvez changer le texte ici</span></button>
<script>
function resultat() {
document.getElementById("auto").innerHTML = 'Le second paragraphe (index 1) avec class="maison": ' + x[1].innerHTML;
}
</script>Résultat de l'exemple
Recherche d'éléments HTML par Query Selector
Hello!
Le Dom est très utilisé.
Cet exemple démontre la méthode querySelectorAll.
-
Trouver des éléments HTML par Nom de la classe
Si vous voulez trouver tous les éléments HTML avec le même nom de classe, utilisez getElementsByClassName ().
Cet exemple retourne une liste de tous les éléments avec class = « chien ».
var x = document.getElementsByClassName("chien");Exemple
<h2>Recherche d'éléments HTML par Class</h2>
<p>Salut à tous!</p>
<p class="chien">Le Dom est très utilisé.</p>
<p class="chien">Cet exemple démontre la méthode <strong>getElementsByClassName</strong>.</p>
<p id="chat"> </p>
<script>
var x = document.getElementsByClassName("chien");
document.getElementById("chat").innerHTML =
'Le premier paragraphe (index 0) avec class="chien": ' + x[0].innerHTML;
</script>
<button onclick="donneresultat()"><span style="color: #00ccff;">Vous pouvez changer le texte ici</span></button>
<script>
function donneresultat() {
document.getElementById("chat").innerHTML = 'Le second paragraphe (index 1) avec class="chien": ' + x[1].innerHTML;
}
</script>Résultat de l'exemple
Recherche d'éléments HTML par Class
Salut à tous!
Le Dom est très utilisé.
Cet exemple démontre la méthode getElementsByClassName.
-
Trouver l'élément HTML par Id
La meilleure façon de trouver un élément HTML dans le DOM, est en utilisant l'identifiant de l'élément.
Cet exemple trouve l'élément avec id = « intro »:
var myElement = document.getElementById("intro");
Si l'élément est trouvé, la méthode retourne l'élément comme un objet (en myElement).
Si l'élément ne se trouve pas, myElement contiendra nulle.
Exemple
<!DOCTYPE html>
<html>
<body>
<h2>Recherche d'éléments HTML par id</h2>
<p id="intro">Bonjour le monde!</p>
<p>Cet exemple démontre la métode <b>getElementsById</b> .</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"Le texte du paragraphe d'introduction est " + myElement.innerHTML;
</script><script>
<button onclick="displayResult()"><span style="color: #00ccff;">Vous pouvez changer le texte ici</span></button>
<script>
function displayResult() {
document.getElementById("intro").innerHTML = "Bonne journée!";
}
</script>
</body>
</html>Résultat de l'exemple
Recherche d'éléments HTML par id
Bonjour le monde!
Cet exemple démontre la méthode getElementsById .
-
JavaScript DOM HTML Elements
Cette page vous enseigne comment trouver et éléments HTML d'accès dans une page HTML.
Trouver des éléments HTML
Souvent, avec JavaScript, vous souhaitez manipuler des éléments HTML.
Pour ce faire, vous devez trouver les premiers éléments. Il y a plusieurs façons de faire ça:
- Trouver des éléments HTML par id
- Trouver des éléments HTML par nom de la balise
- Trouver des éléments HTML par nom de classe
- Trouver des éléments HTML par sélecteurs CSS
- Trouver des éléments HTML par des collections d'objets HTML
Créer mon blog