Voir tous les tags-
Par White Tendance le 19 Octobre 2018 à 04:20
Les objets HTML suivants (et des collections d'objets) sont également accessibles:
-
Par White Tendance le 18 Octobre 2018 à 17:35
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..
-
Par White Tendance le 18 Octobre 2018 à 15:34
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.
-
Par White Tendance le 18 Octobre 2018 à 14:59
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.
-
Par White Tendance le 18 Octobre 2018 à 10:00
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 .
Suivre le flux RSS des articles de cette rubrique
Créer mon blog