Maison >interface Web >js tutoriel >Que sont les sélecteurs hiérarchiques js ?
Que sont les sélecteurs hiérarchiques js ?
- 百草original
- 2023-10-07 16:56:321241parcourir
Les sélecteurs hiérarchiques
js incluent getElementById, getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll, parentNode, children, previousSibling et nextSibling, etc. Introduction détaillée : 1. getElementById, utilisez l'attribut ID de l'élément à sélectionner, etc.
Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.
Le sélecteur hiérarchique en JavaScript peut être utilisé pour sélectionner et faire fonctionner des éléments dans l'arborescence DOM, en sélectionnant en fonction de la relation hiérarchique des éléments. Voici les sélecteurs hiérarchiques courants en JavaScript :
1. getElementById : utilisez l'attribut ID de l'élément à sélectionner. En définissant un attribut ID unique sur un élément, vous pouvez le sélectionner à l'aide de la méthode getElementById. Par exemple, `document.getElementById("myElement")` sélectionne l'élément avec l'ID "myElement".
2. getElementsByTagName : utilisez le nom de balise de l'élément à sélectionner. En spécifiant le nom de balise d'un élément, vous pouvez utiliser la méthode getElementsByTagName pour sélectionner tous les éléments portant ce nom de balise. Par exemple, `document.getElementsByTagName("div")` sélectionne tous les éléments `
3. getElementsByClassName : utilisez le nom de classe de l'élément à sélectionner. En spécifiant le nom de classe d'un élément, vous pouvez utiliser la méthode getElementsByClassName pour sélectionner tous les éléments portant ce nom de classe. Par exemple, `document.getElementsByClassName("red")` sélectionne tous les éléments portant le nom de classe "red".
4. querySelector : utilisez le sélecteur CSS pour sélectionner. En utilisant la syntaxe du sélecteur CSS, vous pouvez utiliser la méthode querySelector pour sélectionner le premier élément qui répond à une condition spécifiée. Par exemple, `document.querySelector(".red")` sélectionnerait le premier élément avec le nom de classe "red".
5. querySelectorAll : utilisez les sélecteurs CSS pour sélectionner. Semblable à la méthode querySelector, la méthode querySelectorAll sélectionne tous les éléments qui répondent aux conditions spécifiées et renvoie une liste d'éléments. Par exemple, `document.querySelectorAll("div")` sélectionnera tous les éléments `
6. parentNode : sélectionnez l'élément parent de l'élément. Le parent immédiat d'un élément peut être sélectionné à l'aide de l'attribut parentNode. Par exemple, `element.parentNode` peut sélectionner l'élément parent de l'élément element.
7. enfants : Sélectionnez les éléments enfants de l'élément. En utilisant l'attribut children, vous pouvez sélectionner les enfants directs d'un élément. Par exemple, `element.children` sélectionne tous les éléments enfants de l'élément element.
8. previousSibling : Sélectionnez l'élément frère précédent de l'élément. En utilisant l'attribut previousSibling, vous pouvez sélectionner l'élément frère précédent d'un élément. Par exemple, `element.previousSibling` sélectionne le frère précédent d'un élément.
9. nextSibling : sélectionnez l'élément frère suivant de l'élément. En utilisant l'attribut nextSibling, vous pouvez sélectionner l'élément frère suivant d'un élément. Par exemple, `element.nextSibling` peut sélectionner l'élément frère suivant de l'élément element.
Les sélecteurs hiérarchiques ci-dessus sont courants en JavaScript. Ils peuvent sélectionner et exploiter des éléments dans l'arborescence DOM en fonction de la relation hiérarchique des éléments. En utilisant rationnellement ces sélecteurs hiérarchiques, nous pouvons sélectionner et manipuler avec précision des éléments spécifiques, obtenir des effets riches et diversifiés et améliorer l'expérience utilisateur et l'interactivité des pages.
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!