简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Questions et réponses frontales > le corps du texte

Javascript a-t-il des sélecteurs ?

青灯夜游
Libérer： 2022-02-21 17:52:27
original
1808 Les gens l'ont consulté

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");
Copier après la connexion

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

 : 

var x = document.getElementsByTagName("p");
Copier après la connexion

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");
Copier après la connexion

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");
Copier après la connexion

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 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;
Copier après la connexion

REMARQUE : si document.body est utilisé avant une balise (par exemple, à l'intérieur d'un ), 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 document.implementationRenvoie l'implémentation DOMdocument.inputEncodingRenvoie l'encodage (jeu de caractères) du documentdocument.lastModified Retours la date et l'heure auxquelles le document a été mis à jourdocument.links Renvoie tous les éléments et 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
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！
Properties Description
document.anchors Renvoie tous les éléments avec l'attribut name
document.applets Renvoie tous les éléments (en HTML5 Obsolète)
document.baseURIRenvoie l'URI de base absolue du document
document.bodyRenvoie le element
document.cookieRenvoie le cookie du document
document.doctypeRenvoie le type de document du document
document.documentElementRenvoie l'élément
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
document.head Renvoie l'élément