[S1U11] JS/브라우저 DOM

DOM 기초

DOM이란? Document Object Model의 약자로, HTML 요소를 JavaScript 객체처럼 조작할 수 있는 모델을 말한다.

✏️ HTML에 JavaScript 적용하기

HTML을 JavaScript에서 조작하기 위해서는 HTML 문서와 JavaScript 문서를 연결해주어야 한다. 이 때 HTML 문서 내에 <script> 태그를 이용하여 JavaScript를 불러올 수 있다.

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 태그를 만나면, 웹 브라우저는 HTML 해석을 멈추고 <script> 태그를 먼저 실행한다. <script> 태그는 등장과 함께 실행된다.

`<script>` 태그 추가하는 방법

<head> 태그 안에 추가

<html>
  <head>
    <script src="javascript.js"></script>
  </head>
  <body>
    <h2>Hello JavaScript!</h2>
  </body>
</html>

<head> 태그 안에 <script> 태그를 추가할 경우, <body> 태그 내부를 해석하기 전 <script> 태그를 먼저 해석하기 때문에 JavaScript에서 <body> 태그 내부의 요소를 참조할 경우 읽어들이지 못한다.

<head> 태그 안에 <script> 태그를 추가할 경우, 웹 브라우저가 완전한 형태로 보이지만 js 파일 용량이 크고 인터넷 속도가 느리다면 웹 브라우저를 보기까지 많은 시간이 소요된다.

<body> 태그 끝에 추가

<html>
  <head>
  </head>
  <body>
    <h2>Hello JavaScript!</h2>
    <script src="javascript.js"></script>
  </body>
</html>

<body> 태그 안에 <script> 태그를 추가할 경우, <body> 태그 내부를 해석하고 <script> 태그를 해석하기 때문에 JavaScript에서 <body> 태그 내부 요소를 참조해도 읽을 수 있다.

<body> 태그 안에 <script> 태그를 추가할 경우, 사용자가 웹 브라우저의 내용을 빠르게 확인할 수 있으나 HTML 코드가 js에 의존적이라면 의미있는 화면을 보기까지는 시간이 오래 걸릴 수 있다.

<head> 태그 안에 defer 속성과 함께 추가

<html>
  <head>
    <script defer src="javascript.js"></script>
  </head>
  <body>
    <h2>Hello JavaScript!</h2>
  </body>
</html>

<script> 태그 내에 defer 속성을 추가하면 HTML 해석이 중단되지 않고 js 파일을 병렬적으로 다운로드 후 실행된다.

<head> 태그 안에 <script> 태그를 defer 속성과 함께 추가할 경우, HTML 해석과 <script> 태그 해석이 동시에 일어나기 때문에 빠르고 완전하게 웹 브라우저를 볼 수 있다.

✏️ DOM으로 자식요소, 부모요소 출력하기

console.dir(document.body.children); // <body>의 자식요소들을 객체처럼 출력(console.dir)
console.dir(document.body.parentElement); // <body>의 부모요소를 객체처럼 출력

<body>의 첫 번째, 두 번째, ..., n 번째 자식만 조회하려면 document.body.children[n-1]로 조회하면 된다.

DOM 다루기

✏️ DOM 기본 메소드

CRUD

CRUD란? 만들고(Create) 조회하고(Read) 갱신하고(Update) 삭제하는(Delete) 것을 말한다.

CREATE

document.createElement('div'); // <div> 요소를 만든다.

READ

document.querySelector('.tweet'); // class="tweet"인 요소 중 첫 번째 요소를 조회한다.
document.querySelectorAll('.tweet'); // class="tweet"인 모든 요소를 유사 배열로 조회한다.

이전 버전 브라우저 호환성을 위한 옛날 방식 READ
document.getElementById('tweet'); // document.querySelector('#tweet')와 동일
document.getElementsByClassname('tweet'); // document.querySelector('.tweet')와 동일

UPDATE

document.querySelector('.tweet').textContent = 'tweet';
// class="tweet"인 요소 중 첫 번째 요소의 문자열을 'tweet'으로 변경한다.(update)

const newTweet = document.createElement('div');
newTweet.classList.add('tweet'); // newTweet에 class="tweet"을 추가한다.(update)

document.body.append(newTweet); // newTweet을 <body>의 자식요소로 추가한다.(update)

DELETE

newTweet.classList.remove('tweet') // newTweet의 class="tweet"를 삭제한다.
newTweet.remove(); // newTweet 요소를 삭제한다.

document.body.removeChild(document.body.firstChild); // body의 특정 자식요소(첫 번째)만 삭제한다.

removeChild와 while, forEach, let of 문을 이용해 자식요소 여러개를 삭제할 수 있다.

이벤트 객체

내용

'🐶 FE 41기 > Review' 카테고리의 다른 글

[S2U2] JavaScript 객체 지향 프로그래밍 (1)	2022.09.21
[S2U1] JavaScript 고차 함수 (0)	2022.09.20
[S1U10] JavaScript 핵심 개념과 주요 문법 (0)	2022.09.07
[S1U9] JavaScript 배열, 객체 (0)	2022.09.05
[S1U8] Linux/Git 기초 (0)	2022.09.01