Maison >interface Web >js tutoriel >Accéder aux éléments dactylographiés

Accéder aux éléments dactylographiés

PHPzavant: 2023-08-24 18:45:021298parcourir

En TypeScript, afin d'accéder aux éléments, ou on peut dire aux composants HTML, nous utilisons le Document Object Model (DOM). Le DOM définit des interfaces de programmation HTML et XML qui visualisent la structure du document sous la forme d'une arborescence de nœuds. Les paragraphes, boutons, divs, titres, etc. ne sont que quelques exemples d'éléments de document représentés par chaque nœud de l'arborescence.

L'objet Document dans TypeScript agit comme un portail vers le DOM. Cela signifie que nous pouvons facilement accéder aux éléments DOM à l'aide de TypeScript. Il existe plusieurs façons d'accéder aux éléments, ce sont -

Utilisez la méthode document.querySelector()
Utilisez la méthode document.getElementById()
Utilisez la méthode document.getElementsByClassName()
Utilisez la méthode document.getElementsByTagName()

Dans ce tutoriel, nous aborderons les deux premières méthodes, à savoir les méthodes document,querySelector() et document.getElementById().

Utilisez la méthode getElementById()

La méthode document.getElementById() est la méthode la plus courante et la principale méthode utilisée pour accéder aux éléments HTML dans TypeScript. Cette méthode prend en paramètre l'identifiant de l'élément auquel l'utilisateur souhaite accéder et renvoie l'élément en tant qu'objet.

Par exemple, si vous avez un élément HTML avec l'ID "myDiv", vous pouvez y accéder en TypeScript comme ceci -

Grammaire

let myDiv = <HTMLElement>document.getElementById("myDiv");
//Manipulating the element by setting its innerHTML
myDiv.innerHTML = "Hello, World!";

Exemple

Dans cet exemple, nous avons un élément HTML div avec l'identifiant "root". Dans le script, nous utilisons la méthode document.getElementById() pour accéder à l'élément par son identifiant. Cette méthode prend la chaîne "root" en paramètre et renvoie l'élément en tant qu'objet. Nous attribuons ensuite cet objet à la variable racine.

Nous avons utilisé deux boutons avec des gestionnaires d'événements de clic pour exécuter les fonctions "changeText" et "changeBG". Ces fonctions modifient respectivement le texte innerHTML et la couleur d'arrière-plan de l'élément. Étant donné que le code TypeScript ne peut pas être utilisé en HTML, nous devons d'abord le compiler, puis utiliser le code JavaScript compilé avec HTML.

Code dactylographié

Le fichier dans lequel nous devons écrire du code TypeScript et le compiler.

let root = <HTMLElement>document.getElementById('root')
function changeText() {
   root.innerHTML = 'The text is changed!'
}
function changeBG() {
   root.style.background = '#b8f0e5'
}
</HTMLElement>

Code HTML

Le code HTML est l'endroit où nous définissons les éléments d'une page Web.

<html>
   <body>
      <h2>Access an <i>Element</i> in TypeScript</h2>
      <button onclick="changeText()">Change Text</button>
      <button onclick="changeBG()">Change Background Color</button>
      <div id="root" style="padding: 10px; background: #f0ecb8">
         This is a Div element!
      </div>
      <script>
         //Compiled TypeScript File
         var root = document.getElementById('root')
         function changeText() {
            root.innerHTML = 'The text is changed!'
         }
         function changeBG() {
            root.style.background = '#b8f0e5'
         }
      </script>
   </body>
</html>

Cette méthode renverra null si l'élément avec l'identifiant spécifié n'existe pas, il est donc important de vérifier cela avant de manipuler l'élément renvoyé.

Utilisez la méthode querySelector()

Une autre façon d'accéder aux éléments DOM à l'aide de TypeScript consiste à utiliser les méthodes querySelector() et querySelectorAll(). Ces méthodes sélectionnent des éléments via des sélecteurs CSS, similaires à jQuery.

Grammaire

const el = <HTMLElement>document.querySelector('#myDiv');

Exemple

Dans cet exemple, nous utilisons la méthode querySelector() pour accéder aux éléments HTML via TypeScript. Nous prenons un champ de saisie pour fournir la saisie et essayons d'afficher le texte exact sur la page Web en accédant au champ de saisie et à l'élément div. Nous utilisons la méthode querySelector() et transmettons l'identifiant du champ de saisie et de l'élément div. Nous avons ajouté une propriété d'événement d'entrée sur le champ de saisie pour exécuter une fonction lorsque l'utilisateur y entre une entrée. Cette fonction est utilisée pour accéder aux deux éléments et remplacer le texte du div par le texte exact du champ de saisie.

<html>
   <body>
      <h2>Access an <i>Element</i> in TypeScript</h2>
      <h4>Enter your text:</h4>
      <input oninput="changeInput()" id="inputField" type="text" />
      <div id="root" style="padding: 10px; background: #d5ed9c"></div>
      <script>
         //Compiled TypeScript File
         var root = document.querySelector('#root')
         var inputField = document.querySelector('#inputField')
         function changeInput() {
            root.innerHTML = inputField.value
         }
      </script>
   </body>
</html>

Sortie

Veuillez noter que les méthodes getElementsByClassName, getElementsByTagName et getElementsByName vous permettent également d'accéder aux éléments, mais elles renvoient une collection d'éléments plutôt qu'un seul élément.

Pour accéder aux éléments HTML dans TypeScript, vous pouvez utiliser l'objet document et ses différentes méthodes (telles que getElementById, querySelector et querySelectorAll) pour trouver l'élément auquel vous souhaitez accéder, puis opérer dessus selon vos besoins.

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment ajouter une propriété à un objet JavaScript en utilisant une variable comme nom ?Article suivant：Comment ajouter une propriété à un objet JavaScript en utilisant une variable comme nom ?

Articles Liés

Voir plus