(SEB_FE) Section1 Unit10 [JS/브라우저] DOM

PYM·2023년 3월 7일
DOMJavaScriptbrowserfrontend
0

(SEB_FE) SECTION1

목록 보기
35/38
post-thumbnail

오늘은 학습 목표가 딥따 많다..! 힘내자 ...

  1. DOM의 개념을 이해한다.

  2. DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.

  3. HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.

  4. DOM과 JavaScript의 차이에 대해 이해할 수 있다.

  5. DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE)

  6. DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ)

  7. DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE)

  8. DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE)

  9. 생성한 HTML 요소를 부모 엘리먼트의 자식 엘리먼트로 포함 하기. (APPEND)

  10. innerHTML과 textContent의 차이를 이해한다.

  11. createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.

  12. HTML5 template tag 사용법을 이해할 수 있다.

  13. element와 node의 차이를 이해할 수 있다.

  14. children과 childNodes의 차이를 이해할 수 있다.

  15. remove와 removeChild의 차이를 이해할 수 있다.

  16. 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?

  17. offsetTop 등을 이용하여 좌표 정보를 조회할 수 있다.

  18. offsetWidth 등을 이용하여 크기 정보를 조회할 수 있다.

⭐돔 기초

DOM: Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model

  • HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있는 구조
  • 즉, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다!
  • HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다

⭐HTML에 JavaScript 적용하기

<script src="js파일 위치"></script>

  • HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용

  • 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈추고, <script> 요소를 먼저 실행

  • 🍀script 요소는 등장과 함께 실행된다!🍀

💫 <script> 요소를 추가하는 두 가지 대표적인 사례

🟢 1. <head> 요소에 추가

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
  </body>
</html>

🟢 2. </body> 가 끝나기 전에 추가

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </body>
</html>
  • HTML 요소를 이용하려면 이 방법을 사용해야 한다.

🟢 두 방식의 공통점과 차이점

console.log('welcome JavaScript');

let msgElement = document.querySelector('#msg');
console.log(msgElement);

myScriptFile.js 파일의 내용이 이럴 때,
1번 방법과 2번 방법 모두 첫번째 console.log는 잘 실행 한다.
하지만 2번과 달리, 1번에서는 두번때 console.log(msgElement) 결과가 null 이다

💫 DOM과 document객체

  • 자바스크립트에서 DOM은 document 객체에 구현되어 있다.
    따라서 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있다.

  • DOM 구조를 조회할 때에는 console.dir 이 유용!
    console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력해 준다.

  • 위와같이 body 요소의 자식 요소를 변수에 할당하여 사용 가능

💫 DOM 트리 구조

  • 이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 한다.

  • 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복된다는 점.

  • 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요하다.

⭐DOM 다루기

  • document 객체에는 많은 속성과 메서드가 존재한다.

  • 지금 당장 전부 알아야 할 필요는 없고,
    우선 CRUD(Create, Read, Update and Delete) 부터 외우자!
    ( DOM 뿐만 아니라, 다른 컴퓨터 언어를 공부할 때도, CRUD부터 확실히 하고 이후에 세세한 메서드를 암기하도록 하자)

💫 CREATE

  • createElement 메서드로 요소를 생성한다. 
const tweetDiv = document.createElement('div')

  • 이렇게 생성한 요소는 아직 부모 요소에 연결하지 않았기 때문에
    현재 공중부양 중인 상태!
    바로 밑에서 설명할 append로 부모요소의 자식요소로 추가해 주어야 한다.

💫 APPEND

  • append 메서드로 CREATE에서 새롭게 생성한 요소를 트리 구조와 연결
// <body>에 넣어 줌
document.body.append(tweetDiv)

💫 READ

  • DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인

  • 셀렉터로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용

🟢 querySelector

  • 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll 을 사용

  • 이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용할 수 있다.

  • 🚨주의🚨
    앞서 조회한 HTML 요소들은 배열이 아니다! 이와같은 '배열 아닌 배열'을
    유사 배열, 배열형 객체 등 다양한 이름으로 부름(정식 명칭은 Array-like Object)

  • 실제 동작은 같으나 더 오래된 표현법인 get~ 도 있다. 

// 아래 두 줄은 둘 다 ID가 container인 요소를 읽어서(READ) 변수에 할당한다.
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

// class가 tweet인 모든 요소를 읽어서 변수에 할당한다. (Array-like Object)
const queryAll = document.querySelectorAll('.tweet')
// 1. ID가 container인 요소를 container 변수에 담는다. 
// 2. div요소를 create해서 tweetDiv 변수에 담는다. 
// 3. tweetDiv를 container의 마지막 자식 요소로 추가한다.(Append)
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
  • 이러면 연결된 부모 없이 둥둥 떠 있던 생성된 요소가 부모를 찾아 연결된다!

💫 UPDATE

  • 기존에 생성한 태그를 업데이트하여, 보다 다양한 작업을 할 수 있도록 함
// 새롭게 oneDiv 라는 div 태그 생성(create) 
const oneDiv = document.createElement('div');

// 생성된 oneDiv 태그에 문자열 입력 (textContent) 
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

// 생성된 oneDiv 태그에 class 추가 (classList.add) 
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

💫 DELETE

  • remove 메서드를 사용해서 생성하고 추가한 요소 삭제 가능
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
  • 컨테이너의 모든 자식 요소를 지우려면 innerHTML 을 이용
// ID가 container인 모든 요소 아래의 모든 요소를 삭제한다. 
document.querySelector('#container').innerHTML = '';

  • BUT! innerHTML 은 보안에서 몇 가지 문제를 가지고 있다.
    이를 대신할 메서드 removeChild 를 사용하자

  • removeChild 는 한번에 모든 자식을 삭제할 수는 없다.
    따라서 모든 자식 요소 삭제를 위해, 반복문(while, for, etc.)을 활용할 수 있다⬇️

// 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드
const container = document.querySelector('#container');

// container의 첫 번째 자식 요소가 존재하면
while (container.firstChild) {
  // 첫 번째 자식 요소를 제거
  container.removeChild(container.firstChild);
}

// container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

// 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}
profile
PYM
목표는 "함께 일하고 싶은, 함께 일해서 좋은" Front-end 개발자
이전 포스트

(SEB_FE) Section1 Unit9 JavaScript Koans

다음 포스트

(SEB_FE) Section1 Unit10 유효성 검사 과제 (Feat. 뉴모피즘)

0개의 댓글