DOM

문서 객체 모델(DOM)이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스를 뜻한다.DOM은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.

CREATE

createElement

• 활용
  document.createElement("태그명")

ex) document.createElement("div")

READ

querySelector, querySelectorAll

• 활용
  document.querySelector.("태그이름")
  document.querySelector.("#아이디값")
  document.querySelector.(".클래스명")

ex) document.querySelector("#container")

자바스크립트에서 원시 자료형인 변수의 값을 조회하기 위해서는, 변수의 이름으로 직접 조회할 수 있다. 참조 자료형인 배열은 index를, 객체는 key를 이용해 값을 조회할 수 있다. 그러나 DOM으로 HTML 엘리먼트의 정보를 조회하려면 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있다.

하나의 엘리먼트만 가져올 때에는 querySelector를 여러개의 엘리먼트를 한 번에 가져오기 위해서는 querySelectorAll을 사용한다. 이렇게 조회한 HTML 엘리먼트들은 배열처럼 for문을 사용하지만 이것은 배열이 아닌 "유사배열" "배열형 객체" 등 다양한 이름으로 부른다.

Array-like Object

get으로 시작하는 DOM 조회 메소드는 오래된 방식으로 이전 버전의 브라우저와의 호환을 신경써야 할 때만 사용한다. (인지만 할 것)

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

• Futher Study

querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까요?
querySelector를 통해서 더 복잡한 작업을 할 수 있을까요?
querySelector의 부모는 꼭 document 객체여야만 할까요?

APPEND

append, appendChild

• 활용
  document.부모태그가 될 엘리먼트.append(자식태그가 될 엘리먼트)

ex) document.body.append(tweetDiv)

append & appendChild 차이

	append	appendChild
노드 객체(Node object)	O	O
문자열(DOM String)	O	X
반환값(return)	X	O
다중 값 허용	O	X

UPDATE

textContent, classList, setAttribute

• 활용
  엘리먼트.textContent = "텍스트내용"
  엘리먼트.classList.add("클래스명")
  엘리먼트.setAttribute("속성", "속성내용")

ex) oneDiv.textContent = "dev"
oneDiv.setAttribute("id", "container")

DELETE

삭제하려는 엘리먼트의 위치를 알고 있는 경우에 사용하는 방법 : remove, removeChild
여러 개의 자식 엘리먼트를 삭제 : innerHTML = "" , textContent = ""

• 활용
  지울 태그.remove()
  document.querySelector.(지울 태그를 찾을 수 있게 명시).innerHTML = ""

ex) tweetDiv.remove()
document.querySelector('#container').innerHTML = "";

innerHTML 을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있다. innerHTML은 크로스 사이트 스크립팅3 공격에 취약하고, 문자열 자체를 수정할 수 있기 때문에 악의를 가진 해커가

따라서 더 안전한 방법으로는 removeChild라는 메소드를 이용해 자식 엘리멘트를 지정하여 삭제하게 된다. 모든 자식 엘리멘트를 삭제하기 위해 반복문을 활용한다.

• innerHTML과 textContent의 차이

<p><h1 style="color:blue">Coffee</h1></p> 의 HTML코드에서 

p.innerHTML을 호출하면 다음과 같은 결과가 나타난다.

<h1 style="color:blue">Coffee</h1>

<p id="p"><h1 style="color:blue">Coffee</h1></p> 의 HTML코드에서 

p.textContent를 호출하면 다음과 같은 결과가 나타난다.

Coffee

• Further Study

element와 node의 차이 (difference between element and node in javascript dom)
children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)