typescript の要素にアクセスする
在 TypeScript 中，为了访问元素，或者我们可以说 HTML 组件，我们使用文档对象模型 (DOM)。 DOM 定义了 HTML 和 XML 编程接口，将文档结构可视化为节点树。段落、按钮、div、标题等只是树中每个节点代表的文档元素的几个示例。
TypeScript 中的文档对象充当 DOM 的门户。这意味着我们可以使用 TypeScript 轻松访问 DOM 元素。有多种方法可以访问元素，这些是 -
使用 document.querySelector() 方法
使用 document.getElementById() 方法
使用 document.getElementsByClassName() 方法
使用 document.getElementsByTagName() 方法
在本教程中，我们将讨论前两个方法，即 document,querySelector() 和 document.getElementById() 方法。
使用 getElementById() 方法
document.getElementById() 方法是最常见的方法，也是 TypeScript 中访问 HTML 元素的主要使用方法。该方法将用户想要访问的元素的 id 作为参数，并以对象的形式返回该元素。
例如，如果您有一个 ID 为“myDiv”的 HTML 元素，您可以像这样在 TypeScript 中访问它 -
语法
let myDiv = <HTMLElement>document.getElementById("myDiv");
//Manipulating the element by setting its innerHTML
myDiv.innerHTML = "Hello, World!";
示例
在此示例中，我们有一个 id 为“root”的 HTML div 元素。在脚本中，我们使用 document.getElementById() 方法通过元素的 id 来访问该元素。该方法将字符串“root”作为参数，并将元素作为对象返回。然后我们将此对象分配给变量 root。
我们使用了两个带有单击事件处理程序的按钮来执行“changeText”和“changeBG”函数。这些函数分别更改元素的innerHTML 文本和背景颜色。由于TypeScript代码不能在HTML中使用，因此我们需要先对其进行编译，然后将编译后的JavaScript代码与HTML一起使用。
打字稿代码
我们需要在其中编写 TypeScript 代码并进行编译的文件。
let root = <HTMLElement>document.getElementById('root')
function changeText() {
root.innerHTML = 'The text is changed!'
}
function changeBG() {
root.style.background = '#b8f0e5'
}
</HTMLElement>
HTML 代码
HTML 代码是我们定义网页元素的地方。
<html>
<body>
<h2 id="Access-an-i-Element-i-in-TypeScript">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>
如果具有指定 id 的元素不存在，该方法将返回 null，因此在操作返回的元素之前检查这一点至关重要。
使用querySelector()方法
使用 TypeScript 访问 DOM 元素的另一种方法是使用 querySelector() 和 querySelectorAll() 方法。这些方法通过 CSS 选择器来选择元素，类似于 jQuery。
语法
const el = <HTMLElement>document.querySelector('#myDiv');
示例
在此示例中，我们使用 querySelector() 方法通过 TypeScript 访问 HTML 元素。我们采用输入字段来提供输入，并尝试通过访问输入字段和 div 元素在网页上显示确切的文本。我们使用 querySelector() 方法并传递输入字段和 div 元素的 id。我们在输入字段上添加了一个输入事件属性，以便在用户对其进行输入时执行函数。此函数用于访问这两个元素并将 div 的文本更改为输入字段上的确切文本。
<html>
<body>
<h2 id="Access-an-i-Element-i-in-TypeScript">Access an <i>Element</i> in TypeScript</h2>
<h4 id="Enter-your-text">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>
输出
请注意，getElementsByClassName、getElementsByTagName 和 getElementsByName 方法也允许您访问元素，但它们返回元素集合而不是单个元素。
要在 TypeScript 中访问 HTML 元素，您可以使用文档对象及其各种方法（例如 getElementById、querySelector 和 querySelectorAll）来查找要访问的元素，然后根据需要对其进行操作。
以上がtypescript の要素にアクセスするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7442
15
1371
52
76
11
7
6
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？
Mar 18, 2025 pm 03:14 PM
この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。
jQueryマトリックス効果
Mar 10, 2025 am 12:52 AM
マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！ それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します
ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:16 PM
この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。
シンプルなjQueryスライダーを構築する方法
Mar 11, 2025 am 12:19 AM
この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！ 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます
Angularを使用してCSVファイルをアップロードおよびダウンロードする方法
Mar 10, 2025 am 01:01 AM
データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます
