Comment utiliser les balises HTML avec Javascript

JavaScript est un langage de script côté client qui peut être utilisé pour exploiter des balises HTML dans des pages Web afin d'obtenir des effets dynamiques et une interaction utilisateur.

La première chose à souligner est que JavaScript n'exploite pas directement les balises HTML créées, mais obtient une référence à la balise spécifiée, puis utilise les propriétés et méthodes de JavaScript pour modifier et contrôler la balise.

Tout d'abord, nous devons obtenir la référence de la balise spécifiée. Les méthodes couramment utilisées sont les suivantes :

1. Utilisez l'attribut id
   Définissez l'attribut id dans la balise HTML et utilisez la méthode document.getElementById() en JavaScript pour obtenir une référence à la balise. Par exemple :

Code HTML

<div id="myDiv">这是一个Div标签</div>

Code JavaScript

var myDiv = document.getElementById("myDiv");

2. Utilisez l'attribut class
   pour définir l'attribut class dans la balise HTML et utilisez la méthode document.getElementsByClassName() en JavaScript pour obtenir des références à toutes les balises de cette classe. Par exemple :

Code HTML

<div class="myClass">这是一个class为myClass的Div标签</div>
<div class="myClass">这是另一个class为myClass的Div标签</div>

Code JavaScript

var myDivs = document.getElementsByClassName("myClass");

3. Utilisation des noms de balises
   Utilisez la méthode document.getElementsByTagName() en JavaScript pour obtenir des références à toutes les balises portant le nom de balise spécifié. Par exemple :

Code HTML

<div>这是一个Div标签</div>
<p>这是一个P标签</p>

Code JavaScript

var divs = document.getElementsByTagName("div");//获取所有的div标签
var p = document.getElementsByTagName("p");//获取所有的p标签

4. Utilisation de la méthode querySelector()
   Utilisez la méthode document.querySelector() en JavaScript pour obtenir une référence à la première balise correspondante du sélecteur spécifié. Par exemple :

Code HTML

这是一个class为myClass的Div标签
<div id="myDiv">这是一个Div标签</div>

Code JavaScript

var myDiv = document.querySelector("#myDiv");//获取id为myDiv的标签
var myClass = document.querySelector(".myClass");//获取class为myClass的第一个标签

Après avoir obtenu la référence de la balise spécifiée, vous pouvez utiliser les propriétés et méthodes en JavaScript pour faire fonctionner la balise Html. Les opérations couramment utilisées sont les suivantes :

1. Modifier le contenu et les attributs de la balise
   Vous pouvez utiliser l'attribut innerHTML et la méthode setAttribute() de la balise pour modifier le contenu et les attributs de la balise. Par exemple :

Code JavaScript

myDiv.innerHTML = "我是新内容";//修改myDiv的内容为"我是新内容"
myDiv.setAttribute("class", "newClass");//将myDiv的class属性改成"newClass"

2. Afficher ou masquer les étiquettes
   Vous pouvez utiliser l'attribut style.display de l'étiquette pour contrôler l'affichage ou le masquage de l'étiquette. Par exemple :

Code JavaScript

myDiv.style.display = "none";//将myDiv标签隐藏

3. Ajouter ou supprimer des balises
   Vous pouvez utiliser la méthode createElement() pour créer une nouvelle balise, utiliser la méthode appendChild() pour ajouter une nouvelle balise à la balise spécifiée et utiliser le Méthode RemoveChild() pour supprimer la balise spécifiée de Removed de l’élément parent. Par exemple :

Code JavaScript

var newDiv = document.createElement("div");//创建新的div标签
newDiv.innerHTML = "我是新添加的div";//设置新标签的内容
myDiv.appendChild(newDiv);//将新标签添加到myDiv中
myDiv.parentNode.removeChild(myDiv);//将myDiv从它的父标签中删除

En résumé, en obtenant la référence de la balise spécifiée, vous pouvez utiliser la balise Html en JavaScript pour obtenir des effets dynamiques et des fonctions interactives de la page Web. Bien sûr, ce n'est que la pointe de l'iceberg dans la façon dont JavaScript exploite les balises HTML. Il existe encore de nombreuses techniques puissantes qui attendent que nous les explorions et les mettions en pratique.

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!