Maison > interface Web > js tutoriel > Méthode JavaScript pour obtenir le prochain nœud de compétences dom_javascript

Méthode JavaScript pour obtenir le prochain nœud de compétences dom_javascript

WBOY
Libérer: 2016-05-16 16:37:01
original
1440 Les gens l'ont consulté

Utilisez javascript pour écrire une méthode permettant d'additionner des nombres en cliquant sur les boutons d'ajout et de soustraction de la page.

Le simple HTML est probablement comme ça. Comprenez simplement et ne vous inquiétez pas de ces détails

<input type="button" value="+" onclick="jia(this)" />
<label class="num">0</label>
<input type="button" value="-" onclick="jian(this)" />
Copier après la connexion

Ça ressemble à ça

Le code javascript est le suivant

<script type="text/javascript">
function jia(a)
{
var nextnode = a.nextElementSibling;//获取下一个节点

alert(nextnode.innerHTML);
var a = parseInt(nextnode.innerHTML)
a += 1;
nextnode.innerHTML = a;
}
function jian(a) {
var previousnode = a.previousElementSibling;
var a = parseInt(previousnode.innerHTML)
a -= 1;
a = a > 0 &#63; a : 0;
previousnode.innerHTML = a;
}
</script>
Copier après la connexion

Expliquez :

fonction jian(a) et

la fonction jia(a) est l'objet actuellement cliqué. Ajoutez ceci à la méthode d'événement onclick ;

- nextElementSibling Obtient le nœud suivant du nœud actuel (obtient le nœud frère suivant)
- previousElementSibling obtient le nœud précédent du nœud actuel

Remarque : IE ignorera les nœuds de document d'espace (tels que les caractères de nouvelle ligne) générés entre les nœuds, mais Mozilla ne le fera pas - FF lira les éléments de mise en page tels que l'espace et les caractères de nouvelle ligne en tant que nœuds, donc l'élément de nœud suivant qui peut être lu en utilisant nextSibling dans IE doit être écrit comme ceci dans FF : nextElementSibling.

L'explication ci-dessus signifie utiliser nextElementSibling et previousElementSibling pour obtenir le nœud frère suivant et le nœud frère précédent. Vous pouvez supprimer les sauts de ligne, les espaces, etc., et trouver directement notre élément d'étiquette. Mais les deux suivants

suivantSibling
previousSibling fait également référence au nœud frère suivant et au nœud frère précédent, mais il est facile à utiliser dans IE
--------------------Explication des mots-clés

fonction de conversion parseInt.

a = a > 0 ? a : 0;----expression ternaire.

Étiquettes associées:
dom
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal