[JS Tam9생활] #1 DOM

DOM ( Document Object Model) 

: 프로그래밍 언어로 DOM 구조에 접근할 수 있도록  방법을 제공하여 구조 나 스타일을 변경할 수 있게 돕는 인터페이스.

참고 :  https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

- HTML, XML 문서의 프로그래밍 interface

- 문서의 구조화된 표현을 제공

- 프로그래밍 언어가 DOM에 접근할 수 있는 방법 제공

 

 

DOM을 찾는 방법

아래 메서드를 통해서 

getElement	getElements
querySelector	querySelectorAll

 

getElement

document.getElementsByTagName('div’)

document.getElementById('name’)

document.getElementsByClassName('.todo-list')

 

querySelector

일치하는 첫번째 element

document.querySelector('.search-input-style')

 

 

BOM (Browser Object Model)

: 웹브라우저의 기능을 객체처럼 다루는 모델

웹브라우저의 다양한 기능을 객체처럼 다루는 모델로 웹의 일부분을 제어할 수 있게 함

 

window	브라우저 창 객체
screen	사용자의 디스플레이 정보 객체
location	현재 페이지의 url
navigator	웹브라우저 및 브라우저 환경 정보 객체
history	현재 브라우저가 접근한 URL 히스토리

예시로 블로그 같은 곳에서 글을 작성하다가 껐을 때

window.onbeforeunload = () => '작성 중인 메세지가 있습니다'

참고 ) 크롬에서는 저 메세지가 나오지 않는다.

 

 

 

 

즉 JS 는어떤 이벤트(click 과 같은) 가 일어나는지 감시하는 것이고 그 이벤트가 발생한 element가 DOM의 노드이다.

우리는 DOM에 있는 DOM property를 통해서 listener를 붙여놓은 것 

 

 

---

🎙미니 인터뷰 타임

DOM이 왜 필요한가요?

: DOM은 프로래그래밍 언어가 문서요소에 접근하기 위한 방법을 제공하고 있기 때문에 그 구조나 스타일을 변경하기 위해 꼭 필요한 인터페이스입니다.

 

DOM을 찾는 방법을 말해보세요.

: 크게 querySelecotr 와 getElement 2가지 메서드가 있는데요, q에서는 id,ClassName등을 이용해 가져올 수 있고 , g 에서는 일치하는 가장 첫번째 요소등을 가져와 접근할 수 있습니다.

 

DOM을 조작하는 메서드를 말해보세요.

출처)https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

• element.innerHTML
• element.style.left
• element.setAttribute()
• element.getAttribute()
• element.addEventListener()

DOM의  노드를 이요해  element를 선언하고 조작할 수 있다.