TIL 4주차 2,3일 - DOM

Sang heon lee·2021년 6월 1일

CODESTATES

TIL 리스트

목록 보기

20/60

학습 내용

1. DOM

1.1 DOM 이란

Document Object Module 의 약자
HTML 요소를 객체(Object)처럼 조작할 수 있는 Model
즉 자바스크립트를 이용하여 HTML 문서를 조작하는 방법
브라우저 내에 내장되어 있는 인터페이스로 자바스크립트와 HTML 의 징검다리 역할
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. (from MDN)

   console.dir(document); 
   console.dir(documnet.body);
   // 결과를 확인하여 HTML의 여러요소가 객체 형태로 이루어져 있음을 확인할 수 있음.

1.2 HTML & JAVASCRIPT 연결

<body>
   <p></p>
   <script src="index.js"></script> 
   // 스크립트 태그는 바디 태그 내에 제일 끝문장이어야 한다.
</body>

1.3 DOM 으로 HTML 조작

1.3.1 CREATE

const tweetDiv = document.createElement('div');
// div 태그를 새로 만들고 변수 tweetDiv에 할당

심화 : https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

1.3.2 APPEND

document.body.append(tweetDiv)
// body 태그에 변수 tweetDiv(div 태그)를 추가

append 와 prepend 차이
append : 뒤에 추가
prepend : 앞에 추가
append 와 appendChild 차이
append : 자식 태그 및 텍스트 노드 생성 및 추가를 동시에 가능
appendChild : 자식 태그 와 텍스트 노드를 따로따로 생성 및 추가
같은 엘리먼트를 appendChild하면 기존 엘리먼트를 복사하는지?

1.3.3 READ

const oneTweet = document.querySelector('.tweet')
// class가 tweet인 첫 번째 태그를 조회

querySelectorAll 차이

let items = document.querySelectorAll('.animal');
document.querySelector('#newfriends').prepend(...items);

querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까요?
querySelector를 통해서 더 복잡한 작업을 할 수 있을까요?
querySelector의 부모는 꼭 document 객체여야만 할까요?

1.3.4 UPDATE

console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
// value를 추가

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
// class 속성을 추가

setAttribute 메소드 검색, CSS가 적용되지 않음.
textContent와 innerHTML의 차이
innerHTML의 보안상 단점

1.3.5 DELETE

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 추가 했던 태그를 삭제

tweetDiv.classList.add('tweet')
tweetDiv.classList.remove('tweet') // 추가 했던 클래스를 삭제

const container = document.querySelector('#container');
while (container.children.length > 0) {
  container.removeChild(container.lastChild);
} // container 의 자식 태그를 모두 제거

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
} // tweet인 클래스 태그만 찾아서 모두 제거