Tutoriel de base JavaScript

Objet JavaScript

Fonction JavaScript

DOM HTML JS

BOM du navigateur JS

Tutoriel de base AJAX

Manuel de référence JavaScript

Modification du contenu HTML par JS DOM Méthodes JS HTML DOM

Sélecteurs JS HTML DOM

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

Pour cela, vous devez d'abord trouver l'élément. Il y a plusieurs méthodes pour faire cela :

Trouver des éléments HTML par l'ID
Trouver des éléments HTML par le nom de balise
Recherche d'éléments HTML via le nom de classe
Recherche d'éléments HTML via un sélecteur CSS
Recherche d'éléments HTML via une collection d'objets HTML

Trouver des éléments HTML par l'ID

Vous pouvez utilisergetElementById()La méthode sélectionne l'élément en fonction de l'ID unique de l'élément.

C'est la méthode la plus simple pour trouver un élément HTML dans l'arbre DOM.

Les exemples suivants sélectionnent un élément ayant une propriété IDid="msg"des éléments :

Exemple

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

Testez pour voir‹/›

Si l'élément est trouvé, cette méthode renverra l'élément sous forme d'objet.

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

Trouver des éléments HTML par le nom de balise

Vous pouvez également utilisergetElementsByTagName()La méthode sélectionne les éléments HTML par le nom de balise.

Cette méthode renvoie une liste semblable à un tableau de tous les éléments du document ayant le nom de balise spécifié.

Dans cet exemple, sélectionnez tous<p>Élément :

Exemple

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

Testez pour voir‹/›

Modifier la couleur de fond de tous les éléments de paragraphes du document :

Exemple

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length; i++) {
　　　x[i].style.backgroundColor = "coral";
}

Testez pour voir‹/›

Dans cet exemple, sélectionnezid="wrapper"de l'élément, puis sélectionnez« wrapper »tous les éléments<p>Élément :

Exemple

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

Testez pour voir‹/›

Recherche d'éléments HTML via le nom de classe

Vous pouvez utiliser cettegetElementsByClassName()Méthode pour sélectionner tous les éléments ayant un nom de classe spécifique.

Cette méthode renvoie une liste similaire à un tableau contenant tous les éléments ayant la classe spécifiée dans le document.

Cet exemple renvoie tous les éléments avecclass="demo" deListe des éléments :

Exemple

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

Testez pour voir‹/›

Recherche d'éléments HTML via un sélecteur CSS

Vous pouvez utiliser cettequerySelectorAll()Méthode pour sélectionner des éléments correspondant à un sélecteur CSS spécifié (ID, classe, type, etc.).

Cette méthode renvoie une liste similaire à un tableau contenant tous les éléments correspondant au sélecteur spécifié.

Les sélecteurs CSS fournissent une méthode très puissante et efficace pour sélectionner des éléments HTML dans un document.

Exemple

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

Testez pour voir‹/›

Cet exemple renvoie les éléments avec« note »de tous les documents de classe<div>Liste des éléments :

Exemple

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

Testez pour voir‹/›

Recherche d'éléments HTML via une collection d'objets HTML

L'élément le plus haut du document HTML peut être utilisé directement comme attribut de document.

Par exemple, vous pouvez utiliser l'attribut pour accéder<html>Élémentdocument.documentElement.

ci-dessusLes composants peuvent être accédésdocument.bodyPropriété.

Exemple

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

Testez pour voir‹/›

Attention :Sidocument.bodyDansavant l'utilisation de la balise (par exemple, dansDans <head>），il renverra null au lieu de l'élément body.

Il est également possible d'accéder aux objets HTML suivants (et aux collections d'objets) :

Propriété	Description
document.anchors	Renvoie tous les éléments ayant une propriété de nom<a>Élément
document.applets	Retourner tous<applet>Élément(Dans HTML5(Déprécié)
document.baseURI	Renvoie l'URI de base absolu du document
document.body	RetournerÉlément
document.cookie	Renvoie les cookies du document
document.doctype	Renvoie le type de document du document
document.documentElement	Retourner<html>Élément
document.documentMode	Renvoie le mode utilisé par le navigateur
document.documentURI	Renvoie l'URI du document
document.domain	Retourner le domaine du serveur de document
document.domConfig	Déprécié ;Retourner la configuration DOM
document.embeds	Retourner tous<embed>Élément
document.forms	Retourner tous<form>Élément
document.head	Retourner<head>Élément
document.images	Retourner tous<img>Élément
document.implementation	Retourner l'implémentation DOM
document.inputEncoding	Retourner l'encodage du document (jeu de caractères)
document.lastModified	Retourner la date et l'heure de mise à jour du document
document.links	Retourner tous les éléments ayant l'attribut href<area>et<a>Élément
document.readyState	Retourner l'état (chargement) du document
document.referrer	Retourner l'URI du référent (document de lien)
document.scripts	Retourner tous<script>Élément
document.strictErrorChecking	Retourner si la vérification des erreurs强制性
document.title	Retourner<title>Élément
document.URL	Retourner l'URL complète du document

Modification du contenu HTML par JS DOM Méthodes JS HTML DOM