DOM (Document Object Model)

•  

• HTML 문서의 구조적 관계와 속성에 대한 모델

• DOM 은 html 문서를 object type으로 받아와서 javascript로 활용하는 것

• HTMl 문서를 대표하는 트리 구조

• JavaScript에서 document 객체를 통해 전역으로 접근할 수 있음

• Dom이 JavaScript 언어의 한 부분은 아님!

• 자바스크립트 언어를 다루게 해주는 API 이다.

• console.dir($0) : element에 딸려있는 각 종 속성들을 확인할 수 있음. 자주 확인하는 속성들은 아래 참고

  • nodeName

  • className : class 문자열

  • innerText: 엘리먼트에 담긴 내용 (문자만)

  • innerHTML : 엘리먼트에 담긴 내용 (태그포함) ⇒ 실제로 내용을 바꿀 수 있다. 태그까지 포함해서!

  • textContent : 엘리먼트에 담긴 내용 (공백포함) ⇒ 실제로 내용을 바꿀 수 있다. 태그를 적어도 그냥 문자로 나타남

  • value : form 입력값 ⇒ 웹사이트 form에서 입력한 값을 받아온다. (예를 들어 아이디 창에 아이디를 입력하고 $0.value를 하면 그 값이 콘솔에 출력된다.)

  • style : 스타일 객체

  • attributes : 속성 객체

  • childNodes / parentNode

  • children / parentElement

  • dataset : 데이터 속성 (아래 예제 참고)

  • offsetTop / offsetLeft / offsetWidth / offsetHeight

    • clientTop / clientLeft / clientWidth / clientHeight

    • onEventName (ex. onClink)

• HTML element를 JavaScript를 이용해 가져오는 방법

  • tag name을 이용 : getElementsByTagName
  • id 속성을 이용 : getElementById
  • class name을 이용 : getElementsByClassName
  • selector를 이용 : querySelector / querySelectorAll

• ADDING EVENT HANDLER

  • Event: 어떠한 동작의 발생을 전달하기 위해 객체가 보낸 메시지 (ex. 웹페이지의 로드, 버튼클릭, 브라우저 창 리사이즈)
  • DOM을 이용해 이벤트 핸들러를 추가할 수 있음

    • onEventName (ex. onClick) 아래예제참고

    • 어떤 이벤트들이 있는지 개발자 도구 eventlistener에서 확인할 수 있다.

    •  

---

 

dataset

/*html*/
<div data-user="steve" data-role="moderator" data-user-id="1">
  Steve Lee
</div>

/*Javascript*/
$0.dataset.user //'steve'
$0.dataset.role //'moderator'
$0.dataset.userId //'1'

 

event

let loginButton = document.querySelector('.primary-btn')
loginButton.onclick = function () {
  console.log('버튼이 눌렸어요!')
}

loginButton.onclick = function() {
  console.log(inputElement.value)
} //여기서 inputElement는 ID창에 입력한 값