TIL

DOM이해하기

• DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model 이다. 즉, 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.

HTML에서 JavaScript적용하기

HTML을 JavaScript에 적용하기 위해서는 <'script'> 태그를 이용해야 한다.

<script src = "myScriptFile.js"></script> => HTML 파일과 같은
 디렉토리에 존재하는 myScriptFile.js을 불러온다.

웹 브라우저가 작성된 코드를 해석하는 과정에서<script>요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다. HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행한다. <script> 요소는 등장과 함께 실행되는 것이다.

두 방식의 모두 myScriptFile.js내의 첫 번째 console.log를 출력하지만, 두 번째 console.log는 제대로 출력하지 못하고 있다.

Dom의 관계도 구조를 봤을때, body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있다. 이러한 자료구조를 컴퓨터 공학에서는 트리구조라고 한다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점이다. 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요하다.

Dom으로 HTML조작하기

CRUD - document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방식이다.

CREATE - createElement

새로운 div element를 만들고, 변수에 할당하였다. 하지만, 화면에는 변화가 없는데 tweetDiv는 현재 아무것도 연결되지 않은 하나의 노드이기 때문이다.

APPEND - append, appendChild

document.body.append(tweetDiv)를 통해 변수 tweetDiv 를 body 에 넣을수 있다.

• append() : 콘텐츠를 선택한 요소 내부의 끝부분에 삽입한다.
• prepend() : 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입한다.
  append VS appendChild
• append() : Javascript 함수이며, 문자열 삽입이 가능하다.
• appendChild() : DOM 함수이며, 문자열 삽입이 불가능. 여기에는 파라미터와 같은 element 가 필요하다.

READ - querySelector, querySelectorAll

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있다. 셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.

const oneTweet = document.querySelector('.tweet') - querySelector로 클래스 이름이 tweet인 HTML 엘리먼트중 첫 번째 엘리먼트를 조회한다.
여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용한다. 이렇게 조회한 HTML 엘리먼트들은 배열처럼 for문을 사용할 수 있다. 앞서 조회한 HTML 엘리먼트들은 배열이 아닌데, 이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 불린다. 정식 명칭은 Array-like Object 이다.
새롭게 추가된 tweetDiv 는 별도의 class 가 지정되어 있지 않아, CSS를 이용한 스타일링이 적용되지 않습니다. 새롭게 생성한 tweetDiv 에 class 를 붙여 스타일링을 적용해야 한다.

UPDATE - textContent, classList.add

textContent를 이용해 문자열을 입력한다.
classList.add를 이용해 'tweet'클래스를 추가한다.
append를 이용해 container의 자식 요소에 oneDiv를 추가한다.

DELETE - remove, removeChild

삭제하는 방법에도 여러 가지가 있는데, 먼저 삭제하려는 엘리먼트의 위치를 알고 있는 경우에 사용하는 방법으로 앞서 생성하고 추가한 tweetDiv 를 remove 메소드를 이용해 삭제 할 수 있다.
id가 container인 엘리먼트 아래에 tweetDiv를 추가하고, remove로 삭제한다.

여러 개의 자식 엘리먼트를 지우려면, innerHTML 을 이용하면된다.
document.querySelector('#container').innerHTML = ''; => id가 container인 엘리먼트 아래의 모든 엘리먼트를 지운다.
innerHTML 을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있다. 이 방법을 대신할 다른 메소드 removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드이다. 모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있다.
container의 첫 번째 자식 엘리먼트가 존재하면, 첫 번째 자식 엘리먼트를 제거한다.

Tomorrow