[SEB_FE_45] 2023.05.01 / DOM

📖 [강의 내용 및 개념 정리]
목차

• DOM 기초
• DOM 다루기

[DOM 기초]

DOM: Document Object Model의 약자, HTML 요소를 자바스크립트 Object처럼 조작할 수 있는 모델

[script 파일의 위치 및 리소스 로딩 최적화]

script 파일을 로드하는 <script> 태그의 위치와 속성을 활용하여 최적화하는 것은 개발자가 작성한 코드를 의도적으로 실행하기 위해, 속도 개선을 위해 중요하다.
다음은 이전에 script 파일 로드와 관련하여 정리해둔 링크를 삽입하였다.

• 🤿 (1) 내가 작성한 코드 → 웹 화면에 나오기까지 - 브라우저 렌더링 과정의 5-2-3) Javascript 파싱
• 🤿 (7) 리소스 로드 최적화 - async와 defer

[DOM 다루기]

DOM에는 많은 속성과 메서드가 존재하지만, 처음 집중해야 할 부분은 "CRUD(Create, Read, Update and Delete)"이다.

Create

엘리먼트를 생성하는 메서드 (createElement)

document.createElement('div')

하나의 엘리먼트를 만들었다고 해서 DOM 트리에 연결된 것은 아니다. DOM 트리와 연결하는 과정을 Append라고 한다.

Append

엘리먼트를 DOM 트리와 연결하는(즉, 화면에 추가하는) 메서드 (append)

const container = document.createElement('div');
document.body.append(container);

Read

엘리먼트를 조회하는 메서드(querySelector)

• 선택자를 통해 조회하는 메서드
• 선택자로는 HTML 요소, id, class를 사용

const container = document.querySelector('.container');

위 코드는 class가 'container'인 요소들 중 첫번째 요소를 받아온다.
만약 class가 'container'인 요소가 많고, 그 요소들을 모두 받아오고 싶다면 어떻게 해야할까?

엘리먼트들을 조회하는 메서드(querySelectorAll)

const containers = document.querySelectorAll('.container');

위 코드는 Object 형태가 아닌 유사배열(Array-like-Objects) 형태로 받아온다.

참고) Array-like-Object에 관해 정리한 링크
DOM Enlightenment 정리 (1장) 1.13 ~ 1.15

그 외 예전에 사용하던 DOM 조회 메서드(getElementBy~)

// 결과는 단수 Object
const container = document.getElementById('container');
// 결과는 유사배열
const items = document.getElementByClassName('items');
// 결과는 유사배열
const liLists = document.getElementByTagName('li');
// 결과는 유사배열
const names = document.getElementsByName('names');

Update

생성한 엘리먼트의 콘텐츠를 추가하기 위한 속성(textContent)

const container = document.createElement('div');
document.body.append(container);

container.textContent = 'Container';
console.log(container.textContent) 
// <div>Container</div>

위 코드는 엘리먼트를 생성하고 body 태그에 추가하여 DOM 트리 연결까지 된 container라는 변수의 엘리먼트에 textContent까지 추가한 코드이다.

CSS 스타일링을 위해 class를 추가하고 싶다면(classList의 add 메서드)

container.classList.add('container');

엘리먼트에 속성을 부여하기 위한 메서드(setAttribute)

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

Element.setAttribute()

Delete

삭제하려는 위치의 요소를 알고 있는 경우 (remove)

const container = document.querySelector('#container');
const oneDiv = document.createElement('div');
container.append(oneDiv);
oneDiv.remove(); // append 했던 요소 삭제

모든 자식 요소를 지우고 싶은 경우 (innerHTML = '')

const container = document.querySelector('#container');
container.innerHTML = '';

참고) ìnnerHTML의 보안에서의 잠재적 위험성

• innerHTML에 <script> 태그는 작동하지 않도록 지정되어 있음
• 하지만 제어할 수 없는 문자열을 설정할 때 여전히 보안 위험이 있음
  ex) el.innerHTML = "<img src='x' onerror='alert(1)'>";

참고) ìnnerHTML을 대신하여 엘리먼트를 추가하는 방법

• Element: setHTML() method
• Node.textContent

참고) ìnnerHTML을 대신하여 엘리먼트를 삭제하는 방법

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

const tweets = document.querySelectorAll('.tweet')
for (let tweet of tweets){
    tweet.remove()
}

심화

DOM과 JavaScript의 차이에 대해 이해할 수 있다.
createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
HTML5 template tag 사용법을 이해할 수 있다.
element와 node의 차이를 이해할 수 있다.
children과 childNodes의 차이를 이해할 수 있다.
remove와 removeChild의 차이를 이해할 수 있다.
같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
offsetTop 등을 이용하여 좌표 정보를 조회할 수 있다.
offsetWidth 등을 이용하여 크기 정보를 조회할 수 있다.