JavaScript를 사용하여 텍스트 입력 필드의 값을 어떻게 얻을 수 있습니까?

JavaScript를 사용하여 텍스트 입력 필드의 값을 검색하려면 어떻게 해야 합니까?

양식 요소가 웹 페이지의 다른 측면을 방해할 수 있는 시나리오에서는 입력 텍스트를 가져옵니다. 필드 값이 직접 필요해집니다. JavaScript는 이를 수행하기 위한 여러 가지 방법을 제공합니다.

방법 1: document.getElementById

document.getElementById('searchTxt').value;

이 방법은 ID로 입력 필드의 값을 검색합니다.

방법 2: document.getElementsByClassName

document.getElementsByClassName('searchField')[0].value;

이 메소드는 특정 클래스가 있는 모든 입력 필드를 선택하고 HTMLCollection을 반환합니다. 첫 번째 요소에 액세스하려면 [0]을 사용합니다(요소가 여러 개인 경우).

방법 3: document.getElementsByTagName

document.getElementsByTagName('input')[0].value;

이 방법은 모든 입력 요소를 선택합니다. 페이지에 HTMLCollection을 반환합니다. 이번에도 첫 번째 요소에 [0]을 사용합니다.

방법 4: document.getElementsByName

document.getElementsByName('searchTxt')[0].value;

이 방법은 특정 이름을 가진 모든 입력 필드를 검색합니다. 처음 나타나는 경우에는 [0]을 사용합니다.

방법 5: document.querySelector

document.querySelector('#searchTxt').value;
document.querySelector('.searchField').value;

이 방법은 CSS 선택기를 사용하여 요소를 선택하므로 대상 검색이 가능합니다.

방법 6: document.querySelectorAll

document.querySelectorAll('#searchTxt')[0].value;
document.querySelectorAll('.searchField')[0].value;

document.querySelector와 유사하게 이 메소드는 CSS 선택기를 사용하지만 일치하는 모든 요소의 NodeList를 반환합니다. 첫 번째 요소에는 [0]을 사용하세요.

브라우저 지원

아래 표는 다양한 브라우저에서 이러한 메서드에 대한 지원 수준을 보여줍니다.

Browser	Method 1	Method 2	Method 3	Method 4	Method 5/6
IE6	Y(Buggy)	N	Y	Y(Buggy)	N
IE7	Y(Buggy)	N	Y	Y(Buggy)	N
IE8	Y	N	Y	Y(Buggy)	Y
IE9	Y	Y	Y	Y(Buggy)	Y
IE10	Y	Y	Y	Y	Y
FF3.0	Y	Y	Y	Y	N
FF3.5/FF3.6	Y	Y	Y	Y	Y
FF4b1	Y	Y	Y	Y	Y
GC4/GC5	Y	Y	Y	Y	Y
Safari4/Safari5	Y	Y	Y	Y	Y
Opera10.10/	Y	Y	Y	Y(Buggy)	Y
Opera10.53/	Y	Y	Y	Y	Y
Opera10.60	Y	Y	Y	Y	Y
Opera 12	Y	Y	Y	Y	Y

위 내용은 JavaScript를 사용하여 텍스트 입력 필드의 값을 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!