DOM
DOM이란?
DOM(Document Object Model)은 HTML 요소를 Object처럼 조작할 수 있는 Model이다.
웹 브라우저가 코드를 해석하는 과정에서 <script> 요소를 만나면 HTML 해석을 잠시 멈춘다.
👉 <script> 요소는 등장과 함께 실행된다.
< script > 요소를 추가하는 두가지 방법
head 태그 안에 넣는 경우
HTML은 위에서 아래로 읽기 때문에 head 안에 불러온 script를 읽느라 body 안에 요소는 script를 읽은 후에 사용자에게 보여주게 된다.
🚨 문제점 1
만약 script 파일이 크고 무겁다면 HTML을 다 읽지 못한 화면을 사용자에게 보여주게 되고 이는 사용자 경험에 좋지 않을 것이다.🚨 문제점 2
HTML을 다 읽기 전에 script 파일을 실행시키기 때문에 만약 script 파일이 DOM 요소를 조작한다면 존재하지 않는 DOM 요소에 접근하려는 시도로 예상치 못한 문제가 발생할 수 있다.
body 태그 마지막에 넣는 경우
HTML을 다 읽은 후 script 태그를 읽기 때문에 script 태그를 head에 넣는 것보다 페이지 콘텐츠를 빠르게 볼 수 있다.
🚨 문제점
만약 웹을 사용하는데 자바스크립트 없이는 어떤 동작도 할 수 없게 되어있다면, 웹이 자바스크립트에 의존적이라면 HTML을 다 읽어도 의미가 없다.
script 태그의 속성으로 로딩 순서 제어
async
<script async src="script.js"> asnyc 속성이 더해진 script 태그가 HTML 태그 사이에 있는 경우 script 태그를 만나도 HTML 읽는 것을 멈추지 않는다.
script와 HTML을 동시에 읽다가 script를 다 읽으면 script가 실행되는 시점에 HTML 읽는 것을 멈추고 script 실행이 끝나면 재개된다.
🚨 문제점
자바스크립트에 의존적인 웹을 좀 더 빨리 실행시킬 수 있지만 결국에는 HTML을 읽는 것이 자바스크립트 파일을 실행시키는 동안에 멈추게 돼 script 태그를 head 안에 넣는 상황에서 일어날 문제를 겪을 수 있다.또 실행시켜야 할 script 태그가 여러개일 때 순서에 상관 없이 먼저 다운로드 받아지는 script를 먼저 실행시키기 때문에 해당 프로젝트가 script 파일의 실행 순서에 영향을 받는다면 문제가 될 수 있다.
defer
<script defer src="script.js"> async처럼 script 태그를 만나도 HTML 읽는 것을 멈추지 않으며 차이점은 HTML을 다 읽고 난 뒤에 script가 실행된다.
😇 해결
HTML을 읽는 것을 중간에 멈추지 않고 문제점2의 단점도 개선시킬 수 있다.여러개의 script 태그를 이용해도 미리 다운을 다 받고 HTML도 끝까지 파싱시킨 후에 순서대로 실행되기 때문에 async의 단점을 보완할 수 있다.
script 내부에서 로딩 순서 제어
DOMContentLoaded와 onload를 활용하면 javascript 자체에서 로딩 순서를 제어할 수도 있다.
DOMContentLoaded 내부의 코드는 DOM 생성이 끝난 후에 실행되고 onload 내부의 코드는 문서에 포함된 모든 콘텐츠(images, script, css 등)이 전부 로드된 후에 실행된다.
DOM 다루기
createElement()
새로운 요소 만들기
document.createElement('div')
append()
변수 tweetDiv에 담긴 새로운 < div > 요소를 < body 요소에 append한다. document.body.append(tweetDiv)
querySelector()
querySelector에 '.tweet' 을 첫 번째 인자로 넣으면 클래스 이름이 tweet인 HTML 요소 중 첫 번째 요소를 조회한다.
const oneTweet = document.querySelector('.tweet')
querySelectorAll()
인자에 넣은 값과 맞는 여러 개의 요소를 한 번에 가져온다. 이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용할 수 있지만 정확히는 배열이 아니다. 이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부르며 정식 명칭은 Array-like Object이다.
const tweets = document.querySelectorAll('.tweet')
textContent
비어있는 div 요소에 문자열을 입력한다.
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>classList.add()
요소에 클래스를 추가한다.
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>setAttribute()
요소의 속성값을 설정한다.
setAttribute(name, value)
remove()
삭제하려는 요소의 위치를 알고 있을 경우 사용
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.🤔 여러 개의 자식 요소를 지우고 싶다면?
document.querySelector('#container').innerHTML = '';innerText는 간편한 대신 보안상의 문제가 있기 때문에 removeChild()를 사용해주는 것이 좋다.
removeChild()는 자식 요소를 지정해서 삭제하는 메서드이며 모든 자식 요소를 삭제하기 위해 반복문을 활용할 수 있다.// 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드 const container = document.querySelector('#container'); while (container.firstChild) { container.removeChild(container.firstChild); }
참고
< script > 태그는 어디에 위치해야 할까요?
[HTML] script 태그는 어디에 위치 해야 할까?
자바스크립트의 DOM이라는 걸 들어보기는 했는데 제대로 공부한 건 처음이라 신기했다. 내가 사용했던게 DOM이었다니😮 <script> 태그가 아래에 있지 않으면 자바스크립트가 가끔 작동하지 않아서 이유는 모르고 무조건 아래에 배치했었는데 이번 챕터에서 그 이유를 명확하게 알게되어서 좋았다. 코드스테이츠 과정을 진행할수록 지식들을 반듯하게 차곡차곡 쌓아올리는 것 같아서 즐겁고 몇개월 뒤가 기대된다😊
