이 글은 JavaScript에서 입력 텍스트 값을 가져오고 설정하는 방법을 보여줍니다.
JavaScript에서 입력 텍스트 값을 가져오고 설정하는 방법은 무엇입니까?
JavaScript에서 입력 텍스트 값을 가져오고 설정하려면 다음을 활용하십시오.
- ' getElementById() ' 방법
- ' getElementByClassName() ' 방법
- ' 쿼리 선택기() ' 방법
언급된 방법을 하나씩 하나씩 살펴보세요!
방법 1: document.getElementById() 메서드를 사용하여 JavaScript에서 입력 텍스트 값 가져오기 및 설정
' getElementById() ” 메소드는 지정된 ID를 가진 요소에 액세스합니다. 이 방법은 텍스트 값을 가져오고 설정하기 위해 입력 필드 및 버튼의 ID에 액세스하는 데 적용할 수 있습니다.
통사론
문서. getElementById ( 집단 )
여기, ' 집단 '는 요소의 지정된 ID를 나타냅니다.
아래의 예는 논의된 개념을 설명합니다.
예시
먼저 두 개의 입력 유형 필드를 포함하고 ' 클릭 ” 지정된 기능에 액세스하는 이벤트:
< 버튼 클릭 = 'getText()' > 가치 얻기 단추 >
< 버튼 클릭 = 'getAndSetText()' > 값 설정 단추 >
< 입력 유형 = '텍스트' ID = '세트텍스트' 이름 = '세트텍스트' 클릭 = '이.값 = '' ' />
그런 다음 document.getElementById() 메서드를 사용하여 입력 필드의 값을 가져옵니다.
문서. getElementById ( '텍스트 가져오기' ) . 값 = '여기에 입력' ;이제 ' getAndSetText() '. 여기에서 ' getText ' id 를 입력하고 ' 다음 입력 필드에 입력 값을 전달합니다. 세트텍스트 ' ID:
기능 getAndSetText ( ) {~였다 세트텍스트 = 문서. getElementById ( '텍스트 가져오기' ) . 값 ;
문서. getElementById ( '세트텍스트' ) . 값 = 세트텍스트 ;
}
마찬가지로 ' getText() '. 그런 다음 ' getText ” id를 입력하고 특정 값을 경고 상자에 전달하여 입력 텍스트 값을 가져옵니다.
기능 getText ( ) {~였다 getText = 문서. getElementById ( '텍스트 가져오기' ) . 값 ;
알리다 ( getText ) ;
}
산출
방법 2: document.getElementByClassName() 메서드를 사용하여 JavaScript에서 입력 텍스트 값 가져오기 및 설정
' getElementByClassName() ” 메소드는 지정된 클래스 이름의 도움으로 요소에 액세스합니다. 이 방법은 마찬가지로 입력 필드의 클래스에 접근하고 텍스트 값을 입력하고 설정하는 버튼에도 적용할 수 있습니다.
통사론
문서. getElementsByClassName ( 학명 )위 구문에서 ' 학명 '는 요소의 클래스 이름을 나타냅니다.
예시
이전 예와 유사하게 ''를 사용하여 첫 번째 입력 필드에 먼저 액세스합니다. getText ' 클래스 이름. 그런 다음 ' getAndSetText() '하고 클래스 이름을 기반으로 지정된 입력 필드를 가져오고 다음 입력 필드에 값을 설정합니다.
기능 getAndSetText ( )
{
~였다 세트텍스트 = 문서. getElementByClassName ( '텍스트 가져오기' ) . 값 ;
문서. getElementById ( '세트텍스트' ) . 값 = 세트텍스트 ;
}
마찬가지로 ' getText() ', 첫 번째 입력 필드의 클래스 이름을 추가하고 특정 값을 경고 상자에 전달하여 가져온 값을 표시합니다.
기능 getText ( ) {~였다 getText = 문서. getElementByClassName ( '텍스트 가져오기' ) . 값 ;
알리다 ( getText ) ;
}
이 구현은 다음 출력을 생성합니다.
방법 3: 'document.querySelector()' 메서드를 사용하여 Javascript에서 입력 텍스트 값 가져오기 및 설정
' document.querySelector() '는 첫 번째 e를 가져옵니다. 내려갔다 지정된 선택자와 일치하는 addEventListener() 메서드는 선택한 요소에 이벤트 핸들러를 추가할 수 있습니다. 이러한 메소드를 적용하여 입력 필드 및 버튼의 ID를 가져오고 이벤트 핸들러를 적용할 수 있습니다.
통사론
문서. 쿼리 선택기 ( CSS 선택기 )여기, ' CSS 선택기 '는 하나 이상의 CSS 선택기를 참조하십시오.
다음 예를 보십시오.
예시
먼저, 입력 텍스트 값을 가져오고 설정하기 위한 버튼과 자리 표시자 값이 있는 입력 유형을 포함합니다.
< 버튼 아이디 = '가져 오기' > 가져 오기 단추 >
< 입력 유형 = '텍스트' ID = '입력 세트' 자리 표시자 = '값 설정' >
< 버튼 아이디 = '세트' > 세트 단추 >
다음으로, “ document.querySelector() ' 방법:
let buttonGet = 문서. 쿼리 선택기 ( '#가져 오기' ) ;버튼 세트하자 = 문서. 쿼리 선택기 ( '#세트' ) ;
getInput하자 = 문서. 쿼리 선택기 ( '#input-get' ) ;
setInput 하자 = 문서. 쿼리 선택기 ( '#입력 세트' ) ;
결과를 보자 = 문서. 쿼리 선택기 ( '#결과' ) ;
그런 다음 ' 딸깍 하는 소리 ” 두 버튼이 각각 값을 가져오고 설정하려면 다음을 수행합니다.
버튼을 얻습니다. 추가 이벤트 리스너 ( '딸깍 하는 소리' , ( ) => {결과. 내부텍스트 = getInput. 값 ;
} ) ;
버튼셋. 추가 이벤트 리스너 ( '딸깍 하는 소리' , ( ) => {
getInput. 값 = 세트입력. 값 ;
} ) ;
산출
JavaScript에서 입력 텍스트 값을 가져오고 설정하는 가장 간단한 방법에 대해 논의했습니다.
결론
JavaScript에서 입력 텍스트 값을 가져오고 설정하려면 ' 문서.getElementById() ' 방법 또는
' document.getElementByClassName() ” 메소드는 해당 id 또는 클래스 이름을 기반으로 지정된 입력 필드 및 버튼에 액세스한 다음 값을 설정합니다. 게다가 ' document.querySelector() '는 JavaScript에서 입력 텍스트 값을 가져오고 설정하는 데에도 사용할 수 있습니다. 이 블로그에서는 JavaScript에서 입력 텍스트 값을 가져오고 설정하는 방법을 설명했습니다.