Recent Posts

Recent Comments

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Today

Total

관리 메뉴

DH의 개발 공부로그

[Javascript] DOM에 대해서 알아보자! 본문

JavaScript

[Javascript] DOM에 대해서 알아보자!

DeveloperDH 2022. 6. 16. 00:22

728x90

1. DOM(Document Object Model)

DOM이란?
DOM은 구조화된 문서를 객체로 표현하는 형식을 말합니다.

2. 웹브라우저 동작 과정

웹서버로부터 html 파일을 가져옴
가져온 html 파일과 css정보를 파싱(parsing)하여 DOM tree 생성, CSSOM tree 생성
DOM / CSSOM tree를 기반으로 Render tree 생성

3. 웹브라우저 동작과정과 Javascript

html 코드를 기반으로 DOM 트리를 구성하는데, javascript 코드인 <script>를 <head> 내에 넣으면
DOM 트리가 구성하기 전에 <script> 태그를 만나면서 javascript 엔진에 제어권을 넘기게 됩니다.

javascript 엔진에 제어권을 넘기게 되면 자바스크립트 엔진이 해당 js 코드 파일을 로드해서 실행하고,
그후 html로 넘어와서 나머지 코드를 읽고 DOM 트리 구성부터 화면에 표시까지 진행하게 됩니다.

따라서 <head>안에 javascript를 넣으면 DOM tree 구성전에 실행이 되기때문에
DOM을 제어하는 자바스크립트의 경우에는 에러가 날 수 있고, 또는 정상적으로 실행이 되지 않는다.

DOM을 제어하는 javascript 코드는 `</body>` 태그 직전에 `<script>` 태그로 코드 파일 형태로 추가해야한다.

window 와 BOM(Browser Object Model)

1. window

window는 DOM 문서를 담은 창을 나타내며, 즉 최상위 객체,브라우저 환경 전체 객체, 모든 객체가 소속된 객체입니다.
따라서 window를 코드에서 생략이 가능합니다.

// 아래 두 코드는 동일하다
alret("hello");
window.alert("hello");

2. BOM

BOM은 브라우저 객체로 자바스크립트가 문서 이외의 브라우저와 상호작용을 하기 위해서 나타났습니다.
window 객체를 통해 접근이 가능합니다.

BOM의 주요 객체

navigator 객체 : 브라우저와 운영체제의 대한 정보 제공
location 객체 : URL 관련 핸들링
screen 객체 : 브라우저 화면에 대한 정보 제공
history 객체 : 브라우저의 세션 기록 핸들링

console.log(navigator.userAgent); // 브라우저 정보
console.log(navigator.platform); // 운영체제 정보
console.log(location.href); // 현재 url 정보

Document

document는 window 객체의 속성이기 떄문에 window.document 이렇게 접근을 해야하지만, 위에서 말했듯이 window는 생략이 가능하기 떄문에 document로 접근하면 된다. document 객체로 HTML / CSS 등 문서의 코드를 수정을 할 수 있고,
document 객체를 이용하는 주요 메서드와 프로퍼티에는 다음과 같은 것이 있습니다.

찾기

메서드

document.getElementById(아이디) : 해당하는 아이디로 찾기
document.getElementsByTagName(태그) : 태그로 찾기 (여러개의 값이 선택되기 때문에 배열로 값 리턴)
document.getElementsByClassName(클래스이름) : 클래스 이름으로 찾기 (여러개의 값이 선택되기 때문에 즉 배열로 값 리턴)
document.querySelector(css선택자) : CSS Selector로 찾기 (찾은 CSS 선택자중에서 첫번째 요소만을 찾음)
document.querySelectorAll(css선택자) : CSS Selector로 찾기(모든 요소 찾음, 배열로 리턴)

찾은 html 요소 확인&수정

프로퍼티

element.innerText : 요소 내용 확인 / 수정하기(태그 미포함)
element.innerHtml : 요소 내용 확인 / 수정하기(태그 포함)
element.attribute : 요소의 attribute 값 수정하기
element.style.property : 요소의 CSS 프로퍼티 값 수정하기

메서드로 신규 attribute 설정 또는 기존 attribute 값 수정 가능
```
element.setAttribute(attribute, value) // 요소의 attribute 값 설정
```

html 요소 생성&추가하기

메서드

document.createElement(tagName) : html 요소 생성하기
document.appendChild(element) : html 요소 추가하기

요소 생성 추가 예제

const newBlock = document.createElement("div"); // html 요소 생성
newBlock.innerText = "shape"; // html 요소 내용 수정
newBlock.setAttribute("class","box1"); // html 요소에 attribute 설정하기
newBlcok.style.background = "#000"; // css style background 적용
document.body.appendChild(newBox1); // html 요소 추가 (body의 하부 요소로 추가)

Javascript 이벤트(EVENT)

웹페이지에서 마우스를 클릭했을 때 또는 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 등등 어떤 사건을 발생시키는 것을 의미합니다.

이벤트 종류

마우스 이벤트

click : 요소를 마우스로 클릭했을때 이벤트 발생
mouseover : 요소에 마우스를 오버했을 때 이벤트 발생
mouseout : 요소에서 마우스를 아웃했을 때 이벤트 발생
mousedown : 요소를 마우스로 눌렀을 때 이벤트 발생
mouseup : 요소에서 마우스를 떼었을 때 이벤트 발생
mousemove : 요소에서 마우스를 움직였을 때 이벤트 발생

키(key) 이벤트

keydown : 키를 눌렀을 때 이벤트 발생
keyup : 키에서 손을 떼었을 때 이벤트 발생
keypress : 키를 누른 상태에서 이벤트 발생

폼(form) 이벤트

focus : 요소에 포커스가 이동되었을 때 이벤트 발생
blur : 요소에 포커스가 벗어났을 때 이벤트 발생
change : 요소에 값이 변경 되었을 때 이벤트 발생
submit : submit 버튼을 눌렀을 때 이벤트 발생
reset : reset 버튼을 눌렀을 때 이벤트 발생
select : input이나 textarea 요소 안의 텍스트를 드래그하여 선택 했을 때 이벤트 발생

로드(load) 및 기타 이벤트

load : 페이지의 로딩이 완료되었을 때 이벤트 발생
abort : 이미지의 로딩이 중단 되었을 때 이벤트 발생
unload : 페이지가 다른 곳으로 이동될 때 이벤트 발생
resize : 요소에 사이즈가 변경 되었을 때 이벤트 발생
scroll : 스크롤바를 움직였을때 이벤트 발생

이벤트 등록

addEventListerner() // addEventListerner()를 이용해서 이벤트 등록

onclick과 같이 직접 태그에 속성으로 특정 이벤트를 추가하는 방식을 이용해서 사용하기도 하지만, html과 javascript의 역할을 분리하는 차원에서 addEventListener()를 사용하는 방식을 권장합니다.

removeEventListerner()를 통해서 이벤트 삭제가 가능하며, addEventListerner()를 window에도 사용이 가능합니다.