DAY 15. DOM

DOM이란 뭘까?

문서 객체 모델(Document Object Model)은 JavaScript Node 개체의 계층화된 트리다.
DOM은 HTML, XML 문서의 프로그래밍 API이다.
문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.

사실 우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API"이다.

웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 자바스크립트가 DOM을 통해서 웹페이지에 접근할 수 있다.

DOM은 유사배열이라 배열의 method를 사용할 수 없다.

1. element와 node의 차이

Node는 Element의 상위 개념이다. DOM 관련 객체는 대부분 Node에서 파생되었다고 봐도 과언이 아니다. Node의 기능을 적용(implements)한 객체는 여러 타입이 있는데, 그 중 가장 많이 사용되는 타입이 Element입니다.

2. children 과 childNodes 의 차이

children(텍스트 노드 제외)또는 childNodes(텍스트 노드 포함)

3. removeChild와 remove의 차이

remove() 는 노드를 메모리에서 삭제하고 종료한다.
반면 removeChild()는 노드를 삭제하는 것이 아니다. 메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것이다.

4. append와 appendChild의 차이

appendChild 메서드는 오직 Node 객체만 받을 수 있다.
appendChild 메서드는 한번에 하나의 노드만 추가할 수 있다.

append 메서드는 여러개의 노드와 문자를 추가할 수 있다.

5. tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)

유사배열을 새로운 배열에 복사하기
Array.slice() 또는 Array.forEach()사용함.

Vanila javascript DOM manipulation cheat sheet

CRUD & APPEND

CREATE - createElement

const tweetDiv = document.createElement('div')

APPEND - append, appendChild

document.body.append(tweetDiv)

const container = document.querySelector('#container')
container.append(tweetDiv)

tweetDiv를 container의 마지막 자식요소로 추가

READ - querySelector , querySelectorAll

const oneTweet = document.querySelector('.tweet')

클래스이름이 tweet인 HTML 엘리먼트 조회

const tweets = document.querySelectorAll('.tweet')

클래스 이름이 tweet인 모든 HTML 엘리먼트를 조회

UPDATE - textContent , classList.add

console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev' ;
console.log(oneDiv) //<div>dev</div>

textContent를 이용해 문자열 입력

oneDiv.classList.add('tweet')
console.log(oneDiv) //<div class ='tweet'>dev</div>

classList.add를 이용해 'tweet'클래스 추가

DELETE - remove, removeChild

tweetDiv.remove()

script tag의 위치

DOM에 접근하기위해서는 script src를 꼭 body태그 끝나기전에 적어야한다
브라우저가 코드를 해석하다가 <script> 태그를 만나면 html해석을 잠시 멈춘다. 그래서
head태그 끝나기 전에 <script>를 추가하면 DOM을 읽을 수 없다
그런데 head에 <script>를 넣고 src앞에 defer를 추가해주면 HTML과 자바스크립트를 동시에 병렬적으로 읽을 수 있다고 한다.

그외의 메소드

setAttribute

사용법

Element.setAttribute(name, value);

예시

let aElement = document.createElement('a')
aElement.setAttribute('id', 'laluna')
aElement.textContent = 'awesome'

결과

<a id = 'laluna'>awesome</a>
//아이디가 "laluna"이고, 내용이 "awesome"인 a 태그

prependChild

append와 달리 부모노드의 자식노드들중 가장 첫번째에 배치하는 것

let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]

event

event handler === event listner === event 콜백함수

on으로 시작하는 event

elementDiv.onclick = function ()
{
console.log('fire/trigger property event handler')
}

addEventListener

elementDiv.addEventListener('click',function()
{
console.log('fire/trigger addEventListener')
},false)

요즘엔 이걸 더 많이 사용한다.