javascript sélectionner modifier

JavaScript est un langage de programmation largement utilisé dans le développement Web. Il peut obtenir des effets dynamiques sur les pages Web en sélectionnant des éléments DOM et en les modifiant. Cet article couvre la sélection et la modification en JavaScript.

Sélection

JavaScript peut sélectionner les éléments DOM des manières suivantes :

1. Sélecteur de nom de balise

Utilisez le sélecteur de nom de balise pour sélectionner tous les éléments portant ce nom de balise dans la page Web. Par exemple, sélectionnez tous les éléments p :

var pElements = document.getElementsByTagName("p");

2. Sélecteur d'ID

Utilisez le sélecteur d'ID pour sélectionner des éléments avec un ID spécifique. Par exemple, sélectionnez l'élément avec l'ID "myDiv" :

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

3 sélecteur de classe

Utilisez le sélecteur de classe pour sélectionner des éléments avec un nom de classe spécifique. Par exemple, sélectionnez des éléments avec la classe "myClass":

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

4. Sélecteur d'attribut

Utilisez des sélecteurs d'attribut pour sélectionner des éléments avec des attributs spécifiques. Par exemple, pour sélectionner tous les éléments avec l'attribut "data-type" :

var elementsWithType = document.querySelectorAll("[data-type]");

Modify

Avec la méthode select element, JavaScript peut également modifier l'élément sélectionné.

1. Modifier le contenu textuel de l'élément

Vous pouvez modifier le contenu textuel de l'élément en modifiant l'attribut innerHTML de l'élément. Par exemple, changez le contenu du texte de l'élément avec l'ID "myDiv" en "Hello World!" :

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello World!";

2 Modifier le style de l'élément

Vous pouvez changer le style CSS de l'élément en modifiant le style de l'élément. attribut. Par exemple, changez la couleur d'arrière-plan de l'élément avec l'ID "myDiv" en rouge :

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

3 Modifiez la classe de l'élément

Vous pouvez changer la classe de l'élément en modifiant l'attribut className de l'élément. Par exemple, changez la classe de l'élément avec l'ID « myDiv » en « newClass » :

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

4 Modifiez les attributs de l'élément

Vous pouvez changer d'autres attributs de l'élément en modifiant les attributs de l'élément. Par exemple, modifiez l'attribut alt de l'élément avec l'ID « myDiv » en « newAlt » :

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

Conclusion

JavaScript peut obtenir des effets dynamiques sur les pages Web en sélectionnant des éléments DOM et en les modifiant. Cet article présente la sélection et la modification en JavaScript, y compris les sélecteurs de nom de balise, les sélecteurs d'ID, les sélecteurs de classe, les sélecteurs d'attributs et la modification du contenu du texte, du style, de la classe et des attributs des éléments. La maîtrise de ces compétences permet aux développeurs d'utiliser JavaScript de manière plus flexible dans le développement de sites 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!