CodeStates/JavaScript

Section1 / Unit10 : [JS / 브라우저] DOM

yeeendy 2023. 5. 1. 14:45

코드스테이츠 수업 16일차!

DOM에 대해 정리해보자

학습목표
  • DOM의 개념을 이해한다.
  • DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.
  • HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.

 

DOM(Document Object Model)
  • HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
  • 간단히 DOM으로 HTML을 조작 할 수 있다
HTML에 JavaScript 적용하기
  • 적용하기 위해서는 <script>태그를 이용
    <script>요소는 등장과 동시에 실행
  • 적용하는 2가지 방법
    -> <head> 안에 삽입
    -> <body>요소가 끝나기 전에 삽입
  •  <head> 와 <body> 맨 아래 작성하는 것의 가장 큰 차이는
    - HTML 요소를 다 읽고 JavaScript 파일이 실행하는지
    - HTML 요소를 읽기 전에 JavaScript 파일이 실행하는지 이 두 차이입니다.
    - HTML 요소를 브라우저가 전부 다 읽고 나서 실행 (<body> 뒤) 해야 하는
    JavaScript 파일은 주로 DOM을 이용해서 HTML을 동적으로 변경해야 하는 경우겠죠?
    - HTML 요소를 브라우저가 읽기 전에 실행 (<head> ) 해야 하는 경우는
    주로 HTML 요소를 읽지 않고 먼저 받아와도 되는 것들에 적용할 수 있을겁니다.
    예를 들어, CSS 파일을 받아온다던지, JavaScript 공용 라이브러리들을 먼저 받아온다던지 .. 등등이 있겠습니다.
    # <script> 요소의 async 나 defer 도 아시면 좋은 내용입니다
  • async와 defer 모두 비동기로 JavaScript 파일을 실행할 때 유용합니다.
    <script> 요소의 비동기는 간단히 말씀드리면 JavaScript 파일을 받아오는 동안에
    HTML 파일을 읽을 수 있는 작업 처리 기법을 의미합니다.
    즉, <script> 요소의 JavaScript 파일을 달라고 요청을 하고,
    그 동안에 HTML 파일을 미리 읽어놨다가 나중에 JavaScript 파일을 받을 수 있습니다.
DOM을 이용하여 HTML Element를 추가하는 방법
  • 새로운 요소를 만드는 방법
    ->document.createElement('div')
DOM을 이용하여 HTML Element를 부모 노드에 포함하는 방법
  • body에 연결하기
    ->document.body.append(document.createElement('div'))
DOM을 이용하여 HTML Element를 조회하는 방법
  • querySelector ->선택자를 조회한다
  • 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회
    ->document.querySelector('.tweet')
  • 클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아오기
    ->document.querySelectorAll('.tweet')
  • get으로 시작하는 DOM 조회 메서드
  • querySelector와 비슷한 역할을 하는 오래된 방식
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true
  • tweetDiv를 container의 마지막 자식 요소로 추가
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
DOM을 이용하여 HTML Element를 변경하는 방법
//oneDiv라는 이름의 <div> 요소 만들기
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>

//div 안에 문자열 입력하기
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

//CSS 스타일링 적용
//classList.add를 이용해 'tweet' 클래스를 추가
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

//append를 이용해 container의 자식 요소에 oneDiv를 추가
const container = document.querySelector('#container')
container.append(oneDiv)
  • Element.setAttribute()
    ->지정된 요소의 속성 값을 설정
    ->속성이 이미 있으면 값은 업데이트
    ->속성이 없다면 지정된 이름과 값으로 새 속성이 추가
DOM을 이용하여 HTML Element를 삭제하는 방법
//id가 container인 요소 아래에 tweetDiv를 추가하고, remove로 삭제
const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

//id가 container인 요소 아래의 모든 요소 삭제
//보안에 취약함
document.querySelector('#container').innerHTML = '';

//container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

//container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

//클래스 이름이 tweet인 요소만 찾아서 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

 

 

유효성 검사하다 몰랐던 것

test( ) 메서드
  • 주어진 문자열이 정규 표현식을 만족하는지 판별
  • 그 여부를 true or false로 반환
/^(?=.*[A-Z]).*$/
  • 문자열 전체를 대상으로 대문자가 최소 1개 이상 포함되어 있는지 확인하는 정규식
  • ^: 문자열의 시작
  • (?=.*[A-Z]): 대문자가 하나 이상 포함되어 있는지 확인 (전방 탐색 사용)
  • .*: 어떤 문자열이든 상관 없음
  • $: 문자열의 끝