Code States
Front-end boost camp
Today
I
Learned
📬 화요일 도착~ 5월 2일 DOM 시작
// HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js 불러오기
<script src="myScriptFile.js"></script>
웹 브라우저가 작성된 코드를 해석하는 과정에서 script 요소를 만나면 웹 브라우저는 HTML 해석을 잠시 멈추고 script 요소를 먼저 실행함
script 요소를 추가하는 두 가지 대표 사례
-- 첫째, head 요소에 추가하는 방법
-- 둘째, body 가 끝나기 전에 추가하는 방법
-- 주로 둘째 방법인 body태그 하단 쪽에 script태그를 추가한다. 페이지 로드 시간을 단축하고 User Experience를 개선하는데 도움을 주기 위해서 (from. chat GPT)
자식 요소 찾는 방법
-- 첫째 : 크롬 개발자 도구에서 document.body 조회 -> children 찾기
-- 둘째 : console.dir(document.body) 에서 children 항목 확인 / document.body.children 조회
document.createrElement('div')
const tweetDiv = document.createElement('div')
// 하지만 아직 화면상 나타나는 것은 없다.
// 생성한 <div>요소를 <body>요소에 append
document.body.append(tweetDiv)
// 아무 내용을 입력하지 않아 화면엔 보이지 않지만 개발자 도구 Elements 탭에선 보임
const oneTweet = document.querySelector('.tweet')
// 클래스 이름이 같은 요소 여러개 모두 불러오기 : Array-like Object
const tweets = document.querySelectorAll('.tweet')
// 같은 동작을 하는 메서드, 옛날 방식
const getOneTweet = document.getElementById('container')
// 위 div 요소를 container의 맨 마지막 자식 요소로
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
// 새 div만들기
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>
// testcontent로 비어있는 div 엘리먼트에 문자열 입력
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
// css 스타일링이 적용될 수 있도록 div엘리먼트에 class 추가
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
// append를 사용해 container의 자식 요소로 추가
const container = document.querySelector('#container')
container.append(oneDiv)
const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
// innerHTML 사용, container 안의 모든 자식 요소 삭제, 보안에서 문제점이 몇 있음
document.querySelector('#container').innerHTML = '';
// removeChild : 자식 요소를 지정하여 삭제하는 메서드/ 반복문 활용
// 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
// 마지막 자식 요소 하나만 남기기
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
// 직접 클래스 이름을 아는 요소를 찾아서 지우는 방법
// class명이 tweet일 경우
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
유효성 검사 과제는 내일도 헤쳐나가야 할 내용이므로 복습 + 심화문제를 풀어본 뒤 TIL로 리뷰할 예정이다.
DOM.. 어렵게 느껴졌는데 따라 작성해보니 어떤 역할을 하는 아이인지는 알게됐다. 그 안에 무수히 많은 내용이 있겠지만..!
내일도 화이텡~