1/5 일일정리 DOM

DOM(Document Object Model)

MDN - DOM이란?

 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

HTML에 Javascript를 적용하는 방법

<script src = 'main.js'></script>

브라우저가 HTML 문서를 읽다가 script를 만나면 HTML 해석을 멈추고 script를 읽는다.

 script가 처음에 있거나 중간에 있으면 HTML을 읽는 와중에 중단하고 script를 읽기 때문에 사용자 입장에서 로딩이 느려진다는 것을 느낄 수 있다. 따라서 script는 HTML문서의 가장 하단, </body>태그 바로 위에 넣는 것이 권장된다.

 

https://bamtory29.tistory.com/entry/javascript-script%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98

[Javascript] <script>태그의 위치

 

 

console.dir 메서드로 DOM 구조를 조회할 수 있다.

console.dir

 

CRUD(+A) 실습

1. Create

createElement 메서드는 HTML tag를 만든다.

 

2. Append

 append 메서드는 tweetDiv에 담긴 요소를 body태그에 추가한다.

document.body.append(tweetDiv);

body태그 가장 아래에 div태그가 추가된다.

 

3. Read

querySelector 메서드로 원하는 id나 class를 가진 tag를 하나 선택할 수 있다. 

quertSelector는 하나만 선택한다.

 

querySelectorAll 메서드를 사용하면 여러개를 선택해 유사 배열(Array-like Object)로 반환한다.

querySelectorAll은 여러개를 선택한다.

 

div태그를 만들고 선택한 tag에 추가한다.

const container = document.querySelector('#container');
const tweetDiv = document.createElement('div');
container.append(tweetDiv);

이번에는 id가 container인 div안에 새로운 div를 생성했다.

 

4. Update

 textContent 메서드를 이용하면 태그안에 text를 추가할 수 있다. classList.add 메서드를 이용하면 class도 추가할 수 있다.

const oneDiv = document.createElement('div');
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

 

5. Delete

remove 메서드를 이용하면 요소를 지울 수 있다.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

 

자식요소를 지우려면 innerHTML 메서드를 이용할 수 있다.

document.querySelector('#container').innerHTML = '';

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);
}

// 특정 클래스 요소만 지우기
const tweets = document.querySelectorAll('.tweet');
for (let tweet of tweets){
    tweet.remove()
}