TypeScript Hindi Tutorial #23 DOM Handling and TypeCasting
DOM Handling & TypeCasting
dom.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM handling</title>
</head>
<body>
<h1 class="headingStyle">Heading h1</h1>
<a class="anchorStyle" href="/home">go to home</a>
<script src="./output/dom.js" ></script>
</body>
</html>
dom.ts
var headingEl=document.querySelector('h1')!;
var anchorEl=document.querySelector('a')!;
var anchorElClass=document.querySelector('.anchorStyle')! as HTMLAnchorElement;
var headingElClass=document.querySelector('.headingStyle')! as HTMLHeadingElement;
console.log(headingEl.classList)
console.log(anchorEl.href)
console.log(anchorElClass.href)
console.log(headingElClass.classList)
dom.js
"use strict";
var headingEl = document.querySelector('h1');
var anchorEl = document.querySelector('a');
var anchorElClass = document.querySelector('.anchorStyle');
var headingElClass = document.querySelector('.headingStyle');
console.log(headingEl.classList);
console.log(anchorEl.href);
console.log(anchorElClass.href);
console.log(headingElClass.classList);