Maison > interface Web > js tutoriel > Comment utiliser getElementById en JavaScript

Comment utiliser getElementById en JavaScript

不言
Libérer: 2018-12-24 10:30:12
original
25068 Les gens l'ont consulté

getElementById est une méthode qui renvoie un élément avec une valeur d'identifiant spécifiée en tant qu'objet Element. Vous pouvez utiliser getElementById pour obtenir l'ID spécifié à partir d'une balise HTML afin de traiter certains contenus.

Comment utiliser getElementById en Comment utiliser getElementById en Comment utiliser getElementById en JavaScript

Utilisation de getElementById

La façon d'obtenir l'élément en utilisant getElementById est la suivante

document.getElementById(id)
Copier après la connexion

Définir dans l'id L'élément id que vous souhaitez obtenir dans le HTML. Étant donné que le même identifiant ne peut pas être utilisé plusieurs fois en HTML, il doit s'agir d'une valeur d'identifiant unique.

S'il y a plusieurs identifiants dans le HTML, seul le premier élément id correspondant est renvoyé. Si l'identifiant spécifié n'existe pas, null est renvoyé.

Regardons exemples spécifiques

Caractères d'affichage

Le code est le suivant suit

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
  </head>
  <body>
    <p id="text"></p>
    <script>
      document.getElementById("text").innerHTML = "你好,php中文网!";
    </script>
  </body>
</html>
Copier après la connexion

Les résultats d'exécution sont les suivants

Comment utiliser getElementById en Comment utiliser getElementById en Comment utiliser getElementById en JavaScript

Afficher le texte de connexion

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
  </head>
  <body>
    <p id="text2"></p>
    <script>
      document.getElementById("text2").innerHTML = "a" + "b";
    </script>
  </body>
</html>
Copier après la connexion

Les résultats d'exécution sont les suivants

Comment utiliser getElementById en Comment utiliser getElementById en Comment utiliser getElementById en JavaScript

Afficher les résultats du calcul

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
  </head>
  <body>
    <p id="text3"></p>
    <script>
 document.getElementById("text3").innerHTML = 3 + 5;    
</script>
  </body>
</html>
Copier après la connexion

Les résultats d'exécution sont les suivants suit

Comment utiliser getElementById en JavaScript

Enfin, comme il existe de nombreuses utilisations de getElementById dans le DOM (Document Object Model), nous devons le maîtriser autant que possible.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal