concept/javascript

DOM (Document Object Model)

오연 : Oana 2020. 4. 11. 20:58
  •  

  • 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창에 입력한 값