[JavaSctipt] 🌎 HTML DOM 객체

🌎 자바스크립트 HTML DOM 객체

🧐 들어가기전에..

웹개발 할때 필수인 HTML DOM에 대해서 알아봅시다!! 문서 객체 모델(Document Object Model)은 HTML문서 또는 XML문서등을 접근하기 위한 일종의 인터페이스 역할을 합니다. 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공 합니다.

📄 document 객체

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

document 객체의 메소드

• getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택해 배열로 저장
• getElementById(): 해당 아이디의 요소를 선택 ❗❗주의: s없음!! id는 하나니까!!❗❗
• getElementsByClassname(): 해당 클래스에 속한 요소를 모두 선택해 배열로 저장
• getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택해 배열로 저장
• querySelectorAll(): 선택자로 선택되는 요소를 모두 선택해 배열로 저장
  (querySelector()):

📋 form 객체

• 일반적인 폼에 접근할 때 사용, document.forms 컬렉션을 이용해서 접근 가능
• document: body부분 -> document.name: body안 name을 찾음

폼 접근

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

• name으로 찾기

  const frm = document.myform;
  const frm = document.forms['myform']

• id로 찾기

  const frm = document.getElementById('regform')

• nth로 찾기

  const frm = document.forms[0];    //첫번째 폼을 찾는다.

폼 안에 아이디 입력상자 접근

• name으로 찾기

  const userid = frm.userid;//위에 form접근하는 넷 중 하나 적은후
  const userid = document.forms['myform'].elements[0];	//한번에 적어도 무관

• id로 바로 찾아주기

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

• nth로 찾기

  const userid = document.forms['myform'].elements['userid'];
  const userid = document.forms[0][0] 

🎁 이벤트 객체(Event Object)

• 특정 타입의 이벤트와 관련이 있는 객체
• 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있음
• 모든 이벤트 객체는 이벤트 타입을 나타내는 type 프러퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가지고 있음
• 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달

function sendit(e){     //e는 이벤트 객체
	console.log(e.target);  //이벤트 타겟(button)
	console.log(e.type);    //이벤트 타입(onclick)
}
<input type = "button" onclick="sendit()" value="완료">

이벤트 등록

객체.addEventListner(이벤트명, 실행할이벤트리스너, 이벤트전파방식);

• 이벤트 타입 : 이벤트 리스너를 등록할 이벤트 타입
• 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너
• 이벤트 전파 방식 : false면 버블링(bubbling) 방식, true면 캡처링(capturing) 방식
  • 버블링 방식:이벤트가 발생한 요소부터 시작해서, DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식
    Document 객체뿐만 아니라 가장 마지막에는 Window 객체까지 계속 이어짐
  • 캡처링 방식:이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면 전파되는 방식
    먼저 Window 객체의 리스너가 실행된 후, Document 객체에 등록된 리스너가 실행되고, 또다시 그 자식 요소에 등록된 리스너가 실행
  • 이벤트 전파 취소 방법:stopPropagation() 메소드나 cancelBubble 프로퍼티를 이용

이벤트 제거

객체.removeEventListner(이벤트타입, 이벤트리스너);

🏳 location 객체

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

location 객체의 instance property

• location.href: 페이지 URL 전체 정보를 리턴 또는 URL을 지정하여 페이지를 이동
• location.protocol: 콜론을 포함하는 https, http, ftp 등 프로토콜 정보를 리턴
• location.hostname: 호스트의 이름 리턴
• location.pathname: URL 경로부분의 정보를 리턴
• location.port: URL의 포트번호를 리턴
• location.host: 호스트의 이름과 포트번호를 리턴

location 객체의 instance method

• location.reload(): 새로고침
• location.assign(): 현재 창에 지정된 URL 주소에 존재하는 문서 불러오기
• location.replace(): 새문서를 불러오기 전에 현재 문서를 브라우저의 히스토리에서 제거하고, 문서 불러오기

⏲ history 객체

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

history 객체의 instance property

• history.length: 현재 브라우저의 히스토리 목록의 개수

history 객체의 instance method

• history.back(): 뒤로 이동
• history.forword(): 앞으로 이동
• history.go(0): 새로고침

💻 screen 객체

• 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체

screen 객체의 instance property

• screen.width: 현재 사용자의 디스플레이 화면의 너비 (px)
• screen.height: 현재 사용자의 디스플레이 화면의 높이 (px)

  (비교)
  window.outerWidth: 현재 브라우저 창의 너비 (px)
  window.outerHeight: 현재 브라우저 창의 높이 (px)

• screen.availWidth: 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 화면의 너비
• screen.availHeight: 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 화면의 높이

🧭 navigator 객체

• 브라우저 공급자 및 버전 정보등을 포함한 브라우저에 대한 정보를 저장하는 객체

navigator 객체의 instance property

• geolocation: GPS 정보를 수신하는 프러퍼티

const success = function(loc){
	console.log(loc.coords.latitude);   //위도
	console.log(loc.coords.longitude);     //경도
}
const fail = function(msh){
	console.log(msg.code);
}
navigator.geolocation.getCurrentPosition(success, fail); 
//성공시 success(앞), 실패시 fail(뒤) 함수 호출

🌌 window 객체

window 객체의 instance method

• window.alter(): 대화상자 -> 확인 버튼을 눌러야 다른 작업 가능
• window.confirm(): 대화상자 -> 확인/취소 버튼을 눌러야 다른 작업 가능
• window.prompt(): 대화상자로 메시지 입력받기
  -> 입력하고 확인 버튼을 눌러야 다른 작업 가능
• window.setTimeout(호출할 함수, 지연시간):명시된 시간이 지난 뒤에 지정된 함수를 호출
• window.setInterval(호출할 함수, 지연시간): 지정된 시간 간격마다 지정된 함수를 반복적으로 호출
• window.clearTimeout(timeoutID): setTimeout() 계획된 함수의 호출 취소
• window.clearInterval(timeoutID): setInterval() 반복되는 함수의 호출 취소