Méthode JavaScript pour obtenir directement des éléments via les compétences element id et name_javascript

L'exemple de cet article décrit comment JavaScript peut obtenir directement des éléments via l'identifiant et le nom de l'élément. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Nous savons que certaines bibliothèques js tierces ont apporté quelques simplifications sur la façon de sélectionner rapidement des éléments en HTML. Elles semblent très mystérieuses, mais en fait elles ne le sont pas. De plus, js lui-même est livré avec une méthode simple pour sélectionner des éléments spéciaux, je la présenterai brièvement ci-dessous.

En HTML, le moyen le plus direct d'identifier les éléments HTML est généralement les attributs name et id, qui sont légèrement différents : l'id doit être unique à la page, mais le nom peut être répété.

En js, si le nom de l'identifiant n'a pas le même nom qu'un attribut intégré ou une variable globale, le nom devient automatiquement un attribut de l'objet window, et dans l'environnement de niveau supérieur d'une page html, il y a :

this === window

Donc, si nous écrivons un code d'élément html comme celui-ci, nous pouvons le référencer comme ceci :

<input type="button" id="btn_ok" value="Ok" onclick="..." />
//可以这样引用
btn_ok.onclick = function(){};
//或者下面也是一样的
window.btn_ok.style = ...;

Pour l'attribut name, seuls certains types d'éléments html ont des méthodes similaires, telles que : form, img, iframe, applet, embed, object, etc. Dans ces éléments, les éléments avec des attributs de nom spécifiques sont accessibles via des variables globales ou des attributs de document ; s'il existe plusieurs éléments avec le même attribut de nom, un objet tableau en lecture seule de type NodeList est renvoyé, tel que le code suivant :

<div>
  <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" alt="pic_0" />
  <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" alt="pic_1" />
  <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" alt="pic_2" />
</div>
//我们可以这样引用name为pic的元素：
for(x in pic)
 console.log(pic[x].alt);
//或者是非"标准"语法each语句方式
for each(img in pic)
 console.log(img.alt);

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.