DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.
HTML을 조작할 수 있다는 게 무슨 뜻일까요? 여러 뛰어난 웹 개발자들이 모여 HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었습니다. 이렇게 만들어진 구조를 DOM이라고 합니다. DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다. 앞서 학습한 조건문과 반복문, 배열, 객체를 활용하면 소셜 미디어에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있습니다.
HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용합니다.
아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다.
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면,
웹 브라우저는 HTML 해석을 잠시 멈춥니다. HTML 해석을 잠시 멈춘
웹 브라우저는 <script> 요소를 먼저 실행합니다. <script> 요소는 등장과 함께
실행된다는 사실을 꼭 기억하세요.
이 <script> 요소를 추가하는 두 가지 대표적인 사례가 존재합니다.
하나는 <head> 요소에 추가하는 방법, 다른 하나는 </body> 가 끝나기 전에 추가하는 방법입니다.문제에 대한 답을 찾기 위해, 찾고자 하는 자식 요소를 찾아보세요. 이번에는 힌트가 있습니다. document.body 객체의 키 중에서 children을 찾아볼까요?
console.dir(document.body)를 통해 출력된 객체에서, children 속성을 찾을 수 있습니다. children 속성에 nav, news-contents, footer 가 자식으로 있는 것을 확인할 수 있습니다. 물론 document.body.children으로 바로 조회할 수도 있습니다.
const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)
그러나 DOM은 조금 특별한 방법을 사용해야 합니다. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 선택자(selector)를 전달하여 확인할 수 있습니다. 선택자로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.
참고로 querySelector는 선택자를 조회한다는 의미를 가지고 있습니다. query의 의미가 "질문하다"라는 것을 알고 있다면 역할을 쉽게 유추하실 수 있습니다. 이 query라는 단어는 개발자 간에 "ㅇㅇㅇ를 조회한다"라는 의미를 "쿼리를 날리다"라는 jargon(특정 영역에서만 사용되는 단어)로 굳어졌기 때문에 알고 있어야 합니다.첫 번째 엘리먼트를 조회할 수 있습니다.
const oneTweet = document.querySelector('.tweet')
HTML 문서에는 클래스 이름이 tweet 인 요소가 여러 개 있는 데, 변수 oneTweet에 할당된 요소는 단 하나입니다. 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll을 사용합니다. 이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용하실 수 있습니다.
앞서 조회한 HTML 요소들은 배열이 아닙니다! 이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다. 정식 명칭은 Array-like Object입니다. A
const tweets = document.querySelectorAll('.tweet')
get으로 시작하는 DOM 조회 메서드를 볼 수도 있습니다. 이런 옛날 방식을 사용해야 할 수도 있습니다.
oneDiv.textContent = 'dev';
앞서 생성한 div 엘리먼트를 container에 append 했을 때,
CSS 스타일링이 적용되지 않았습니다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>생성한 엘리먼트에 텍스트를 채웠고, 클래스를 추가하여 스타일링을 적용했습니다. 이번에는 append를 이용해 container의 자식 요소로 추가합니다.
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.innerHTML을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있습니다. 이 방법을 대신할 다른 메서드를 사용합니다. removeChild는 자식 요소를 지정해서 삭제하는 메서드입니다. 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다. 다음의 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드입니다.
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}