[C/F TIL] 16일차 - DOM, DOM 다루기 실습

mu-eng·2023년 5월 2일
1

TIL (in boost camp)

목록 보기
16/53
post-thumbnail

Code States
Front-end boost camp
Today
I
Learned

📬 화요일 도착~ 5월 2일 DOM 시작


📬 DOM

  • Document Object Model : HTML 요소를 Object처럼 조작할 수 있는 Model
  • HTML에 JavaScript를 적용하기 위해서는 script태그 이용
// 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 조회

📬 DOM 다루기

  • 새로운 div 요소 만들기
document.createrElement('div')
  • javascript 에서 어떤 작업의 결과를 담기 위해 변수 선언
const tweetDiv = document.createElement('div')
// 하지만 아직 화면상 나타나는 것은 없다.
  • 생성한 tweetDiv를 트리 구조와 연결
// 생성한 <div>요소를 <body>요소에 append
document.body.append(tweetDiv)

// 아무 내용을 입력하지 않아 화면엔 보이지 않지만 개발자 도구 Elements 탭에선 보임
  • js파일에 html 요소 조회하기
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()
}

📬 16일차 수업을 마치며...

유효성 검사 과제는 내일도 헤쳐나가야 할 내용이므로 복습 + 심화문제를 풀어본 뒤 TIL로 리뷰할 예정이다.

DOM.. 어렵게 느껴졌는데 따라 작성해보니 어떤 역할을 하는 아이인지는 알게됐다. 그 안에 무수히 많은 내용이 있겠지만..!

내일도 화이텡~

profile
[무엥일기] 무엥,,, 내가 머쨍이 개발자가 될 수 이쓰까,,,

0개의 댓글