웹페이지 완벽 제어! HTML+CSS+JS 폼 조작, DOM 이벤트 다루기 핵심 비법 공개!

폼 조작하기: 웹 페이지 내용 쉽게 바꾸는 방법

웹 페이지 내용을 바꾸려면 'DOM'이라는 걸 조작해야 해. DOM은 웹 브라우저 화면에 보이는 모든 요소를 나무처럼 연결해 놓은 거라고 생각하면 돼.

1. 폼 요소 선택하기

폼은 사용자한테 정보를 입력받는 곳인데, 이걸 JavaScript로 조작하려면 먼저 폼 요소를 찾아야 해.

• document.forms 사용하기:

  • document.forms를 쓰면 웹 페이지에 있는 모든 폼을 한 번에 찾을 수 있어. 마치 여러 개의 폼이 담긴 상자 같지.
  • 이 상자에서 원하는 폼을 꺼내려면 배열처럼 번호를 붙여서 접근하면 돼. 예를 들어, 첫 번째 폼은 document.forms[0]처럼 말이야.

• name 속성으로 폼 찾기:

  • 폼마다 고유한 이름(name 속성)을 붙여줄 수 있어.
  • document.forms['폼이름']처럼 이름을 써주면 해당 폼을 바로 찾을 수 있어서 더 편리해.

2. 폼 안의 요소들 선택하기

폼을 찾았다면, 이제 폼 안에 있는 입력창, 버튼 같은 요소들을 찾아야겠지?

• elements 속성 사용하기:
  • 폼 요소를 찾았다면, .elements라는 걸 써서 폼 안의 모든 입력 요소들을 가져올 수 있어. 이것도 배열처럼 번호를 붙여서 접근하거나, 요소의 name 속성으로 접근할 수 있어.
  • 주의: name 속성이 없는 요소는 name 속성으로 접근할 수 없어. 이럴 때는 번호로 접근하는 게 안전해.

3. 입력 값 다루기

이제 폼 요소들을 찾았으니, 그 안에 있는 값들을 가져오거나 바꿀 수 있어.

• 텍스트 입력창, 비밀번호, 텍스트 에어리어:

  • 이런 입력창들은 .value라는 걸로 값을 가져오거나 바꿀 수 있어.
  • 예를 들어, input 요소.value = '새로운 값'처럼 말이야.
  • 중요: 비밀번호 입력창도 .value로 값을 가져올 수 있어. 웹 브라우저에서는 암호화되어 보여도, JavaScript로는 암호화되지 않은 원래 값을 가져올 수 있으니 주의해야 해!

• 체크박스, 라디오 버튼:

  • 이런 요소들은 .checked라는 걸로 선택되었는지 아닌지 확인할 수 있어. true면 선택된 거고, false면 선택 안 된 거야.
  • .checked = true처럼 값을 바꿔주면 선택되게 할 수도 있어.
  • 값 가져오기: 선택된 체크박스나 라디오 버튼의 실제 값은 .value로 가져올 수 있어.
  • 주의: 라디오 버튼은 같은 name을 가진 것들 중에서 하나만 선택돼. 여러 개를 .checked = true로 바꾸려고 해도 결국 마지막에 바뀐 것만 선택될 거야.

• 콤보 박스 (셀렉트 태그):

  • 콤보 박스에서 선택된 값을 가져오려면 .selected라는 걸 써야 해.
  • .selected = true로 특정 옵션을 선택되게 할 수도 있어.
  • 값 가져오기: 선택된 옵션의 값은 .value로 가져올 수 있어.

• 파일 업로드:

  • 파일 업로드 요소는 .files라는 걸로 사용자가 선택한 파일 정보를 가져올 수 있어.
  • .files[0]처럼 하면 첫 번째 파일에 대한 정보를 얻을 수 있지.
  • 파일 이름, 크기, 타입 등 다양한 정보를 .files[0].name, .files[0].size 등으로 확인할 수 있어. 이걸로 파일 크기 제한 같은 걸 만들 수 있지.

4. 폼 제출하기

• submit() 메서드:
  • 폼을 JavaScript로 제출하고 싶을 때는 해당 폼 요소를 찾아서 .submit() 메서드를 사용하면 돼. 마치 사용자가 제출 버튼을 누른 것처럼 작동해.