DOM

DOM이란?

문서 객체 모델(Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

DOM에는 Core DOM, HTML DOM, XML DOM이 있다. HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법으로, 모든 HTML요소는 HTML DOM을 통해 접근이 가능하다.

Document 객체

DOM에서의 document object(문서 객체)란 웹 페이지를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 document 객체부터 시작해야한다.

Document 메소드

1. HTML 요소의 선택

*getElements로 시작하는 메서드는 결과값으로 HTMLCollection 또는 NodeList와 같은 컬렉션(collection)을 반환하기 때문에 인덱스를 입력해주어야한다.

const inputName = document.getElementsByName('name')**[0]**;

*.querySelector메소드의 경우는 마치 CSS 선택자처럼 사용해야 DOM 요소를 제대로 찾을 수 있습니다.
만약 복잡한 구조의  a태그의 href 속성에 접근하고자 한다면
document.querySelector('.category >.ribbon > a').href와 같이 작성할 수 있습니다.

2. HTML 요소의 생성

document.createElement()는 태그 이름을 사용해 새로운 요소를 만들, document.write()는 텍스트를 출력한다.

3. HTML 이벤트 핸들러 추가

4. HTML 객체의 선택

HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 객체를 손쉽게 선택할 수 있다.

• HTML 객체의 선택

  객체 집합	설명	DOM Level
  document.anchors	name 속성을 가지는 요소를 모두 반환함.	1
  document.applets	applet 요소를 모두 반환함. (HTML5에서 제외됨)	1
  document.body	요소를 반환함.	1
  document.cookie	HTML 문서의 쿠키(cookie)를 반환함.	1
  document.domain	HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함.	1
  document.forms	요소를 모두 반환함.	1
  document.images	요소를 모두 반환함.	1
  document.links	href 속성을 가지는 요소와 요소를 모두 반환함.	1
  document.referrer	링크(linking)되어 있는 문서의 URI를 반환함.	1
  document.title	요소를 반환함.	1
  document.URL	HTML 문서의 완전한 URL 주소를 반환함.	1
  document.baseURI	HTML 문서의 절대 URI(absolute base URI)를 반환함.	3
  document.doctype	HTML 문서의 문서 타입(doctype)을 반환함.	3
  document.documentElement	요소를 반환함.	3
  document.documentMode	웹 브라우저가 사용하고 있는 모드를 반환함.	3
  document.documentURI	HTML 문서의 URI를 반환함.	3
  document.domConfig	HTML DOM 설정을 반환함. (더는 사용하지 않음)	3
  document.embeds	요소를 모두 반환함.	3
  document.head	요소를 반환함.	3
  document.implementation	HTML DOM 구현(implementation)을 반환함.	3
  document.inputEncoding	HTML 문서의 문자 인코딩(character set) 형식을 반환함.	3
  document.lastModified	HTML 문서의 마지막 갱신 날짜 및 시간을 반환함	3
  document.readyState	HTML 문서의 로딩 상태(loading status)를 반환함.	3
  document.scripts		3
  document.strictErrorChecking	오류의 강제 검사 여부를 반환함.	3

자바스크립트와 DOM

위와 같은 Document 메소드를 이용하여 DOM 요소를 선택할 수 있을 뿐만 아니라, 선택한 요소의 스타일이나 내용을 변경할 수 있다.

Node 객체

Node란?

• 노드
  HTML DOM에서 정보를 저장하는 계층적 단위를 뜻한다.
• 노드 트리
  노드들의 집합으로 노드 간의 관계를 나타낸다.
  노드 트리의 모든 노드는 서로 계층적 관계를 맺고있다.
  자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

노드 트리

노드의 계층적 관계

노드의 종류

• 문서 노드 (document node)
  HTML 문서 전체를 나타내는 노드
• 요소 노드 (element node)
  모든 HTML요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드이다.
• 속성 노드 (attribute node)
  모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 요소가 가지는 속성 노드는 해당 노드의 자식 노드에는 포함되지 않는다.
• 텍스트 노드 (text node)
  HTML 문서의 모든 텍스트는 텍스트 노드
• 주석 노드 (comment node)
  HTML 문서의 모든 주석은 주석 노드

노드의 값

• 노드에 대한 정보는 아래 프로퍼티를 통해 접근할 수 있다.
  **.nodeName, .nodeValue, .nodeType** 등

• **.nodeType**은 DOM 노드의 유형을 식별하는 정수 값을 의미한다. 대표적인 HTML 노드별 nodeType 프로퍼티 값은 아래와 같다.

💡 요소 노드:1 속성 노드: 2 텍스트 노드: 3 주석 노드: 8 문서 노드: 9

이벤트(event)

웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생이다(마우스를 올렸을 때, 클릭할 때 등). 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 타입

발생한 이벤트의 종류를 의미한다. (폼, 키보드, 마우스, HTML DOM, Window 객체 등)

이벤트 핸들러

이벤트가 발생했을 때 그 처리를 담당하는 함수이다. 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.

이벤트 핸들러 등록

객체나 요소에 이벤트 핸들러를 등록하는 방법은 크게 2가지이다.

1. 자바스크립트 코드에서 프로퍼티로 등록

window.onload = function() { } *// 이 함수는 HTML 문서가 로드될 때 실행됨.*

1. HTML 태그에 속성으로 등록

<p onclick="this.innerText = '클릭!'">클릭해 보세요!</p>

이벤트 핸들러 전달

객체나 요소의 메서드에 이벤트 핸들러를 전달할 때는 addEventListener() 메서드를 사용할 수 있다.

대상객체.addEventListener('이벤트명', 이벤트핸들러명, *이벤트전파방식)

*이벤트전파방식은 optional

이벤트 핸들러 주의할 점

addEventListener로 이벤트 핸들링 함수를 넘겨줄때 매개변수까지 기입하면 바로 함수를 실행하는 것이 되어버리므로, 매개변수는 생략 후 함수 이름만 전달해야 이벤트가 발생했을때 해당함수를 실행하게 된다.

// 이벤트 핸들러 이름만 전달
one.addEventListener('click', handleOnclick);
// 이벤트 핸들러와 매개변수까지 전달 -> 잘못된 방법
one.addEventListener('click', handleOnclick(one));

이벤트 핸들러 정지

e.preventDefault(); 

JavaScript에서 이벤트를 다룰 때, 이벤트의 기본 동작을 막는 메소드로 e.preventDefault()을 사용할 수 있습니다. 이 메소드는 이벤트가 발생한 요소의 기본 동작을 취소하거나 중지시킵니다.

[활용 - a태그에 자바스크립트를 적용시킬 때]
<a>요소를 클릭하면 기본적으로 해당 링크로 이동된다. 그러나 e.preventDefault()
를 사용하여 클릭 이벤트를 취소하면, 링크로 이동하는 기본 동작을 막을 수 있다. 이 때 function에 매개변수e를 넣어야한다.

💡 참고

• stopPropagation() : 부모자식간의 이벤트 요소의 전파막기 (형제요소는 전파안됨) → 이벤트 버블링 방지
• e.preventDefault() : 이벤트에 의한 기본 동작 막기
• return false : 위의 기능 두개 모두 적용

• return false를 사용할 경우 스크립트 내용에 오류가 있으면 기본 기능(페이지 이동 등)이 실행되기에 단순히 이동 기능을 막는 거라면 preventDefault를 사용해 주는 게 좋다. (오류가 나더라도 페이지 이동은 막아준다.)

*이미지 출처 : 엘리스 코딩