Maison  >  Article  >  interface Web  >  Javascript a-t-il des sélecteurs ?

Javascript a-t-il des sélecteurs ?

青灯夜游
青灯夜游original
2022-02-21 17:52:271805parcourir

javascript a des sélecteurs. Les sélecteurs js couramment utilisés incluent : getElementById(), getElementsByName(), getElementsByTagName(), querySelector(), querySelectorAll(), etc.

Javascript a-t-il des sélecteurs ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

javascript a des sélecteurs.

JavaScript est le plus couramment utilisé pour obtenir ou modifier le contenu ou la valeur d'éléments HTML et pour appliquer certains effets.

Pour ce faire, vous devez d'abord trouver l'élément. Le sélecteur javascript est utilisé pour faire correspondre les éléments. La méthode de recherche :

  • Rechercher des éléments HTML par ID

  • Rechercher des éléments HTML par nom de balise

  • Rechercher des éléments HTML par nom de classe

  • Sélectionner par CSS Rechercher Les éléments HTML via une collection d'objets HTML

  • Les sélecteurs js couramment utilisés sont : getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll().

Rechercher des éléments HTML par ID

Vous pouvez utiliser la méthode getElementById() pour sélectionner des éléments en fonction de leur ID unique. C'est le moyen le plus simple de trouver des éléments HTML dans l'arborescence DOM.

L'exemple suivant sélectionne un élément avec l'attribut ID id="msg":

var x = document.getElementById("msg");

Si l'élément est trouvé, la méthode renverra l'élément en tant qu'objet.

Si l'élément n'est pas trouvé, myElement contiendra null.

Rechercher des éléments HTML par nom de balise

Vous pouvez également sélectionner des éléments HTML par nom de balise en utilisant la méthode getElementsByTagName(). Cette méthode renvoie une liste sous forme de tableau de tous les éléments du document avec le nom de balise spécifié.

Exemple : Sélectionnez tous les éléments e388a4556c0f65e1904146cc1a846bee :

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

Recherchez des éléments HTML par nom de classe

Vous pouvez utiliser la méthode getElementsByClassName() pour sélectionner tous les éléments avec un nom de classe spécifique. Cette méthode renvoie une liste sous forme de tableau de tous les éléments du document avec le nom de classe spécifié.

Cet exemple renvoie une liste de tous les éléments avec class="demo":

var x = document.getElementsByClassName("demo");

Rechercher des éléments HTML par sélecteur CSS

Vous pouvez utiliser la méthode querySelectorAll() pour sélectionner ceux qui correspondent à un élément de sélecteur CSS spécifié (ID , classe, type, etc.). Cette méthode renvoie une liste de type tableau de tous les éléments correspondant au sélecteur spécifié.

Les sélecteurs CSS offrent un moyen très puissant et efficace de sélectionner des éléments HTML dans un document.

var x = document.querySelectorAll("div");

Trouver des éléments HTML à travers une collection d'objets HTML

L'élément le plus haut dans un document HTML peut être utilisé directement comme attribut de document. Par exemple, l'élément 100db36a723c770d327fc0aef2ce13b1 est accessible à l'aide de l'attribut document.documentElement.

L'élément est accessible avec la propriété document.body.

var html = document.documentElement;
var body = document.body;

REMARQUE : si document.body est utilisé avant une balise (par exemple, à l'intérieur d'un 93f0f5c25f18dab9d176bd4f6de5d30e), il renverra null à la place de l'élément body.

Les objets HTML (et collections d'objets) suivants sont également accessibles :

document.images Renvoie tous les éléments 17466f2e207b282b3d6ba6269c80620b et 3499910bf9dac5ae3c52d5ede7383485 avec les attributs href document.readyStateRenvoie l'état (de chargement) du document document.referrerRenvoie l'URI du référent (Documents liés) document.scriptsRenvoie tous les éléments 3f1c4e4b6b16bbbd69b2ee476dc4f83a s si la vérification des erreurs est appliquée document.titleRetourne document.URLRenvoie l'URL complète du document[Recommandations associées : Tutoriel d'apprentissage Javascript ]
Properties Description
document.anchors Renvoie tous les éléments 3499910bf9dac5ae3c52d5ede7383485 avec l'attribut name
document.applets Renvoie tous les éléments (en HTML5 Obsolète)
document.baseURI Renvoie l'URI de base absolue du document
document.body Renvoie le element
document.cookie Renvoie le cookie du document
document.doctype Renvoie le type de document du document
document.documentElement Renvoie l'élément 100db36a723c770d327fc0aef2ce13b1
document.documentMode Renvoie le mode utilisé par le navigateur
do cument.documentURI Renvoie l'URI du document
document.domain Renvoie le nom de domaine du serveur de documents
document.domConfig Obsolète Renvoie la configuration DOM
document .embeds Renvoie tous les éléments& lt;embed>
document.forms Renvoie tous les éléments ff9c23ada1bcecdd1a0fb5d5a0f18437
document.head Renvoie l'élément 93f0f5c25f18dab9d176bd4f6de5d30e

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn