JavaScript 팁: 텍스트 입력 필드의 값 가져오기
P粉283559033
2023-08-21 10:35:51
<p>JavaScript를 사용하여 검색하고 있습니다. 양식을 사용하고 싶지만 내 페이지의 다른 내용이 손상될 수 있습니다. 다음 입력 텍스트 필드가 있습니다. </p>
<pre class="brush:html;toolbar:false;"><입력 이름="searchTxt" maxlength="512" id="searchTxt" />
</pre>
<p>이것은 내 JavaScript 코드입니다: </p>
<pre class="brush:js;toolbar:false;"><스크립트 유형="text/javascript">
함수 검색URL(){
window.location = "http://www.myurl.com/search/" + (텍스트 값 입력);
}
</스크립트>
</pre>
<p>텍스트 필드의 값을 JavaScript로 전달하는 방법은 무엇입니까? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아악
이 기능을 코드펜에서 확인해 보세요.
양식 요소 내부에 입력 요소를 래핑하지 않고 입력 텍스트 상자의 값을 직접 가져오는 방법에는 여러 가지가 있습니다.
방법 1
document.getElementById('textbox_id').value필수 상자의 가치를 알아보세요예를 들어
document.getElementById("searchTxt").value;참고: 메서드 2, 3, 4, 6은 요소 컬렉션을 반환하므로 [integer]를 사용하여 필요한 요소를 가져옵니다. 첫 번째 요소에는
[0]，对于第二个元素，使用[1]등을 사용합니다...방법 2
사용
을 반환합니다.document.getElementsByClassName('class_name')[整数].value, 라이브 HTMLCollection예를 들어
document.getElementsByClassName("searchField")[0].value;이것이 페이지의 첫 번째 텍스트 상자인 경우.방법 3
라이브 HTMLCollection을 반환하는
document.getElementsByTagName('tag_name')[整数].value를 사용하세요예를 들어
document.getElementsByTagName("input")[0].value;이것이 페이지의 첫 번째 텍스트 상자인 경우.방법 4
도 반환합니다.document.getElementsByName('name')[整数].value, 라이브 NodeList예를 들어
document.getElementsByName("searchTxt")[0].value;페이지에서 'searchtext'라는 이름의 첫 번째 텍스트 상자인 경우.방법 5
CSS 선택기를 사용하여 요소를 선택하는 강력한
document.querySelector('selector').value를 사용하세요.예를 들어
document.querySelector('#searchTxt').value;아이디로 선택document.querySelector('.searchField').value;수업별로 선택document.querySelector('input').value;태그 이름으로 선택document.querySelector('[name="searchTxt"]').value;이름으로 선택방법 6
document.querySelectorAll('selector')[整数].value, 또한 CSS 선택기를 사용하여 요소를 선택하지만 해당 선택기가 있는 모든 요소를 정적 NodeList로 반환합니다.예를 들어
document.querySelectorAll('#searchTxt')[0].value;아이디로 선택document.querySelectorAll('.searchField')[0].value;수업별로 선택document.querySelectorAll('input')[0].value;태그 이름으로 선택document.querySelectorAll('[name="searchTxt"]')[0].value;이름으로 선택지원