자바스크립트에서 값을 얻는 방법

현대 웹 개발의 급속한 발전과 함께 JavaScript는 웹 프런트엔드 개발에서 가장 중요한 언어 중 하나가 되었습니다. JavaScript에서 값을 얻는 것은 매우 기본적이고 중요한 작업이며, 일상적인 개발 작업에서도 빼놓을 수 없는 부분입니다. 이 기사에서는 JavaScript에서 다양한 유형의 값을 얻는 방법과 기술을 소개하고 몇 가지 실제 사례를 제공합니다.

1. 입력 상자의 값 가져오기

웹 개발에서는 일반적으로 양식 입력 상자의 사용자 입력과 같은 사용자로부터 입력 데이터를 가져와야 합니다. JavaScript는 다음을 포함하여 입력 상자의 값을 가져오는 여러 가지 방법을 제공합니다.

1. ID로 입력 상자 가져오기

입력 상자를 가져오는 가장 간단한 방법은 ID로 요소를 가져온 다음 해당 값을 가져오는 것입니다. 요소. 예를 들어, ID가 "input"인 입력 상자의 경우 다음 코드를 사용하여 해당 값을 가져올 수 있습니다.

let inputEle = document.getElementById('input');
let inputValue = inputEle.value;

2. 이름으로 입력 상자 가져오기

ID로 입력 상자를 가져오는 것 외에도 다음을 수행할 수 있습니다. 또한 이름 속성 프레임을 통해 입력을 얻습니다. 이 방법은 여러 입력 상자가 포함된 양식에 적합합니다. 양식 요소를 반복하여 지정된 이름 속성을 가진 입력 상자 요소를 얻을 수 있습니다.

let forms = document.forms;
for (let i = 0; i < forms.length; i++) {
  let inputEle = forms[i].elements['username'];
  let inputValue = inputEle.value;
}

2. 라디오 버튼과 체크박스 값 가져오기

양식에서는 라디오 버튼과 체크박스 값을 가져와야 하는 경우가 많습니다. 입력 상자의 값을 가져오는 것과는 달리 라디오 버튼과 확인란의 값을 가져오는 데는 몇 가지 다른 방법을 사용해야 합니다.

1. 선택한 라디오 버튼 값 가져오기

라디오 버튼 상자의 경우 라디오 버튼 상자를 반복하면서 선택한 요소를 찾아 해당 값을 가져와야 합니다.

let radios = document.getElementsByName('gender');
let radioValue;
for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    radioValue = radios[i].value;
    break;
  }
}

2. 여러 체크박스의 값 가져오기

체크박스의 경우 선택한 체크박스의 여러 값을 가져와야 할 수도 있습니다. 이때 체크박스를 반복하면서 선택된 체크박스의 값을 배열로 저장하는 방식을 사용해야 합니다.

let checkboxes = document.getElementsByName('hobbies');
let checkboxValues = [];
for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkboxValues.push(checkboxes[i].value);
  }
}

3. 드롭다운 목록 값 가져오기

드롭다운 목록도 일반적인 양식 요소이므로 여기에서 선택한 값을 가져와야 합니다. 라디오 버튼과 마찬가지로 드롭다운 목록을 반복하면서 선택한 요소를 찾아 해당 값을 가져와야 합니다.

let selectEle = document.getElementById('city');
let selectValue = selectEle.options[selectEle.selectedIndex].value;

4. URL 매개변수 값 가져오기

웹 개발에서는 URL의 매개변수 값을 가져와야 하는 경우가 많습니다. JavaScript는 URLSearchParams 및 location.search 속성과 같은 URL의 매개변수 값을 얻는 몇 가지 방법을 제공합니다.

1. URLSearchParams

URLSearchParams는 URL 쿼리 문자열을 쉽게 구문 분석할 수 있는 새로운 API입니다. get 메소드를 사용하여 지정된 매개변수의 값을 얻을 수 있습니다.

let params = new URLSearchParams(location.search);
let id = params.get('id');

2. location.search

URL에서 매개변수 값을 얻으려면 전역 개체 창 개체의 location.search 속성을 사용할 수 있습니다. location.search는 URL의 쿼리 부분(물음표 ?로 시작하는 부분)을 반환합니다.

let searchStr = window.location.search;
let params = new URLSearchParams(searchStr);
let id = params.get('id');

5. 요약

이 글에서는 주로 JavaScript가 양식 입력 상자, 라디오 상자, 체크 상자 및 드롭다운 목록에서 값을 얻는 방법과 매개변수 값을 얻는 것을 포함하여 다양한 유형의 값을 얻는 방법을 소개합니다. URL에서. 어떤 유형의 값이든지 JavaScript는 이를 얻기 위해 해당 방법을 제공합니다. 실제 필요에 따라 적절한 방법을 선택하기만 하면 됩니다. 일상적인 개발 작업에서 이러한 방법을 이해하면 작업에 큰 편리함과 효율성을 가져다 줄 것입니다.

위 내용은 자바스크립트에서 값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!