JavaScript DAY4

form 객체

- 일반적인 폼 요소에 접근할 때 사용
- document.forms 컬렉션을 이용해서도 접근할 수 있음

<form name='myform' id='regform' method='post' action='#'>
    아이디 : <input type='text' name='userid' id='id'><br>
    비밀번호 : <input type='password' name='userpw' id='pw'><br>
</form>

 

폼 접근하는 방법

const frm = document.myform; //document.뒤에는 위에 선언한 name의 이름을 적으면 그걸 가져온다는 뜻임.
const frm = document.forms['myform']; //이것도 forms에 있는 name의 값을 이용해서 값을 가져옴. 폼 name이 'myform'
const frm = document.forms[0]; // 폼 중에서 첫번째 폼을 찾음
const from = document.getElementById('regform'); // id를 이용해서 가져옴

 

아이디 입력상자에 접근하기

const userid = frm.userid; // input객체를 가져옴
const userid = document.forms['myform'].elements[0];
const userid = document.forms['myform'].elements['userid'];
const userid = document.forms[0][0];

const userid = document.getElementById('id');

 

Location 객체

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

https://g-sa.koreaisacademy.com/renewal2021/community/tv_view.asp?idxnum=170&clkMater=&txtMenu=&txtCurPage=1&selMater=&gubun=1

URL
https://g-sa.koreaisacademy.com/renewal2021/community/tv_view.asp

URI
URL ? 뒤쪽부터 있는 모든 정보를 뜻함.

Protocal : 콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환 (https://)
Hostname : 호스트의 이름과 포트번호를 반환(https://g-sa.koreaisacademy.com:443)
pathname : URL 경로부분 반환(renewal2021/community/tv_view.asp?idxnum=170&clkMater=&txtMenu=&txtCurPage=1&selMater=&gubun=1)

href : 페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동
reload() : 새로고침



# http는 기본 80번 포트를 사용하고, https는 443번 포트를 사용합니다.

 

history 객체

- 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체
- 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능을 제한

    back() : 페이지를 뒤로 이동
    forword() : 페이지를 앞으로 이동
    go(0) : 새로고침(location.reload()와 같은 기능)

 

navigator 객체

브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체
    getlocation : GPS정보를 수신하는 프로퍼티

 

문서 객체 모델(Document Object Model)

- HTML문서 또는 XML문서 등을 접근하기 위한 일종의 인터페이스 역할
- 문서내의 모든 요소를정의하고 각각의 요소에 접근하는 방법을 제공

 

Document 객체

- 웹 페이지 자체(body)를 의미하는 객체
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document객체로부터 시작

getElementById() : 해당 아이디의 요소를 선택
getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택
getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택
getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택
querySelectorAll() : 선택자로 선택되는 요소를 모두 선택
querySelector() : 선택자로 선택되는 요소를 선택