TypeScript의 액세스 요소-JS 튜토리얼-php.cn

TypeScript의 액세스 요소

PHPz

풀어 주다： 2023-08-24 18:45:02

앞으로

1250명이 탐색했습니다.

TypeScript의 액세스 요소

TypeScript에서는 요소에 액세스하거나 HTML 구성 요소에 액세스하기 위해 DOM(문서 개체 모델)을 사용합니다. DOM은 문서 구조를 노드 트리로 시각화하는 HTML 및 XML 프로그래밍 인터페이스를 정의합니다. 단락, 버튼, div, 제목 등은 트리의 각 노드가 나타내는 문서 요소의 몇 가지 예일 뿐입니다.

TypeScript의 Document 개체는 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에서 다음과 같이 액세스할 수 있습니다.

문법

으아악

예

이 예에는 ID가 "root"인 HTML div 요소가 있습니다. 스크립트에서는 document.getElementById() 메서드를 사용하여 ID로 요소에 액세스합니다. 이 메소드는 문자열 "root"를 매개변수로 사용하고 해당 요소를 객체로 반환합니다. 그런 다음 이 개체를 변수 root에 할당합니다.

"changeText" 및 "changeBG" 기능을 실행하기 위해 클릭 이벤트 핸들러와 함께 두 개의 버튼을 사용했습니다. 이 함수는 요소의 innerHTML 텍스트와 배경색을 각각 변경합니다. TypeScript 코드는 HTML에서 사용할 수 없으므로 먼저 이를 컴파일한 다음 컴파일된 JavaScript 코드를 HTML과 함께 사용해야 합니다.

타이프스크립트 코드

TypeScript 코드를 작성하고 컴파일하는 데 필요한 파일입니다.

으아악

HTML 코드

HTML 코드는 웹페이지의 요소를 정의하는 곳입니다.

으아악

이 메소드는 지정된 ID를 가진 요소가 존재하지 않는 경우 null을 반환하므로 반환된 요소를 조작하기 전에 이를 확인하는 것이 중요합니다.

querySelector() 메소드 사용

TypeScript를 사용하여 DOM 요소에 액세스하는 또 다른 방법은 querySelector() 및 querySelectorAll() 메서드를 사용하는 것입니다. 이러한 메서드는 jQuery와 유사한 CSS 선택기를 통해 요소를 선택합니다.

문법

으아악

예

이 예에서는 TypeScript를 통해 HTML 요소에 액세스하기 위해 querySelector() 메서드를 사용합니다. 입력 필드를 사용하여 입력을 제공하고 입력 필드와 div 요소에 액세스하여 웹 페이지에 정확한 텍스트를 표시하려고 합니다. querySelector() 메소드를 사용하고 입력 필드의 ID와 div 요소를 전달합니다. 사용자가 입력할 때 함수가 실행되도록 입력 필드에 입력 이벤트 속성을 추가했습니다. 이 함수는 두 요소 모두에 액세스하고 div의 텍스트를 입력 필드의 정확한 텍스트로 변경하는 데 사용됩니다.

으아악