[SEB_FE_44] JS(9) - DOM

오늘 배운 주제

---

• DOM 기초
• DOM 다루기 CRUD(Create, Read, Update and Delete)

오늘 배운 내용

---

• 웹 브라우저는 script 요소를 만나면 HTML 해석을 일시정지

• CREATE

document.createElement('div')

• APPEND

const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)

• READ

1. querySelector

const oneTweet = document.querySelector('.tweet') // querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다

const tweets = document.querySelectorAll('.tweet') // 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll 을 사용

• UPDATE

const oneDiv = document.createElement('div');
console.log(oneDiv) // < div>< /div>

oneDiv.textContent = 'dev';
console.log(oneDiv) // < div>dev< /div>
// textContent를 이용해 문자열을 입력합니다.

oneDiv.classList.add('tweet')
console.log(oneDiv) // < div class="tweet">dev< /div>
// classList.add를 이용해 'tweet' 클래스를 추가합니다.

const container = document.querySelector('#container')
container.append(oneDiv)
// append를 이용해 container의 자식 요소에 oneDiv를 추가합니다.

오늘의 과제

---

오늘부터 16시부터 유효성 검사 페어가 있음.
리뷰는 내일 할 예정

어제 바뻐서 블로그 이제씀...