Cet article décrit l'utilisation de JavaScript pour les nœuds de page Web. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
1. Concepts de base
Cette partie est appelée "html Dom". Le soi-disant DOM HTML est la page Web de chargement des règles de chargement, qui est une règle, qui est la formule de base des pages Web.
Autrement dit, toutes les pages Web doivent être écrites conformément aux règles de: <html> <body> </ body> </html> ... et également chargées selon ces règles.
Le soi-disant "nœud de page Web" est également une explication populaire du "nœud Dom". Par exemple, le contenu sous le nœud HTML est tout le contenu entre <html> </html>, et le contenu sous le nœud corporel est tout le contenu entre <body> </body>.
HTML DOM stipule comme suit: 1. L'ensemble du document est un nœud de document; 2. Chaque balise HTML (signification <body> <b Sweet> et d'autres balises HTML, plutôt qu'une balise <html> simple) est un nœud d'élément; 3. Le texte contenu dans l'élément HTML est un nœud de texte; 4. Chaque attribut HTML est un nœud d'attribut
Par exemple, vous pouvez dessiner une page dans l'arbre de nœud DOM suivant:
La définition officielle de HTML DOM est la suivante: HTML DOM est l'abréviation du modèle d'objet de document HTML, et HTML DOM est un modèle d'objet de document spécialement appliqué à HTML / XHTML. Les personnes familières avec le développement de logiciels peuvent comprendre HTML DOM en tant qu'API de page Web. Il traite chaque élément de la page Web comme des objets, afin que les éléments de la page Web puissent également être obtenus ou modifiés par le langage informatique. Par exemple, JavaScript peut utiliser HTML DOM pour modifier dynamiquement les pages Web.
L'utilisation de JavaScript peut facilement contrôler l'addition, la suppression, la modification et la recherche des nœuds de page Web pour ces nœuds DOM.
2. Objectifs de base
Utilisez JavaScript pour ajouter, supprimer, modifier et vérifier les nœuds des pages Web. Dans une page Web:
1. Le bouton "Ajouter le nœud", tout en ajoutant des options de nœud dans le menu déroulant associé au "bouton Remplacer". S'il y a 9 nœuds dans la page Web, aucun avertissement d'ajout et pop-up ne sera autorisé.
2. Le bouton "Supprimer le dernier nœud", tout en réduisant les options de nœud dans le menu déroulant associé au "bouton Remplacer".
3. Le bouton "Remplacer le contenu du nœud", sélectionnez d'abord le nœud à fonctionner, puis entrez le contenu à remplacer, et le nœud correspondant sera remplacé.
4. S'il n'y a pas de nœuds dans la page Web, aucune suppression ou remplacement ne sera autorisé et un avertissement pop-up ne sera donné.
3. Processus de production
Sans configurer un environnement, écrivez simplement le code suivant sur la page Web. Le code spécifique est le suivant, et les éléments suivants seront expliqués en partie:
Copiez le code de code comme suit: <! Doctype html public "- // w3c // pd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/pd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JSDivNode </Title>
<script type = "text / javascript">
var i = 0;
fonction créationode () {
if (i <9) {
i ++;
var option = document.CreateElement ("Option");
option.value = i;
option.innerhtml = "node" + i.toString ();
document.getElementById ("numéro"). APPENDCHILD (option);
var p = document.CreateElement ("p");
p.innerHtml = "node" + i.toString ();
document.getElementById ("D"). APPENDCHILD (P);
} autre
alerte ("Je vais bien, il y a trop de nœuds, je ne peux pas le faire ~");
}
fonction removenode () {
if (i> 0) {
je--;
var s = document.getElementById ("nombre");
S.Removechild (S.Lastchild);
var d = document.getElementById ("d");
D.Removechild (D.Lastchild);
} autre
alert ("pas de nœuds, supprimer un fil ~");
/ * var ps = d.getElementsByTagName ("p"); * /
/*Document.getElementByid("d").removechild(ps °9]); * /
}
fonction remplaceNode () {
if (i> 0) {
var d = document.getElementById ("d");
var p = document.CreateElement ("p");
p.innerhtml = document.getElementById ("texte"). valeur;
var ps = d.getElementsByTagName ("p")
D.ReplaceChild (p, ps [document.getElementById ("nombre"). Valeur - 1]);
} autre
alert ("pas de nœud, remplacer le fil ~");
}
</cript>
</ head>
<body>
<input type = "Button" value = "Create node" onClick = "Creenode ()" />
<entrée type = "bouton" value = "Supprimer le dernier nœud" onclick = "removenode ()" />
<select id = "nombre"> </ select>
<input type = "text" id = "text" />
<input type = "Button" value = "Rempacenode Content" onClick = "remplaceNode ()" />
<div id = "d">
</div>
</docy>
</html>
1. NODE
Copiez le code comme suit: <body>
<! - Button x2, les deux boutons ont des actions onClick pointant vers la fonction correspondante ->
<input type = "Button" value = "Create node" onClick = "Creenode ()" />
<entrée type = "bouton" value = "Supprimer le dernier nœud" onclick = "removenode ()" />
<! - Un menu déroulant sans nœuds enfants <option> est ajouté en même temps par le nœud Creenode (). ->
<select id = "nombre"> </ select>
<! - Entrez la boîte x1, faites attention à la définition de l'ID, remplacenode () pour obtenir la valeur de cette zone de texte ->
<input type = "text" id = "text" />
<! - Button x1, identique à Button x2 ->
<input type = "Button" value = "Rempacenode Content" onClick = "remplaceNode ()" />
<! - Une couche vide sans rien, car le nœud parent de <p>, tous les enfants de ce nœud <v> sont ajoutés
<div id = "d">
</div>
</docy>
2. NODE
Copiez le code comme suit: <adaft>
<! - Le codage et le titre utilisé par les pages Web ne sont pas importants, la clé est la partie de script JS suivante ->
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JSDivNode </Title>
<script type = "text / javascript">
/ * Enregistre les variables globales du nombre de nœuds dans la page Web actuelle * /
var i = 0;
/ * Il y a 3 fonctions ci-dessous. Lorsque le bouton est cliqué, il s'appelle * /
fonction créationode () {
/ * S'il y a moins de 9 nœuds dans la page Web, cela fonctionnera, sinon la fenêtre contextuelle * /
if (i <9) {
/ * Ajoutez un nœud de plus pour chaque enregistrement la variable globale i + 1 * /
i ++;
/ * Créez un nœud d'option, puis son nom de pointeur est également l'option * /
var option = document.CreateElement ("Option");
/ * Déclarer l'attribut de valeur du nœud d'option créé est la valeur actuelle de i, c'est-à-dire que lorsque i = 1, il existe des nœuds enfants tels que <Valeur d'option = 1> </ option>. * /
/ * Certaines pages Web disent que l'utilisation de la méthode setAttribute () pour définir des attributs, mais que personnellement, il n'est pas facile d'utiliser * /
option.value = i;
/ * Définissez le texte sous le nœud d'option. Après cette instruction, le nœud enfant devient <Valeur d'option = 1> node1 </opoption> * /
option.innerhtml = "node" + i.toString ();
/ * <lelect> L'ID du nœud parent est numéro. Cette instruction nécessite que la <Option Value = 1> Node1 </ Option> * / est ajoutée au nœud parent dans le <lect> </lect>
document.getElementById ("numéro"). APPENDCHILD (option);
/ * Le principe est le même que ci-dessus. Ajoutez le nœud enfant <p> sous le nœud parent <v>, et la valeur de texte sous le nœud enfant <p> est node1 * /
var p = document.CreateElement ("p");
p.innerHtml = "node" + i.toString ();
document.getElementById ("D"). APPENDCHILD (P);
} autre
alerte ("Je vais bien, il y a trop de nœuds, je ne peux pas le faire ~");
}
fonction removenode () {
/ * S'il y a plus de 0 nœuds dans la page Web, c'est-à-dire il y a des nœuds, et alors seule la fenêtre contextuelle est
if (i> 0) {
/ * Pour chaque réduction de nœud, la variable globale I-1 de la page Web actuelle est enregistrée.
je--;
/ * Définissez le pointeur vers le nœud parent de <lect> * /
var s = document.getElementById ("nombre");
/ * Supprimez le dernier nœud enfant sous le nœud parent de <lelect>, c'est-à-dire <option>. Si vous souhaitez supprimer le premier, le paramètre devient s.firstchild * /
S.Removechild (S.Lastchild);
/ * Le même principe que ci-dessus, supprimez le dernier nœud enfant sous la couche <v> * /
var d = document.getElementById ("d");
D.Removechild (D.Lastchild);
/ * Si vous souhaitez supprimer le 8ème <p> sous <V>, veuillez faire comme suit * /
/ * ps est un pointeur vers l'ensemble de nœuds enfants <p> * /
/ * var ps = d.getElementsByTagName ("p"); * /
/*Document.getElementByid("d").removechild(ps °9]); * /
} autre
alert ("pas de nœuds, supprimer un fil ~");
}
fonction remplaceNode () {
/ * S'il y a plus de 0 nœuds dans la page Web, c'est-à-dire il y a des nœuds, et alors seule la fenêtre contextuelle est
if (i> 0) {
/ * Définissez le pointeur vers le nœud parent d * /
var d = document.getElementById ("d");
/ * Créer un nœud <p> </p> * /
var p = document.CreateElement ("p");
/ * Obtenez le contenu entré dans la zone de texte et placez-le dans le nœud <p> </p> * /
p.innerhtml = document.getElementById ("texte"). valeur;
/ * ps est un pointeur vers l'ensemble de nœuds enfants <p> et le groupe de nœuds enfants sous le nœud parent <v> * /
var ps = d.getElementsByTagName ("p")
/ * Laissez le nœud que vous venez de créer remplacer le Nth <p> Nœud enfant sous <V>, où n est la valeur -1 sélectionnée dans la liste déroulante maintenant. La raison de -1 est que le décompte de l'ensemble du nœud enfant et le groupe d'enfants commencent à partir de 0, tandis que notre nombre humain commence à partir de 1. * /
D.ReplaceChild (p, ps [document.getElementById ("nombre"). Valeur - 1]);
} autre
alert ("pas de nœud, remplacer le fil ~");
}
</cript>
</ head>
J'espère que cet article sera utile à la programmation JavaScript de tous.