méthode HTML js

JavaScript et HTML sont deux composants nécessaires à toute page Web moderne. HTML est la construction et la représentation de la structure et du contenu des pages Web, tandis que JavaScript est un langage de programmation pour l'interactivité et la dynamique. Lors du développement de pages Web, la maîtrise du HTML et du JavaScript est indispensable. Dans cet article, nous aborderons certaines méthodes JavaScript et HTML courantes.

1. Méthode HTML

1. innerHTML

innerHTML est un attribut de l'élément HTML, qui nous permet d'insérer du contenu HTML dans l'élément spécifié. Par exemple, si nous voulons insérer un morceau de texte dans l'élément avec l'identifiant "exemple", nous pouvons utiliser le code suivant :

document.getElementById("example").innerHTML = "这是一段文字";

2. appendChild

La méthode appendChild nous permet d'ajouter un élément enfant à un HTML élément. Par exemple, si nous voulons ajouter un paragraphe à l'élément avec l'identifiant "exemple", nous pouvons utiliser le code suivant :

var p = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
p.appendChild(node);

var element = document.getElementById("example");
element.appendChild(p);

Dans cet exemple, nous créons d'abord un élément

. Ensuite, nous trouvons l'élément avec l'identifiant "exemple" et y ajoutons le nouveau paragraphe que nous avons créé à l'aide de la méthode appendChild.

3. setAttribute

La méthode setAttribute nous permet d'ajouter un attribut à un élément HTML. Par exemple, si nous voulons ajouter un attribut de classe à l'élément avec l'identifiant "exemple", nous pouvons utiliser le code suivant :

var element = document.getElementById("example");
element.setAttribute("class", "new-class");

Dans cet exemple, nous trouvons d'abord l'élément avec l'identifiant "exemple" puis utilisons l'attribut Méthode setAttribute à Elle ajoute un attribut de classe. La valeur de cet attribut est « new-class ».

2. Méthode JavaScript

1. getElementById

La méthode getElementById nous permet de rechercher et de sélectionner l'élément via son attribut id. Par exemple, si nous voulons sélectionner l'élément avec l'identifiant "exemple" et changer son contenu en "Ceci est un nouveau contenu", nous pouvons utiliser le code suivant :

document.getElementById("example").innerHTML = "这是新的内容";

2. querySelector

La méthodequerySelector nous permet de passer un CSS sélecteur Sélectionner et sélectionner un élément. Par exemple, si nous voulons sélectionner le premier élément de paragraphe avec la classe « exemple » et changer son contenu en « Ceci est un nouveau contenu », nous pouvons utiliser le code suivant :

document.querySelector("p.example").innerHTML = "这是新的内容";

Dans cet exemple, nous utilisons la méthode querySelector Sélectionnez le élément du premier paragraphe avec la classe "exemple" et modifiez son contenu en "Ceci est un nouveau contenu" à l'aide de l'attribut innerHTML. La méthode

3. addEventListener

addEventListener nous permet d'ajouter des écouteurs d'événements pour des événements spécifiés. Par exemple, si nous voulons ajouter un écouteur d'événement click pour l'élément avec l'identifiant "exemple", nous pouvons utiliser le code suivant :

document.getElementById("example").addEventListener("click", function(){
  alert("您单击了'example'元素！");
});

Dans cet exemple, nous avons ajouté un écouteur pour l'événement click en utilisant la méthode addEventListener. . Lorsque l'utilisateur clique sur l'élément portant l'identifiant « exemple », une boîte d'alerte apparaîtra.

Conclusion

Dans cet article, nous avons discuté de certaines méthodes JavaScript et HTML courantes. Ces méthodes sont très importantes pour le développement de pages Web et constituent la base de la création d'interfaces utilisateur interactives et dynamiques. Si vous souhaitez devenir plus compétent dans l'utilisation de ces méthodes lors de la rédaction de pages Web, nous vous recommandons d'apprendre d'abord les bases de JavaScript et de HTML, puis de consacrer du temps à lire la documentation et à pratiquer l'utilisation de ces méthodes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!