[JavaScript] form 태그 접근, location 객체, history 객체

1. form 태그 접근

<form id="joinForm" name="joinForm">

       <input id="in1" type="text" name="in1">

</form>

 

- name으로 객체를 찾을 때(간단히) -> id명으로도 역시나 찾을 수 있다.(document.getElementById())

let frm = document.joinForm;

let inputTag = frm.in1;

intputTag.value; --> 입력값

 

- Form 태그 안에 입력값에 대해서 유효성 검사 목적으로 접근

2. location 객체

- 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저의 새 문서를 불러올 때 사용 가능

- location 객체의 프로퍼티와 함수를 이용하면 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있음

• location.href
  - 현재 페이지 URL 정보가 담겨있는 프로퍼티
  - 대입을 통해 새로운 문자열을 넣게 되면 해당 페이지로 이동이 일어남
  - 사용자의 주소창에 직접 치는 거랑 같은 의미
• location.reload()
  - 새로고침
• location.assign("URL 주소")
  - 현재 URL을 지정한 URL로 바꿔서 이동
  A --> B --> C
            <-- C에서 뒤로 가기 하면 B로 이동
  - location.href랑 다를 게 없음
  

  

  

  - assign이기에 뒤로 가기 가능
• location.replace("URL 주소")
  - 현재 URL을 지정한 URL로 대체해서 바꾸고 이동 불가
  A --> B --> C
  <--------- B를 C로 대체하기 때문에 뒤로가기 하면 A로 이동
  

  

  

  - replace이기에 뒤로가기 불가능

3. history 객체

- 브라우저에 히스토리 정보를 문서 상태 목록으로 저장하는 객체

• history.go(n)
  - n만큼 페이지 이동
  - 양수면 앞으로 음수면 뒤로 이동
  - 0은 새로고침
• history.back()
  - 뒤로 가기
• history.forward()
  - 앞으로 가기
• history.length
  - 지금까지 방문한 웹 페이지 수 반환
  - 중복으로 방문한 웹 페이지는 하나로 취급

4. 예시