💻 Unit 11
유닛 11 에서 DOM에 대해서 배운내용을 정리해보려고 한다.
DOM
📍 DOM 이란?
DOM은 Document Object Model의 약자로 HTML요소를 Object(JavaScript Object)처럼 조작 할수 있는 모델이라고 한다. 문서의 구조화된 표현과 접근 방법을 제공해서 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.
쉽게 말하면 자바스크립트를 이용해서 HTML을 조작할 수 있게 하는것이 DOM이다. 하지만 DOM은 자바스크립트와 완전히 다른 개념이다. DOM은 플랫폼이나 구체적인 언어 구현에 종속된 것이 아닌 언어 독립적 인터페이스라고 한다. 꼭 자바스크립트로 구현할 필요없이 DOM 인터페이스 구현으로 DOM을 조작할 수 있다.
📍 <script> 두가지 방법
1. <head> 안쪽에 삽입하는 경우
이경우에는 코드는 위에서 아래로 해석하기 때문에 head태그를 읽고있을때는(parsing) 아직 body태그 내용을 아직 해석하기 전이다. 그래서 스크립트는 그 아래에 있는 DOM요소에 접근할 수가 없다.
2. <body> 요소가 끝나기 전에 삽입하는 경우
body태그를 다 해석하고 script태그를 통해 자바스크립트가 작동을 한다.
body안에 있는 HTML요소가 아주 클 경우에는 그것 전체를 다 해석하고 그다음 스크립트가 해석 되기 때문에 속도가 느려질 가능성이 있다.
💡 defer async
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script defer src="main.js"></script>
</head>⭐ defer
HTML을 파싱을 하다가 defer를 확인하고 js파일을 다운로드 명령시킨후 나머지 HTML을 끝까지 파싱을 한다. 그 이후 마지막 파싱이 끝나면 다운로드가 완료된 js파일을 실행하도록 한다. 여러가지 js파일이 있을 경우 문서에 추가된 순서로 실행 된다.
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script> async src="main.js"></script>
</head>async
HTML 파싱을 하면서 병렬로 함께 js파일을 다운 받다가 다운이 완료가 되면, HTML 파싱을 중단하고 js파일을 실행한 뒤에 다시 HTML 파싱한다.
HTML파일이 파싱이 끝나기 전에 실행되기 때문에 DOM요소를 조작하는 코드가 있으면 요소가 정의되지 않을 가능성이 있기에 위험하다. 또한 여러가지 js파일을 async속성을 통해 다운받으면 문서에 추가된 순서에 상관없이 먼저 다운로드된 순서로 파일이 실행되므로 문제가 발생할 수 있다.
📍 DOM 구조 조회
console.dir 를 사용하면 DOM을 객체의 모습으로 출력한다.
console.dir(document.body.children)
// body태그의 자식요소들이 객체모습으로 출력한다.
let newsContents = document.body.children[1]
// body태그의 두번째 자식요소를 변수에 할당
console.dir(newsContents.parentElement)
// newsContents의 부모요소 객체로 출력
parentElement부모요소를 가리키는 속성
📍 DOM 다루기
먼저 CRUD 마스터 하기! CRUD란 Create , Read , Update and Delete로서 가장 기본적인것 이다.
📌 Create
document.createElement('div')document객체의 createElement 메서드를 이용해 <div> 요소 만들기!
📌 Append
const tweetDiv = document.createElement('div')
// 변수에 새로운 <div>요소를 할당
document.body.append(tweetDiv)
// 새로운 <div>요소를 <body>요소에 append (추가)
📌 Read
const oneTweet = document.querySelector('.tweet')
// querySelector로 클래스 이름이 tweet인 HTML요소 하나 조회
const tweets = document.querySelectorAll('.tweet')
// querySelectorAll로 클래스 이름이 tweet인 모든 HTML요소를 유사 배열로 조회
document.getElementById('container')
// 옛날 방식이지만 알아두기!!querySelector를 통해 HTML 엘리먼트의 정보를 조회할 수 있다.- HTML요소(
"div"), id("#idname"), class(".classname") 을 이용해 조회한다.
const container = document.querySelector("#container") // 조회
const tweetDiv = document.createElement('div') // 생성 (생성했지만 붕뜬 상태)
container.append(tweetDiv) // 조회했던 위치에 추가 📌 Update
const oneDiv = document.createElement('div') // 생성
oneDiv.textContent = 'dev'; // 비어있는 엘리먼트에 문자열 입력
oneDiv.classList.add('tweet') // div엘리먼트에 class 추가
📌 Delete
const container = document.querySelector('#container') // id 콘테이너 값 찾아서 할당
const tweetDiv = document.createElement('div') // div 생성
container.append(tweetDiv) // 콘테이너에 추가
tweetDiv.remove() // remove를 이용해 요소를 삭제remove를 이용해서 요소를 삭제할 수 있다.
document.querySelector('#container').innerHTML = '';
// id container 요소 아래의 모든 요소를 지운다const container = document.querySelector('#container')
while (container.firstChild) {
container.removeChild(container.firstChild)
}
// container의 첫번째 자식이 있으면 (true)라면,
// 첫번째 자식요소를 지운다.
// 첫번째 자식요소를 지우고 두번째 자식요소가 첫번째 자식요소가 되므로 모든 자식요소가 삭제된다.removeChild 자식요소를 지정해서 삭제하는 메서드, 반복문을 이용해서 모든 자식요소를 삭제 가능하다.
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
// 컨테이너의 자식요소가 1개 남을때까지
// 컨테이너의 자식요소를 지우는데
// 컨테이너의 마지막 자식요소를 제거한다.
// 마지막 남는거는 첫번째 자식요소가 남는다const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// 클래스명이 tweet인 요소를 전체를 찾아서 배열로 만든다
// foreach문을 사용해서 배열 하나씩 함수가 실행되어서
// 클래스명이 tweet인 요소는 전부 제거 된다.
//or
for (let tweet of tweets){
tweet.remove()
}
// for in 문법을 사용해서 전부 제거할 수 있다.