[JavaScript] DOM 객체로 HTML 요소의 속성 바꾸기

안녕하세요! 오늘은 DOM 객체로 HTML 요소의 속성 바꾸는 법에 대해 공부하고자 합니다.

 

여기서 잠시!! 이 글을 읽기 DOM객체에 관련된 글을 읽고 와주세요!!

그럼 이제 DOM 객체로 HTML 요소의 속성을 바꾸는 법에 대해 알아보겠습니다!!

 

텍스 필드의 값 다루기

1. 텍스트 필드의 값 가져오기

<input type="text" id="myTextField" />
<button onclick="getValue()">값 가져오기</button>

function getValue() {
  var textField = document.getElementById('myTextField');
  var textFieldValue = textField.value;
  alert('텍스트 필드의 값: ' + textFieldValue);
}

사용자가 입력한 텍스트 필드의 값을 가져오기 위해 getElementById로 해당 텍스트 필드를 찾고, 그 값은 value 속성으로 얻어옵니다.

 

2. 텍스트 필드의 값 초기화하기

<input type="text" id="myTextField" />
<button onclick="clearValue()">값 초기화</button>

function clearValue() {
  var textField = document.getElementById('myTextField');
  textField.value = "";
  alert('텍스트 필드의 값이 초기화되었습니다.');
}

텍스트 필드의 값을 초기화하기 위해 해당 텍스트 필드의 value 속성에 빈 문자열("")을 대입합니다.

 

 

선택 목록 다루기(콤보박스)

1. value 가져오기

<select id="myComboBox">
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>
<button onclick="getSelectedValue()">선택된 값 가져오기</button>

function getSelectedValue() {
  var comboBox = document.getElementById('myComboBox');
  var comboBoxValue = comboBox.value;
  alert('선택된 값: ' + comboBoxValue);
}

콤보박스에서 선택된 옵션의 값을 가져오기 위해 해당 콤보박스의 value 속성을 사용합니다.

2. innerText로 태그 안 텍스트 가져오기

<select id="myComboBox">
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>
<button onclick="getSelectedText()">선택된 텍스트 가져오기</button>

function getSelectedText() {
  var comboBox = document.getElementById('myComboBox');
  var selectedOption = comboBox.selectedOptions[0];
  alert('선택된 텍스트: ' + selectedOption.innerText);
}

콤보박스에서 선택된 옵션의 텍스트를 가져오기 위해 해당 콤보박스의 selectedOptions를 사용하고, 선택된 옵션의 innerText를 얻어옵니다.

 

체크박스 다루기

<input type="checkbox" id="myCheckbox" /> 체크박스
<button onclick="checkCheckbox()">상태 확인</button>

function checkCheckbox() {
  var checkbox = document.getElementById('myCheckbox');
  var isChecked = checkbox.checked;
  alert('체크박스 상태: ' + (isChecked ? '체크됨' : '체크되지 않음'));
}

체크박스의 상태를 확인하기 위해 해당 체크박스의 checked 속성을 사용합니다.

 

이예제들을 통해 DOM 객체를 활용하여 HTML 요소의 속성을 다루는 방법을 알아보았습니다!!