DOM

DOM은 Document Object Model의 약자로 HTML 요소를 Object처럼 조작할 수 있는 모델이다.
DOM은 프로그래머 관점에서 바라 본 HTML 이며 브라우저 환경에서 JS를 이용해 HTML을 조작할 수 있다.

1. Script 요소의 위치

script 요소의 위치가 중요한 이유는 웹 브라우저가 작성된 코드를 해석하는 과정에서 script 요소를 만나면 웹 브라우저는 HTML해석을 멈추고 script 요소를 먼저 실행하기 때문에 script 요소의 위치 설정이 중요하다.

script 요소의 위치에는 대표적으로 head 태그 또는 body 태그가 끝나기 전에 넣는 방법이 대표적이다.

두 방식의 차이는 웹 브라우저가 코드를 해석하는 과정에서 다르다.
script 요소가 head 태그안에 오게 되면 body 부분의 HTML을 해석하기 전에 script 요소를 먼저 읽게되어 개발자가 의도하지 않은 상황이 발생할 수 있다.

그렇다고 무조건 body 태그가 끝나기 전에 script 요소를 넣는 것도 좋은 방법은 아니다.
그 이유는 script 내용이 크고 HTML 내용에 직접적으로 작동하는 코드들이 적다고 가정하면 body 태그가 끝나기 전에 script 요소를 넣는 것보다 head 태그에 위치하는게 속도면에서 더 좋을 것이다.

2. Document 객체

Document객체는 웹 페이지 그 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체로 접근해야한다.

자식 엘리먼트의 조회 방법

자식 엘리먼트의 조회 방법으로는 childNodes와 children이 있다.

childNodes

document.조회하고자하는요소.childNodes

childNodes는 요소의 자식 노드가 포함된 NodeList를 반환하며 NodeList에는 요소 노드뿐만 아니라 주석 노드와 같은 비요소 노드도 포함된다.

children

document.조회하고자하는요소.children

children은 요소의 자식 요소가 포함된 HTMLCollection을 반환하며 비요소 노드는 모두 제외된다.

부모 엘리먼트의 조회 방법

부모 엘리먼트의 조회 방법으로는 parentNode와 parentElement가 있다.

parentNode

document.조회하고자하는요소.parentNode

parentNode는 부모 노드가 없을때 document node를 리턴한다.
즉 parentNode는 html 요소 밖의 document node에도 접근할 수 있다.

parentElement

document.조회하고자하는요소.parentElement

parentElement는 부모 노드가 없을때 null을 리턴한다.
즉 parentElement는 html 요소 밖을 떠나지 못한다.

3. Document 메서드

Document 객체는 HTML요소와 관련된 작업을 도와주는 다양한 메서드들이 존재한다.
여기에서는 CURD에 관해서만 알아본다.

Create

새로운 HTML 요소를 생성하기 위해 제공되는 메서드로 createElement이 있다.

document.createElement("HTML요소")

createElement를 이용해 새로운 HTML 요소를 생성할 수는 있지만 HTML상에는 보이지 않는다.
그 이유는 생성한 HTML 요소는 append를 통하여 원하는 위치에 넣어주어야 하기 때문이다.

document.Element.append(생성된HTML요소)

Read

DOM으로 HTML 요소의 정보를 조회하기 위한 메서드는 다양하게 존재하며 HTML 태그, id, class, name의 속성값 으로 조회하거나 셀렉터를 인자로 받아 조회할 수 있다.

getElementByTagName

document.getElementByTagName("HTMLtag")

해당 태그 이름의 요소를 모두 조회한다.

getElementById

document.getElementById("Id")

해당 아이디의 요소를 조회한다.

getElementByClassName

document.getElementByClassName("Class")

해당 클래스의 요소를 모두 조회한다.

getElementByName

document.getElementByName("Name")

해당 name의 속성값의 요소를 모두 조회한다.

querySelector

document.querySelector("Selector")

해당 셀렉터의 첫 번째 요소를 조회한다.

querySelectorAll

document.querySelectorAll("Selector")

해당 셀렉터의 요소를 모두 조회한다.

Update

기존에 있던 HTML 태그의 내용을 변경하거나 새로 생성된 HTML 태그에 내용을 추가 하기 위해 제공되는 메서드들로 textContent, innerText, innerHTML가 있다.
추가적으로 HTML 태그의 class 또는 속성과 속성값을 변경하거나 추가할 수 있는 메서드로 classList, setAttribute에 대해서도 다룬다.

textContent

textContent는 Node의 속성으로 해당 Node가 가지고 있는 텍스트 값을 가져오며 텍스트 값을 입력하여 변경할 수 있다.

innerText

innerText는 Element의 속성으로 해당 Element 내에서 사용자에게 보여지는 텍스트 값을 가져오며 텍스트 값을 입력하여 변경할 수 있다.

innerHTML

innerHTML은 Element의 속성으로 해당 Element의 HTML, XML을 가져오며 텍스트 값을 입력하여 변경할 수 있다.

classList

classList자체는 읽기 전용 프로퍼티지만 add와 remove 메서드를 이용하여 추가적인 기능을 수행할 수 있다.

• classList.add

add메서드는 해당 HTML 요소의 class에 지정한 class 값을 추가한다.

Element.classList.add("Class")

• classList.remove

remove메서드는 해당 HTML 요소의 class에 지정한 class 값을 제거한다.

Element.classList.remove("Class")

setAttribute

setAttribute는 해당 HTML 요소의 선택한 속성의 속성값을 정하는 메서드이다.

Elemnet.setAttribute(name, value)

name : html 요소의 속성을 설정
value : name에 오는 속성의 속성값 설정

DELETE

HTML 요소를 삭제하기 위해 제공되는 메서드로 remove, removeChild가 있다.

remove

Element.remove()

해당 요소가 속한 트리에서 요소를 제거한다.

removeChild

자식 엘리먼트를 지정해서 삭제하는 메소드이다.

반환값으로는 DOM에서 자식 노드를 제거하고 제거된 노드를 반환한다.

반환값을 변수에 저장하지 않으면 삭제하는 노드의 참조가 더이상 없기 때문에 JS엔진의 GC(Garbage Collenction)에 의해 잠시 후 메모리에서 삭제된다.
만약 반환값을 변수에 담아 사용하면 다른 DOM위치에 붙여서 사용할 수 있다.

Node.removeChild(child)

child : DOM에서 제거할 자식 노드

remove 와 removeChild의 차이

remove와 removeChild는 기본적으로 같은 기능을 위해 사용하지만 remove는 노드를 메모리에서 삭제하고 종료하는데 반해 removeChild는 노드를 삭제하지는 않는다.
삭제가 아닌 메모리에 해당 노드는 그대로 존재하며 부모 노드와의 관계를 끊어 DOM 트리에서 해제하는 것이다.

또한 removeChild는 사용하기 위해서는 부모 엘리먼트가 필요하지만 remove는 부모 엘리먼트가 필요하지 않다.

4. Event(이벤트)

Event(이벤트)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

Event Listener

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. (엄밀히 비교하면 조금 다르지만 기능은 같다)

지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

이벤트 종류

이벤트에는 수많은 종류가 잇으며 이벤트 앞에 on을 붙여서 사용하면 된다.
여기에서는 대표적인 마우스 이벤트와 키 이벤트만 다룬다.

• 마우스 이벤트

click : 요소에 마우스를 클릭했을 때
dblclick : 요소에 마우스를 더블클릭했을 때
mouseover : 요소에 마우스를 올릴 때
mouseout : 요소에 마우스가 벗어날 때
mousemove : 요소에 마우스가 움직일 떄

• 키 이벤트

keydown : 키를 눌렀을 때
keyup : 키를 떼었을 때
keypress : 키를 누른 상태일 때

이벤트 리스너 등록 방법

이벤트 리스너 등록 방법에 객체나 요소에 프로퍼티로 등록하는 방법, 객체나 요소의 메소드로 이벤트 리스너를 전달하는 방법이 있다.

• 객체나 요소에 프로퍼티로 등록하는 방법

Element.on이벤트=function(){
  이벤트에동작할코드
}

• 객체나 요소의 메소드로 이벤트 리스너를 전달하는 방법

Element.addEventListener(이벤트, function(){
  이벤트에동작할코드
})