Heim > Artikel > Web-Frontend > Greifen Sie auf Elemente im Typoskript zu

Greifen Sie auf Elemente im Typoskript zu

PHPznach vorne: 2023-08-24 18:45:021231Durchsuche

Um in TypeScript auf Elemente oder, sagen wir, HTML-Komponenten zuzugreifen, verwenden wir das Document Object Model (DOM). Das DOM definiert HTML- und XML-Programmierschnittstellen, die die Dokumentstruktur als Knotenbaum visualisieren. Absätze, Schaltflächen, Divs, Überschriften usw. sind nur einige Beispiele für Dokumentelemente, die durch jeden Knoten in der Baumstruktur dargestellt werden.

Das Document-Objekt in TypeScript fungiert als Portal zum DOM. Das bedeutet, dass wir mit TypeScript problemlos auf DOM-Elemente zugreifen können. Es gibt mehrere Möglichkeiten, auf Elemente zuzugreifen, diese sind -

Verwenden Sie die document.querySelector()-Methode
Verwenden Sie die Methode document.getElementById()
Verwenden Sie die Methode document.getElementsByClassName()
Verwenden Sie die Methode document.getElementsByTagName()

In diesem Tutorial besprechen wir die ersten beiden Methoden, nämlich die Methoden document,querySelector() und document.getElementById().

Verwenden Sie die Methode getElementById()

Die Methode document.getElementById() ist die am häufigsten verwendete Methode und die Hauptmethode für den Zugriff auf HTML-Elemente in TypeScript. Diese Methode verwendet als Parameter die ID des Elements, auf das der Benutzer zugreifen möchte, und gibt das Element als Objekt zurück.

Wenn Sie beispielsweise ein HTML-Element mit der ID „myDiv“ haben, können Sie in TypeScript wie folgt darauf zugreifen –

Grammatik

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

Beispiel

In diesem Beispiel haben wir ein HTML-div-Element mit der ID „root“. Im Skript verwenden wir die Methode document.getElementById(), um über seine ID auf das Element zuzugreifen. Diese Methode verwendet die Zeichenfolge „root“ als Parameter und gibt das Element als Objekt zurück. Anschließend weisen wir dieses Objekt der Variablen root zu.

Wir haben zwei Schaltflächen mit Click-Event-Handlern verwendet, um die Funktionen „changeText“ und „changeBG“ auszuführen. Diese Funktionen ändern jeweils den innerHTML-Text und die Hintergrundfarbe des Elements. Da TypeScript-Code nicht in HTML verwendet werden kann, müssen wir ihn zuerst kompilieren und dann den kompilierten JavaScript-Code mit HTML verwenden.

Typoskript-Code

Die Datei, in die wir TypeScript-Code schreiben und kompilieren müssen.

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

HTML-Code

HTML-Code ist der Ort, an dem wir die Elemente einer Webseite definieren.

<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>

Diese Methode gibt null zurück, wenn das Element mit der angegebenen ID nicht existiert. Daher ist es wichtig, dies zu überprüfen, bevor Sie das zurückgegebene Element bearbeiten.

Verwenden Sie die Methode querySelector()

Eine weitere Möglichkeit, mit TypeScript auf DOM-Elemente zuzugreifen, ist die Verwendung der Methoden querySelector() und querySelectorAll(). Diese Methoden wählen Elemente über CSS-Selektoren aus, ähnlich wie jQuery.

Grammatik

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

Beispiel

In diesem Beispiel verwenden wir die Methode querySelector(), um über TypeScript auf HTML-Elemente zuzugreifen. Wir nehmen ein Eingabefeld, um die Eingabe bereitzustellen, und versuchen, den genauen Text auf der Webseite anzuzeigen, indem wir auf das Eingabefeld und das div-Element zugreifen. Wir verwenden die Methode querySelector() und übergeben die ID des Eingabefelds und des div-Elements. Wir haben dem Eingabefeld eine Eingabeereigniseigenschaft hinzugefügt, um eine Funktion auszuführen, wenn der Benutzer Eingaben in das Feld eingibt. Diese Funktion wird verwendet, um auf beide Elemente zuzugreifen und den Text des div in den genauen Text im Eingabefeld zu ändern.

<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>

Ausgabe

Bitte beachten Sie, dass Sie mit den Methoden getElementsByClassName, getElementsByTagName und getElementsByName auch auf Elemente zugreifen können, diese jedoch eine Sammlung von Elementen und nicht ein einzelnes Element zurückgeben.

Um auf HTML-Elemente in TypeScript zuzugreifen, können Sie das Dokumentobjekt und seine verschiedenen Methoden (z. B. getElementById, querySelector und querySelectorAll) verwenden, um das Element zu finden, auf das Sie zugreifen möchten, und es dann nach Bedarf zu bearbeiten.

Das obige ist der detaillierte Inhalt vonGreifen Sie auf Elemente im Typoskript zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie füge ich einem JavaScript-Objekt eine Eigenschaft hinzu, indem ich eine Variable als Namen verwende?Nächster Artikel：Wie füge ich einem JavaScript-Objekt eine Eigenschaft hinzu, indem ich eine Variable als Namen verwende?

In Verbindung stehende Artikel

Mehr sehen