Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Access an Element in Type Script
In TypeScript, to access an element, or we can say HTML components, we use the Document Object Model (DOM). The DOM defines an HTML and XML programming interface that visualizes a document's structure as a tree of nodes. A paragraph, a button, a div, a heading, etc., are just a few examples of the document elements each node in the tree represents.
The document object in TypeScript serves as the doorway to the DOM. This means we can easily access the elements of the DOM using TypeScript. There are several ways to access elements, those are −
Using the document.querySelector() method
Using the document.getElementById() method
Using the document.getElementsByClassName () method
Using the document.getElementsByTagName () method
In this tutorial, we will discuss the first two methods, i.e., the document,querySelector(), and the document.getElementById() methods.
Using getElementById() method
The document.getElementById() method is the most common method and mainly used method for accessing an HTML element in TypeScript. This method takes the id of the element user wants to access as a parameter and returns the element as a form of an object.
For example, if you have an HTML element with the id "myDiv," you can access it in TypeScript like this −
Syntax
let myDiv = <HTMLElement>document.getElementById("myDiv");
//Manipulating the element by setting its innerHTML
myDiv.innerHTML = "Hello, World!";
Example
In this example, we have an HTML div element with an id of "root." In the script, we use the document.getElementById() method to access this element by its id. The method takes the string "root" as a parameter and returns the element as an object. We then assign this object to the variable root.
We used two buttons with click event handlers that execute the "changeText" and "changeBG" functions. These functions change the element's innerHTML text and the background colour, respectively. As the TypeScript code can't be used in the HTML, we need to compile it first and then use the compiled JavaScript code with HTML.
TypeScript Code
The file where we need to write the TypeScript code and compile.
let root = <HTMLElement>document.getElementById('root')
function changeText() {
root.innerHTML = 'The text is changed!'
}
function changeBG() {
root.style.background = '#b8f0e5'
}
</HTMLElement>
HTML Code
The HTML code is where we define the elements of our web page.
<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>
If the element with the specified id does not exist, the method will return null, so checking for this before manipulating the returned element is essential.
Using querySelector() method
Another way to access elements of DOM using TypeScript is by using querySelector() and querySelectorAll() methods. These methods select elements by CSS selector, similar to jQuery.
Syntax
const el = <HTMLElement>document.querySelector('#myDiv');
Example
In this example, we use the querySelector() method to access the HTML elements using TypeScript. We take an input field to give input and try to show the exact text on the web page by accessing the input field and a div element. We used the querySelector() method and passed the id's of the input field and the div element. We have added an on-input event attribute on the input field to execute a function whenever the user gives some input on it. This function is used to access the two elements and change the div's text to the exact text on the input field.
<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>
Output
Note that the getElementsByClassName, getElementsByTagName, and getElementsByName methods also allow you to access elements, but they return a collection of elements instead of a single element.
To access an HTML element in TypeScript, you can use the document object and its various methods, such as getElementById, querySelector, and querySelectorAll, to find the element you want to access and then manipulate it as desired.
9K+ Views
