Manipulation du DOM avec JavaScript et jQuery

001 1 , créer un nœud d'élément

002 Méthode javascript traditionnelle, créer un nœud d'élément

003 var a = document.createElement("p"); La méthode de création de nœuds dans jQuery est :

005 $('< p>< /p>');

006 Comme createElement(), le nouveau nœud d'élément créé ne sera pas créé. être automatiquement ajouté au document.

007 Si vous souhaitez l'ajouter au document, vous pouvez utiliser la méthode append() ou insertAfter() ou la méthode before() dans jQuery.

008 Par exemple :

009 var a = $('< p>< /p>');

010 $('body').append ( a);//Ajouter à la fin de l'élément body

011

012

013 2. Créer un nœud de texte :

014 Traditionnel. méthode javascript, créer un nœud de texte

015 var b = document.createTextNode("my demo");

016 Généralement, la création d'un nœud de texte et la création d'un nœud d'élément sont utilisées ensemble

017 Par exemple :

018 var mes = document.createTextNode("hello world");

019 var containers = document.createElement("p"); 020 containers.appendChild (mes);

021 document.body.appendChild(container);

022

023 La création de nœuds dans jQuery ne doit pas être si compliquée :

024 $('< p>hello world< /p>');

025 Comme createElement(), le nouveau nœud d'élément créé ne sera pas automatiquement ajouté au document.

026 Si vous souhaitez l'ajouter au document, vous pouvez utiliser la méthode append() ou insertAfter() ou la méthode before() dans jQuery.

027 Par exemple :

028 var a = $('< p>hello world< /p>');

029 $('body'). append (a);//Ajouter à la fin de l'élément body

030

031 3. Copier le nœud

032 Méthode javascript traditionnelle, copier le nœud :

033 Par exemple :

034 var mes = document.createTextNode("hello world");

035 var containers = document.createElement("p");

036 containers.appendChild(mes);

037 document.body.appendChild(container);

038 var newpara = containers.cloneNode(true);//La différence entre true et faux

039 document.body.appendChild(newpara);

040 Remarque :

041 vrai : est

042 false : Seul

< /p> sera cloné, le texte à l'intérieur ne sera pas cloné.

043 Vous pouvez utiliser Firebug pour voir.

044

045 Copier le nœud dans jQuery :

046 var a = $('< p>hello world< /p>');

047 $('body').append(a);

048 var clone_a = a.clone();

049 $('body').append(clone_a); 🎜>

050

051 Comme createElement(), le nouveau nœud d'élément copié ne sera pas automatiquement ajouté au document.

052 Si vous souhaitez l'ajouter au document, vous pouvez utiliser la méthode append() ou insertAfter() ou la méthode before() dans jQuery.

053 Autre remarque : si l'ID est le même après le clonage, n'oubliez pas d'utiliser .attr("id","new_id") pour changer l'ID du nouveau nœud.

054 " endChild () :

059 Ajoutez un nœud enfant à l'élément et insérez le nouveau nœud à la fin.

060 var conteneur = document.createElement("p");

061 document.body.appendChild(container);

062

063 insertBefore() :

064 Comme son nom l'indique, il insère un nouveau nœud devant le nœud cible.

065 Element.insertBefore( newNode , targerNode );

066

067 L'insertion de nœuds dans jQuery est bien plus que ce que javascript est fourni,

068 Par exemple :

069 .append()

070 .appendTo()

071 .prepend()

072 .prepend To()

073 .after()

074 .insertAfter()

075 .before()

076 .insertBefore() Alors oui La simplification des opérations DOM est aussi l'un des points forts de jquery.

078

079

080 5, supprimer des nœuds

081 méthode javascript traditionnelle, supprimer des nœuds :

082 par exemple :

083 var b = document.getElementById("b");

084 var c = b.parentNode; 085 c.removeChild(b); 🎜>086

087 Supprimer le nœud dans jQuery :

088 Par exemple :

089 $('#test2').remove();

090

091 6. Remplacer le nœud

092 Méthode javascript traditionnelle, remplacer le nœud :

093 Par exemple :

094 Element.repalceChild( newNode , oldNode );

095 oldNode doit être un nœud enfant d'Element.

096

097 Nœud de remplacement dans jQuery :

098 Par exemple :

099 $("< p>Remplacez test1! < / p> ;").replaceAll("#test1");

100

101 7, définir les attributs, obtenir les attributs

102 Méthode javascript traditionnelle, définir les attributs, obtenir les attributs :

103 Par exemple :

104 setAttribute();//Set

105 var a = document.createElement("p");

106 a.setAttribute("title","my demo");

107 Qu'il y ait eu ou non un attribut title auparavant, la valeur future sera ma démo.

108

109 getAttribute();//Get

110 var a =document.getElementById("cssrain");

111 var b = a.getAttribute("title");

112 Lors de l'obtention, si l'attribut n'existe pas, il retournera vide,

113

114 Définition des attributs dans jQuery, Obtenir les attributs :

115 Par exemple :

116 $("#test1").attr({ "class" : "test" , "title" : "TestDemo!" });

117 $("#test1").attr("class");

118

119 8. Rechercher un nœud

120 Rechercher une paire de nœuds jQuery C'est un jeu d'enfant.

121 La chose la plus intéressante à propos de jQuery est le nœud de recherche, communément appelé sélecteur

122. Par exemple :

123. $ ('#id')

124 $('.class')

125 $('tag')

126 $('tag.class')

127 $('#id tag')

128 $('tag#id')

129 $('#id:visible')

130 $('#id .class')

131 $('.class .class')

132 ....

Ce qui précède est le DOM de JavaScript et jQuery Le contenu de l'opération, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !