DOM
DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다.
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script>
요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다.
HTML 해석을 잠시 멈춘 웹 브라우저는 <script>
요소를 먼저 실행한다.
CRUD
CREAT
const tweetDiv = document.createElement('div') //새로운 div 요소 생성
READ
const container = document.querySelector('#container') //id가 container인 요소 조회 const tweetDiv = document.createElement('div') // div 요소 생성 container.append(tweetDiv) //container의 맨마지막 자식요소로 tweetDiv 추가
UPDATE
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
oneDiv.classList.add('tweet') // oneDiv에 tweet 클래스 부여
console.log(oneDiv) // <div class="tweet">dev</div>
DELETE
const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
오늘의 감정
오늘 공부를 하기 전에 항상 자바스크립트에서 queryselector
라는 언어가 나오면 어려워 보이고 두려웠다.
깊게 가면 당연히 어렵겠지만 정말 이해가 안될정도로 어려운 부분은 없었다.
오늘 과제로 유효성 검사를 하면서 그동안 배웠던 조건문과 함수를 내가 만들어 볼 수 있었다. 페어와 함께 고민하다 보니 과제는 금방 끝낼 수 있었다.
페어는 지난 그룹회고에서 만났던 사람이었다. 그래서 편하게 시작할 수 있었다. 과제를 조금 일찍 끝내고 이런 저런 이야기를 많이 나눴다.
그리고 내일 유효성 검사의 css를 건드려 보기로 했다.
첫 인상이 매우 안좋았던 dom덕에 이제는 이름만으로 겁을 먹진 않을 것 같다.
뭐든지 부딪혀 보고 판단하자!!