js change le HTML

Avec le développement continu d'Internet, l'interactivité des pages Web devient de plus en plus importante, et JavaScript, en tant que langage de script, peut très bien réaliser l'interaction des pages Web. Parmi elles, la modification des éléments HTML est l'une des fonctions importantes de JavaScript, qui permet aux pages Web d'obtenir des effets interactifs plus riches.

Méthode JavaScript de modification des éléments HTML

1. getElementById
   getElementById est une méthode couramment utilisée en JavaScript En définissant un ID sur l'élément, vous pouvez obtenir l'élément qui doit être modifié via cette méthode. L'utilisation spécifique est la suivante :

var element = document.getElementById("elementID");

Parmi eux, elementID est l'ID de l'élément qui doit être modifié.

2. getElementsByClassName
   La méthode getElementsByClassName est similaire à getElementById, mais vous pouvez obtenir plusieurs éléments en spécifiant le nom de la classe. L'utilisation spécifique est la suivante :

var elements = document.getElementsByClassName("className");

Parmi eux, className est le nom de classe de l'élément qui doit être modifié, et un tableau est renvoyé.

3. getElementsByTagName
   La méthode getElementsByTagName peut obtenir plusieurs éléments via le nom de la balise d'élément. Par exemple, vous pouvez obtenir toutes les balises

   L'utilisation spécifique est la suivante :

var elements = document.getElementsByTagName("tagName");

Parmi eux, tagName est le nom de balise de l'élément qui doit être modifié, et un tableau est renvoyé.

4. querySelector
   La méthode querySelector peut obtenir un élément via un sélecteur CSS. Par exemple, vous pouvez obtenir un élément avec la classe "exemple" via cette méthode. L'utilisation spécifique est la suivante :

var element = document.querySelector(".example");

Parmi eux, ".example" est le sélecteur de classe CSS de l'élément qui doit être obtenu, et seul le premier élément correspondant est renvoyé. La méthode

5. querySelectorAll
   querySelectorAll est similaire à querySelector, mais peut obtenir tous les éléments correspondants. L'utilisation spécifique est la suivante :

var elements = document.querySelectorAll(".example");

Parmi eux, ".example" est le sélecteur de classe CSS de l'élément qui doit être obtenu, et un tableau est renvoyé.

JavaScript modifie les attributs et le contenu des éléments HTML

Après avoir obtenu l'élément qui doit être modifié, vous pouvez obtenir l'effet de modification en définissant ses attributs ou son contenu. La méthode spécifique est la suivante :

1. Modifier les attributs de l'élément
   Vous pouvez modifier les attributs de l'élément HTML via les attributs JavaScript, comme modifier l'attribut src de l'image, ou l'attribut href du lien, etc. L'utilisation est la suivante :

element.attribute = value;

où attribut est le nom de l'attribut qui doit être modifié et valeur est la nouvelle valeur de l'attribut. Par exemple, pour modifier l'attribut src d'une image en un nouveau lien, vous pouvez écrire :

var img = document.getElementById("myImg");
img.src = "newImg.jpg";

2. Modifier le contenu de l'élément
   Vous pouvez utiliser JavaScript pour modifier le contenu de l'élément HTML, comme modifier le contenu du texte du paragraphe ou en modifiant le contenu du titre. L'utilisation est la suivante :

element.innerHTML = newContent;

Parmi eux, newContent signifie qu'un nouveau contenu est requis. Par exemple, pour modifier le contenu du texte d'un paragraphe, vous pouvez écrire comme ceci :

var p = document.querySelector(".example");
p.innerHTML = "这是一个新的文本内容";

JavaScript modifie le style des éléments HTML

En plus de modifier les attributs et le contenu des éléments HTML, JavaScript peut également modifier le style des éléments pour donner à la page Web une plus belle apparence. L'utilisation spécifique est la suivante :

element.style.property = value;

Parmi eux, property est le nom de l'attribut de style CSS qui doit être modifié, et value est la nouvelle valeur de l'attribut. Par exemple, pour modifier la couleur d'arrière-plan d'un élément, vous pouvez écrire :

var element = document.getElementById("myDiv");
element.style.backgroundColor = "red";

JavaScript modifie la classe des éléments HTML

JavaScript peut également obtenir des effets de style plus riches en modifiant la classe des éléments HTML. L'utilisation est la suivante :

element.className = "newClassName";

Parmi eux, newClassName est le nouveau nom de classe qui doit être attribué à l'élément. Par exemple, l'ajout d'une nouvelle classe à un élément peut être écrit comme ceci :

var element = document.querySelector(".example");
element.className = "newClass";

Résumé

La modification des éléments HTML en JavaScript est une méthode importante pour obtenir une interaction avec une page Web en obtenant les éléments qui doivent être modifiés, les attributs de l'élément, le contenu, le style et la classe peuvent être modifiés. La maîtrise de ces méthodes peut nous permettre d'obtenir des effets interactifs plus riches lors du développement Web.

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!