Distinguer les attributs DOM et les attributs d'élément

Distinguer les attributs DOM des attributs d'élément

Une balise img :

<img src="images/image.1.jpg" id="hibiscus" alt= " Hibiscus" class="classA" />

Habituellement, les développeurs ont l'habitude d'appeler id, src, alt, etc. les "attributs" de cet élément. Nous appelons cela « attribut d’élément ». Cependant, lors de l'analyse dans un objet DOM, le navigateur réel analysera finalement l'élément tag en un "objet DOM" et stockera les "attributs d'élément" de l'élément en tant qu'"attributs DOM".

Bien que nous définissions le src de l'élément comme étant un chemin relatif :

images/image.1.jpg

Mais tout apparaîtra dans les "Attributs DOM" Convertir en chemin absolu :

http://localhost/images/image.1.jpg

Même les noms de certains "attributs d'éléments " et "Attributs DOM" sont différents. Par exemple, la classe d'attributs d'élément ci-dessus est convertie en attribut DOM et correspond à className.

Gardez à l'esprit qu'en javascript nous pouvons directement obtenir ou définir des "attributs DOM":

<script type="text/javascript">
$(function ( ) { var img1 = document.getElementById("hibiscus");
alert(img1.alt);
img1.alt = "Modifier l'attribut de l'élément alt";
alert(img1.alt) ;
})</script>

Donc, si vous souhaitez définir la classe de style CSS d'un élément, vous devez utiliser l'attribut DOM "className" au lieu de l'attribut d'élément "class :

img1.className = "classB";

Il n'y a pas de fonction wrapper pour exploiter les "attributs DOM" dans jQuery, car il est très simple à obtenir et à définir "Attributs DOM" utilisant javascript. Fourni dans jQuery La fonction each() est utilisée pour parcourir l'ensemble de packages jQuery. Le pointeur this est un objet DOM, nous pouvons donc l'appliquer avec du javascript natif pour faire fonctionner les attributs DOM de l'élément :

   $("img").each(function(index) {    
      alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);    
     this.alt = "changed";    
        alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);    
     });

Ce qui suit est la description de chaque fonction :

each( callback ) Renvoie : jQuery wrapper set

exécute la méthode de rappel pour chaque élément dans l'ensemble de wrapper. La méthode de rappel accepte un paramètre, indiquant la valeur d'index actuellement parcourue, à partir de 0.


Formation continue
||
<!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel