JS_#9_DOM

📔 DOM

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

• console.dir() 

  • DOM을 객체의 모습으로 출력한다.

• console.dir(document.body) 

  • 자바스크립트에서 DOM은 document 객체에 구현되어 있고, 조회된다.
  • document.body.children : 바디의 자식 객체를 조회한다. 

• Node.parentElement

  • The read-only parentElement property of Node interface returns the DOM node’s parent Element , or null  if the node either has no parent, or its parent isn’t a DOM Element.
  • 부모 요소 값을 리턴한다. 

• document.getElementById(아이디) : 아이디를 사용해 문서 객체를 선택
  

• document.querySelector(선택자) : 선택자를 사용해 문서 객체를 선택
  

• document.getElementsByName(이름) : name 속성으로 여러 개의 문서 객체를 선택
  

• document.getElementsByClassName(클래스) : class 속성으로 여러 개의 문서 객체를 선택
  

• document.querySelectorAll(선택자) : 선택자로 여러 개의 문서 객체를 선택

---

💻 실습

1. Create 생성

document.createElement('div')
// 생성 후 요소 할당
const tweetDiv = document.createElement('div')

2. Append 연결

document.body.append(tweetDiv)

• 생성 후 container 에 넣기 위해서는 먼저 container  를 찾아야 한다.

3. Read 조회

• DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있습니다. 셀렉터로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.
  
• querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.
  
• 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다.
  
• 이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용하실 수 있습니다.
  • 이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다. 정식 명칭은 Array-like Object 입니다.

• CREATE에서 생성한 div 요소를 container에 넣을 준비를 마쳤습니다. 다음 코드를 입력하면, container의 맨 마지막 자식 요소로 tweetDiv를 추가합니다.
  

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

4. Update 추가

oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div> 문자열 추가

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div> 클래스 추가

const container = document.querySelector('#container')
container.append(oneDiv)
    

• 다른 attribute를 추가하는 방법들: [setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) 

5. Delelte 삭제

• 삭제하려는 요소의 위치를 알고 있는 경우

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

• 첫 번째 자식 요소를 지정해서 삭제(반복해서 삭제하므로 남아나는 게 없음. 죄다 지움)

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